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() {
var _ = require("lodash");
let { setAtual, setShowSideBar, setIsStackedOpen } =
let { setCurrent, setShowSideBar, setIsStackedOpen } =
useContext(locationContext);
let location = useLocation();
useEffect(() => {
setAtual(location.pathname.replace(/\/$/g, "").split("/"));
setCurrent(location.pathname.replace(/\/$/g, "").split("/"));
setShowSideBar(true);
setIsStackedOpen(true);
}, [location.pathname, setAtual, setIsStackedOpen, setShowSideBar]);
}, [location.pathname, setCurrent, setIsStackedOpen, setShowSideBar]);
const {
errorData,

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

@ -9,7 +9,7 @@ import { TabsContext } from "../../contexts/tabsContext";
export default function ExtraSidebar() {
const {uploadFlow} = useContext(TabsContext)
const {
atual,
current,
isStackedOpen,
setIsStackedOpen,
extraNavigation,
@ -44,7 +44,7 @@ export default function ExtraSidebar() {
<Link
to={item.href}
className={classNames(
item.href.split("/")[2] === atual[4]
item.href.split("/")[2] === current[4]
? "bg-gray-100 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"
@ -52,7 +52,7 @@ export default function ExtraSidebar() {
>
<item.icon
className={classNames(
item.href.split("/")[2] === atual[4]
item.href.split("/")[2] === current[4]
? "text-gray-500"
: "text-gray-400 group-hover:text-gray-500",
"mr-3 flex-shrink-0 h-6 w-6"
@ -71,7 +71,7 @@ export default function ExtraSidebar() {
<>
<Disclosure.Button
className={classNames(
item.href.split("/")[2] === atual[4]
item.href.split("/")[2] === current[4]
? "bg-gray-100 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"
@ -104,7 +104,7 @@ export default function ExtraSidebar() {
key={subItem.name}
to={subItem.href}
className={classNames(
subItem.href.split("/")[3] === atual[5]
subItem.href.split("/")[3] === current[5]
? "bg-gray-100 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"

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

@ -4,14 +4,14 @@ import { useContext } from "react"
import { locationContext } from "../../../contexts/locationContext";
export default function SidebarButton({item}){
let {atual}= useContext(locationContext);
let {current}= useContext(locationContext);
return (
<>
<Link
key={item.name}
to={item.href}
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'
)}
>

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

@ -22,7 +22,7 @@ function getPages(atual){
}
export default function Breadcrumb(){
let {atual} = useContext(locationContext);
let {current} = useContext(locationContext);
return (
<div>
<nav className="flex ml-2" aria-label="Breadcrumb">
@ -35,7 +35,7 @@ export default function Breadcrumb(){
</Link>
</div>
</li>
{getPages(atual).map((page) => (
{getPages(current).map((page) => (
<li key={page.href}>
<div className="flex items-center">
<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";
type locationContextType=
{
atual:Array<string>;
setAtual:(newState:Array<string>)=>void;
isStackedOpen: boolean;
setIsStackedOpen:(newState:boolean)=>void;
showSideBar:boolean;
setShowSideBar:(newState:boolean)=>void;
extraNavigation:{title:string, options?:Array<{name:string, href:string, icon: any, children?:Array<any>}>};
setExtraNavigation:(newState:{title:string, options?:Array<{name:string, href:string, icon: any, children?:Array<any>}>}) => void;
extraComponent:any;
setExtraComponent:(newState:any) => void;
}
const initialValue= {
atual : window.location.pathname.replace(/\/$/g, '').split("/"),
isStackedOpen:((window.innerWidth > 1024 && window.location.pathname.split("/")[1]) ? true : false),
setAtual: ()=>{},
setIsStackedOpen:()=>{},
showSideBar: window.location.pathname.split("/")[1]?true:false,
setShowSideBar:()=>{},
extraNavigation: {title:""},
setExtraNavigation:()=>{},
extraComponent: <></>,
setExtraComponent:()=>{},
}
//types for location context
type locationContextType = {
current: Array<string>;
setCurrent: (newState: Array<string>) => void;
isStackedOpen: boolean;
setIsStackedOpen: (newState: boolean) => void;
showSideBar: boolean;
setShowSideBar: (newState: boolean) => void;
extraNavigation: {
title: string;
options?: Array<{
name: string;
href: string;
icon: any;
children?: Array<any>;
}>;
};
setExtraNavigation: (newState: {
title: string;
options?: Array<{
name: string;
href: string;
icon: any;
children?: Array<any>;
}>;
}) => 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 function LocationProvider({children}){
const [atual,setAtual] = useState(initialValue.atual)
const [isStackedOpen,setIsStackedOpen] = useState(initialValue.isStackedOpen)
const [showSideBar,setShowSideBar] = useState(initialValue.showSideBar)
const [extraNavigation, setExtraNavigation] = useState({title:""})
const [extraComponent, setExtraComponent] = useState(<></>)
return (
<locationContext.Provider value={{isStackedOpen,setIsStackedOpen,atual,setAtual, showSideBar, setShowSideBar,extraNavigation, setExtraNavigation, extraComponent, setExtraComponent}}>
{children}
</locationContext.Provider>
)
export function LocationProvider({ children }) {
const [current, setCurrent] = useState(initialValue.current);
const [isStackedOpen, setIsStackedOpen] = useState(
initialValue.isStackedOpen
);
const [showSideBar, setShowSideBar] = useState(initialValue.showSideBar);
const [extraNavigation, setExtraNavigation] = useState({ title: "" });
const [extraComponent, setExtraComponent] = useState(<></>);
return (
<locationContext.Provider
value={{
isStackedOpen,
setIsStackedOpen,
current,
setCurrent,
showSideBar,
setShowSideBar,
extraNavigation,
setExtraNavigation,
extraComponent,
setExtraComponent,
}}
>
{children}
</locationContext.Provider>
);
}