jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

refactor location context

Browse source
This commit is contained in:
anovazzi1 2023-02-27 14:23:40 -03:00
commit 60eccb274d
5 changed files with 84 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

6
space_flow/src/App.tsx
View file

@ -18,14 +18,14 @@ import { TabsManager } from "./pages/FlowPage/flowManager";
export default function App() { export default function App() {
var _ = require("lodash"); var _ = require("lodash");
let { setAtual, setShowSideBar, setIsStackedOpen } = let { setCurrent, setShowSideBar, setIsStackedOpen } =
useContext(locationContext); useContext(locationContext);
let location = useLocation(); let location = useLocation();
useEffect(() => { useEffect(() => {
setAtual(location.pathname.replace(/\/$/g, "").split("/")); setCurrent(location.pathname.replace(/\/$/g, "").split("/"));
setShowSideBar(true); setShowSideBar(true);
setIsStackedOpen(true); setIsStackedOpen(true);
}, [location.pathname, setAtual, setIsStackedOpen, setShowSideBar]); }, [location.pathname, setCurrent, setIsStackedOpen, setShowSideBar]);
const { const {
errorData, errorData,

10
space_flow/src/components/ExtraSidebarComponent/index.tsx
View file

@ -9,7 +9,7 @@ import { TabsContext } from "../../contexts/tabsContext";
export default function ExtraSidebar() { export default function ExtraSidebar() {
const {uploadFlow} = useContext(TabsContext) const {uploadFlow} = useContext(TabsContext)
const { const {
atual, current,
isStackedOpen, isStackedOpen,
setIsStackedOpen, setIsStackedOpen,
extraNavigation, extraNavigation,
@ -44,7 +44,7 @@ export default function ExtraSidebar() {
<Link <Link
to={item.href} to={item.href}
className={classNames( className={classNames(
item.href.split("/")[2] === atual[4] item.href.split("/")[2] === current[4]
? "bg-gray-100 text-gray-900" ? "bg-gray-100 text-gray-900"
: "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900", : "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
"group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md" "group w-full flex items-center pl-2 py-2 text-sm font-medium rounded-md"
@ -52,7 +52,7 @@ export default function ExtraSidebar() {
> >
<item.icon <item.icon
className={classNames( className={classNames(
item.href.split("/")[2] === atual[4] item.href.split("/")[2] === current[4]
? "text-gray-500" ? "text-gray-500"
: "text-gray-400 group-hover:text-gray-500", : "text-gray-400 group-hover:text-gray-500",
"mr-3 flex-shrink-0 h-6 w-6" "mr-3 flex-shrink-0 h-6 w-6"
@ -71,7 +71,7 @@ export default function ExtraSidebar() {
<> <>
<Disclosure.Button <Disclosure.Button
className={classNames( className={classNames(
item.href.split("/")[2] === atual[4] item.href.split("/")[2] === current[4]
? "bg-gray-100 text-gray-900" ? "bg-gray-100 text-gray-900"
: "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900", : "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
"group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" "group w-full flex items-center pl-2 pr-1 py-2 text-left text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
@ -104,7 +104,7 @@ export default function ExtraSidebar() {
key={subItem.name} key={subItem.name}
to={subItem.href} to={subItem.href}
className={classNames( className={classNames(
subItem.href.split("/")[3] === atual[5] subItem.href.split("/")[3] === current[5]
? "bg-gray-100 text-gray-900" ? "bg-gray-100 text-gray-900"
: "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900", : "bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-900",
"group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium" "group flex w-full items-center rounded-md py-2 pl-11 pr-2 text-sm font-medium"

4
space_flow/src/components/SidebarComponent/sidebarButton/index.tsx
View file

@ -4,14 +4,14 @@ import { useContext } from "react"
import { locationContext } from "../../../contexts/locationContext"; import { locationContext } from "../../../contexts/locationContext";
export default function SidebarButton({item}){ export default function SidebarButton({item}){
let {atual}= useContext(locationContext); let {current}= useContext(locationContext);
return ( return (
<> <>
<Link <Link
key={item.name} key={item.name}
to={item.href} to={item.href}
className={classNames( className={classNames(
item.href.split("/")[1]=== atual[3]? 'bg-gray-900 text-white' : 'text-gray-400 hover:bg-gray-700', item.href.split("/")[1]=== current[3]? 'bg-gray-900 text-white' : 'text-gray-400 hover:bg-gray-700',
'flex-shrink-0 inline-flex items-center justify-center h-14 w-14 rounded-lg' 'flex-shrink-0 inline-flex items-center justify-center h-14 w-14 rounded-lg'
)} )}
> >

4
space_flow/src/components/breadcrumbComponent/index.tsx
View file

@ -22,7 +22,7 @@ function getPages(atual){
} }
export default function Breadcrumb(){ export default function Breadcrumb(){
let {atual} = useContext(locationContext); let {current} = useContext(locationContext);
return ( return (
<div> <div>
<nav className="flex ml-2" aria-label="Breadcrumb"> <nav className="flex ml-2" aria-label="Breadcrumb">
@ -35,7 +35,7 @@ export default function Breadcrumb(){
</Link> </Link>
</div> </div>
</li> </li>
{getPages(atual).map((page) => ( {getPages(current).map((page) => (
<li key={page.href}> <li key={page.href}>
<div className="flex items-center"> <div className="flex items-center">
<ChevronRightIcon className="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" /> <ChevronRightIcon className="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" />

110
space_flow/src/contexts/locationContext.tsx
View file

@ -1,45 +1,79 @@
import { createContext, useState } from "react"; import { createContext, useState } from "react";
type locationContextType= //types for location context
{ type locationContextType = {
atual:Array<string>; current: Array<string>;
setAtual:(newState:Array<string>)=>void; setCurrent: (newState: Array<string>) => void;
isStackedOpen: boolean; isStackedOpen: boolean;
setIsStackedOpen:(newState:boolean)=>void; setIsStackedOpen: (newState: boolean) => void;
showSideBar:boolean; showSideBar: boolean;
setShowSideBar:(newState:boolean)=>void; setShowSideBar: (newState: boolean) => void;
extraNavigation:{title:string, options?:Array<{name:string, href:string, icon: any, children?:Array<any>}>}; extraNavigation: {
setExtraNavigation:(newState:{title:string, options?:Array<{name:string, href:string, icon: any, children?:Array<any>}>}) => void; title: string;
extraComponent:any; options?: Array<{
setExtraComponent:(newState:any) => void; name: string;
} href: string;
icon: any;
const initialValue= { children?: Array<any>;
atual : window.location.pathname.replace(/\/$/g, '').split("/"), }>;
isStackedOpen:((window.innerWidth > 1024 && window.location.pathname.split("/")[1]) ? true : false), };
setAtual: ()=>{}, setExtraNavigation: (newState: {
setIsStackedOpen:()=>{}, title: string;
showSideBar: window.location.pathname.split("/")[1]?true:false, options?: Array<{
setShowSideBar:()=>{}, name: string;
extraNavigation: {title:""}, href: string;
setExtraNavigation:()=>{}, icon: any;
extraComponent: <></>, children?: Array<any>;
setExtraComponent:()=>{}, }>;
} }) => void;
extraComponent: any;
setExtraComponent: (newState: any) => void;
};
//initial value for location context
const initialValue = {
//actual
current: window.location.pathname.replace(/\/$/g, "").split("/"),
isStackedOpen:
window.innerWidth > 1024 && window.location.pathname.split("/")[1]
? true
: false,
setCurrent: () => {},
setIsStackedOpen: () => {},
showSideBar: window.location.pathname.split("/")[1] ? true : false,
setShowSideBar: () => {},
extraNavigation: { title: "" },
setExtraNavigation: () => {},
extraComponent: <></>,
setExtraComponent: () => {},
};
export const locationContext = createContext<locationContextType>(initialValue); export const locationContext = createContext<locationContextType>(initialValue);
export function LocationProvider({children}){ export function LocationProvider({ children }) {
const [atual,setAtual] = useState(initialValue.atual) const [current, setCurrent] = useState(initialValue.current);
const [isStackedOpen,setIsStackedOpen] = useState(initialValue.isStackedOpen) const [isStackedOpen, setIsStackedOpen] = useState(
const [showSideBar,setShowSideBar] = useState(initialValue.showSideBar) initialValue.isStackedOpen
const [extraNavigation, setExtraNavigation] = useState({title:""}) );
const [extraComponent, setExtraComponent] = useState(<></>) const [showSideBar, setShowSideBar] = useState(initialValue.showSideBar);
return ( const [extraNavigation, setExtraNavigation] = useState({ title: "" });
<locationContext.Provider value={{isStackedOpen,setIsStackedOpen,atual,setAtual, showSideBar, setShowSideBar,extraNavigation, setExtraNavigation, extraComponent, setExtraComponent}}> const [extraComponent, setExtraComponent] = useState(<></>);
{children} return (
</locationContext.Provider> <locationContext.Provider
) value={{
isStackedOpen,
setIsStackedOpen,
current,
setCurrent,
showSideBar,
setShowSideBar,
extraNavigation,
setExtraNavigation,
extraComponent,
setExtraComponent,
}}
>
{children}
</locationContext.Provider>
);
} }