Changed project structure, added sidebar and alerts

space_flow/src/contexts/alertContext.tsx

@@ -0,0 +1,103 @@
+import { createContext, useState } from "react";
+import { alertDropdownItem } from "../alerts/alertDropDown";
+
+var _ = require("lodash");
+
+type alertContextType=
+{
+    errorData: {title: string, list?: Array<string>};
+    setErrorData:(newState:{title: string, list?: Array<string>})=>void;
+    errorOpen: boolean;
+    setErrorOpen:(newState:boolean)=>void;
+    noticeData: {title: string, link?: string};
+    setNoticeData:(newState:{title: string, link?: string})=>void;
+    noticeOpen: boolean;
+    setNoticeOpen:(newState:boolean)=>void;
+    successData: {title: string};
+    setSuccessData:(newState:{title: string})=>void;
+    successOpen: boolean;
+    setSuccessOpen:(newState:boolean)=>void;
+    notificationCenter:boolean
+    setNotificationCenter:(newState:boolean)=>void;
+    notificationList:Array<alertDropdownItem>;
+    pushNotificationList:(Object)=>void
+    clearNotificationList:()=>void,
+    removeFromNotificationList:(index:number)=>void
+}
+
+const initialValue= {
+    errorData: {title:"", list:[]},
+    setErrorData:()=>{},
+    errorOpen: false,
+    setErrorOpen:()=>{},
+    noticeData: {title:"", link:""},
+    setNoticeData:()=>{},
+    noticeOpen: false,
+    setNoticeOpen:()=>{},
+    successData: {title:""},
+    setSuccessData:()=>{},
+    successOpen: false,
+    setSuccessOpen:()=>{},
+    notificationCenter:false,
+    setNotificationCenter:()=>{},
+    notificationList:[],
+    pushNotificationList:()=>{},
+    clearNotificationList:()=>{},
+    removeFromNotificationList:()=>{}
+}
+
+export const alertContext = createContext<alertContextType>(initialValue);
+
+export function AlertProvider({children}){
+    const [errorData, setErrorDataState] = useState<{title:string,list?:Array<string>}>({title:"",list:[]});
+    const [errorOpen, setErrorOpen] = useState(false);
+    const [noticeData, setNoticeDataState] = useState<{title:string,link?:string}>({title:"",link:""});
+    const [noticeOpen, setNoticeOpen] = useState(false);
+    const [successData, setSuccessDataState] = useState<{title:string}>({title:""});
+    const [successOpen, setSuccessOpen] = useState(false);
+    const [notificationCenter,setNotificationCenter]=useState(false);
+    const [notificationList,setNotificationList] = useState([])
+    const pushNotificationList = (notification:alertDropdownItem)=>{
+        setNotificationList((old) => {
+            let newNotificationList = _.cloneDeep(old);
+            newNotificationList.unshift(notification);
+            return newNotificationList;
+        })
+    }
+    function setErrorData (newState:{title: string, list?: Array<string>}){
+        setErrorDataState(newState)
+        setErrorOpen(true)
+        if(newState.title){
+            setNotificationCenter(true)
+            pushNotificationList({type:"error",title:newState.title,list:newState.list, id:_.uniqueId()})
+        }
+    }
+    function setNoticeData(newState:{title: string, link?: string}){
+        setNoticeDataState(newState)
+        setNoticeOpen(true)
+        if(newState.title){
+            setNotificationCenter(true)
+            pushNotificationList({type:"notice",title:newState.title,link:newState.link, id:_.uniqueId()})
+        }
+    }
+    function setSuccessData(newState:{title: string}){
+        setSuccessDataState(newState)
+        setSuccessOpen(true)
+        if(newState.title){
+            setNotificationCenter(true)
+            pushNotificationList({type:"success",title:newState.title, id:_.uniqueId()})
+        }
+    }
+    function clearNotificationList(){
+        setNotificationList([])
+    }
+    function removeFromNotificationList(index:number){
+        setNotificationList((prevAlertsList) => prevAlertsList.filter((alert) => alert.id !== index));
+    }
+    return (
+        <alertContext.Provider value={{ removeFromNotificationList,clearNotificationList,notificationList,pushNotificationList,setNotificationCenter,notificationCenter,errorData, setErrorData, 
+        errorOpen,setErrorOpen, noticeData, setNoticeData, noticeOpen, setNoticeOpen, successData, setSuccessData, successOpen, setSuccessOpen}}>
+            {children}
+        </alertContext.Provider>
+    )
+}

space_flow/src/contexts/index.tsx

@@ -0,0 +1,15 @@
+import { AlertProvider } from "./alertContext";
+import { LocationProvider } from "./locationContext";
+import PopUpProvider from "./popUpContext";
+
+export default function ContextWrapper({ children }) {
+  return (
+    <>
+      <LocationProvider>
+        <PopUpProvider>
+          <AlertProvider>{children}</AlertProvider>
+        </PopUpProvider>
+      </LocationProvider>
+    </>
+  );
+}

space_flow/src/contexts/locationContext.tsx

@@ -0,0 +1,45 @@
+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: null,
+    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(null)
+    return (
+        <locationContext.Provider value={{isStackedOpen,setIsStackedOpen,atual,setAtual, showSideBar, setShowSideBar,extraNavigation, setExtraNavigation, extraComponent, setExtraComponent}}>
+            {children}
+        </locationContext.Provider>
+    )
+}

space_flow/src/contexts/popUpContext.tsx

@@ -0,0 +1,32 @@
+import { createContext } from "react";
+import React, { useState } from 'react';
+
+export const PopUpContext = createContext({
+    openPopUp: (popUpElement: JSX.Element) => {},
+    closePopUp: () => {}
+});
+
+interface PopUpProviderProps {
+  children: React.ReactNode;
+}
+
+const PopUpProvider = ({ children }: PopUpProviderProps) => {
+  const [popUpElement, setPopUpElement] = useState<JSX.Element | null>(null);
+
+  const openPopUp = (element: JSX.Element) => {
+    setPopUpElement(element);
+  };
+
+  const closePopUp = () => {
+    setPopUpElement(null);
+  };
+
+  return (
+    <PopUpContext.Provider value={{ openPopUp, closePopUp }}>
+      {children}
+      {popUpElement}
+    </PopUpContext.Provider>
+  );
+};
+
+export default PopUpProvider;