From 8ace1991184b4a4fb050c54f8cfc947611f140aa Mon Sep 17 00:00:00 2001 From: Lucas Oliveira Date: Fri, 10 Feb 2023 16:03:05 -0300 Subject: [PATCH] Changed project structure, added sidebar and alerts --- .../components/singleAlertComponent/index.tsx | 133 +++++++++++ space_flow/src/alerts/alertDropDown/index.tsx | 78 +++++++ space_flow/src/alerts/error/errorClass.ts | 18 ++ space_flow/src/alerts/error/index.tsx | 63 ++++++ space_flow/src/alerts/notice/index.tsx | 65 ++++++ space_flow/src/alerts/success/index.tsx | 51 +++++ .../ExtraSidebarComponent/index.tsx | 130 +++++++++++ .../src/components/HeaderComponent/index.tsx | 109 +++++++++ .../src/components/SidebarComponent/index.tsx | 68 ++++++ .../SidebarComponent/sidebarButton/index.tsx | 23 ++ .../components/breadcrumbComponent/index.tsx | 55 +++++ .../src/components/loadingComponent/index.tsx | 16 ++ space_flow/src/contexts/alertContext.tsx | 103 +++++++++ space_flow/src/contexts/index.tsx | 15 ++ space_flow/src/contexts/locationContext.tsx | 45 ++++ space_flow/src/contexts/popUpContext.tsx | 32 +++ space_flow/src/entities/sidebarNav.ts | 18 ++ .../extraSidebarComponent/index.tsx | 24 ++ space_flow/src/pages/FlowPage/index.tsx | 94 ++++++++ space_flow/src/utils.ts | 206 ++++++++++++++++++ 20 files changed, 1346 insertions(+) create mode 100644 space_flow/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx create mode 100644 space_flow/src/alerts/alertDropDown/index.tsx create mode 100644 space_flow/src/alerts/error/errorClass.ts create mode 100644 space_flow/src/alerts/error/index.tsx create mode 100644 space_flow/src/alerts/notice/index.tsx create mode 100644 space_flow/src/alerts/success/index.tsx create mode 100644 space_flow/src/components/ExtraSidebarComponent/index.tsx create mode 100644 space_flow/src/components/HeaderComponent/index.tsx create mode 100644 space_flow/src/components/SidebarComponent/index.tsx create mode 100644 space_flow/src/components/SidebarComponent/sidebarButton/index.tsx create mode 100644 space_flow/src/components/breadcrumbComponent/index.tsx create mode 100644 space_flow/src/components/loadingComponent/index.tsx create mode 100644 space_flow/src/contexts/alertContext.tsx create mode 100644 space_flow/src/contexts/index.tsx create mode 100644 space_flow/src/contexts/locationContext.tsx create mode 100644 space_flow/src/contexts/popUpContext.tsx create mode 100644 space_flow/src/entities/sidebarNav.ts create mode 100644 space_flow/src/pages/FlowPage/components/extraSidebarComponent/index.tsx create mode 100644 space_flow/src/pages/FlowPage/index.tsx create mode 100644 space_flow/src/utils.ts diff --git a/space_flow/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx b/space_flow/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx new file mode 100644 index 000000000..f661de7f8 --- /dev/null +++ b/space_flow/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx @@ -0,0 +1,133 @@ +import { XCircleIcon, XMarkIcon, InformationCircleIcon, CheckCircleIcon } from "@heroicons/react/24/outline"; +import { Link } from "react-router-dom"; +import { Transition } from "@headlessui/react"; +import { useState } from "react"; + +export default function SingleAlert({ dropItem, removeAlert }) { + const [show, setShow] = useState(true); + const type = dropItem.type; + + return ( + + {type === "error"? +
+
+
+
+

+ {dropItem.title} +

+ {dropItem.list ? ( +
+
    + {dropItem.list.map((item, idx) => ( +
  • {item}
    • + ))} +
+
+ ) : ( + <> + )} +
+
+
+ +
+
+
+ :(type === "notice" ? +
+
+
+
+

{dropItem.title}

+

+ {dropItem.link ? ( + + Details + + ) : ( + <> + )} +

+
+
+
+ +
+
+
+ : +
+
+
+
+

+ {dropItem.title} +

+
+
+
+ +
+
+
+ ) + } + + + ) + + } \ No newline at end of file diff --git a/space_flow/src/alerts/alertDropDown/index.tsx b/space_flow/src/alerts/alertDropDown/index.tsx new file mode 100644 index 000000000..87ecb5478 --- /dev/null +++ b/space_flow/src/alerts/alertDropDown/index.tsx @@ -0,0 +1,78 @@ +import { useContext } from "react"; +import { alertContext } from "../../contexts/alertContext"; +import { + CheckCircleIcon, + InformationCircleIcon, + XCircleIcon, + XMarkIcon, +} from "@heroicons/react/24/solid"; +import { Link } from "react-router-dom"; +import { Transition } from "@headlessui/react"; +import { TrashIcon } from "@heroicons/react/24/outline"; +import SingleAlert from "./components/singleAlertComponent"; + +type AlertDropdownProps = { + closeFunction: () => void; + open?: boolean; +}; + +export type alertDropdownItem = { + type: "notice" | "error" | "success"; + title: string; + link?: string; + list?: Array; + id: string; +}; + +export default function AlertDropdown({closeFunction, open}: AlertDropdownProps) { + const { + notificationList, + clearNotificationList, + removeFromNotificationList, + } = useContext(alertContext); + + + + return ( + +
+
+ Notifications +
+ + +
+
+
+ {notificationList.length !== 0 ? + notificationList.map((alertItem, index) => ( + + )) + : +
+ No new notifications +
+ } +
+
+ + ); +} diff --git a/space_flow/src/alerts/error/errorClass.ts b/space_flow/src/alerts/error/errorClass.ts new file mode 100644 index 000000000..a37691976 --- /dev/null +++ b/space_flow/src/alerts/error/errorClass.ts @@ -0,0 +1,18 @@ +const defaultErrorMessages ={ + deleteRLAS:"Could not remove label from record, please try again", + addRLAS:"Could not label this record, please try again", + deleteRecords:"Could not delete record, please try again later" +} + + + +export class CustomError extends Error{ + constructor(message:string){ + super(message) + Object.setPrototypeOf(this,CustomError.prototype) + } + + getErrorMessage(): string{ + return defaultErrorMessages[this.message]?? "unknow error, please try again" + } +} \ No newline at end of file diff --git a/space_flow/src/alerts/error/index.tsx b/space_flow/src/alerts/error/index.tsx new file mode 100644 index 000000000..febcdd3a5 --- /dev/null +++ b/space_flow/src/alerts/error/index.tsx @@ -0,0 +1,63 @@ +import { Transition } from "@headlessui/react"; +import { XCircleIcon, XMarkIcon } from "@heroicons/react/24/outline"; +import { useEffect, useState } from "react"; + +export default function ErrorAlert({ title, list = [], id, removeAlert }) { + const [show, setShow] = useState(true); + useEffect(() => { + if(show){ + setTimeout(() => { + setShow(false); setTimeout(() => {removeAlert(id);}, 500); + }, 5000); + } + }, [id, removeAlert, show]); + return ( + +
+
+
+
+
+

{title}

+ {list.length !== 0 + ? +
+
    + {list.map((item, index) => ( +
  • {item}
    • + ))} +
+
+ : + <> + } + +
+
+
+ +
+
+
+
+ + ); +} diff --git a/space_flow/src/alerts/notice/index.tsx b/space_flow/src/alerts/notice/index.tsx new file mode 100644 index 000000000..83992597e --- /dev/null +++ b/space_flow/src/alerts/notice/index.tsx @@ -0,0 +1,65 @@ +import { Transition } from "@headlessui/react"; +import { InformationCircleIcon, XMarkIcon } from "@heroicons/react/24/outline"; +import { useEffect, useState } from "react"; +import { Link } from "react-router-dom"; + +export default function NoticeAlert({ title, link = "", id, removeAlert }) { + const [show, setShow] = useState(true); + useEffect(() => { + if(show){ + setTimeout(() => { + setShow(false); setTimeout(() => {removeAlert(id);}, 500); + }, 5000); + } + }, [id, removeAlert, show]); + return ( + +
+
+
+
+
+

{title}

+

+ {link !== "" + ? + + Details + + : + <> + } +

+
+
+
+ +
+
+
+
+ + ); +} diff --git a/space_flow/src/alerts/success/index.tsx b/space_flow/src/alerts/success/index.tsx new file mode 100644 index 000000000..a713ed90b --- /dev/null +++ b/space_flow/src/alerts/success/index.tsx @@ -0,0 +1,51 @@ +import { Transition } from "@headlessui/react"; +import { CheckCircleIcon, XMarkIcon } from "@heroicons/react/24/outline"; +import { useEffect, useState } from "react"; + +export default function SuccessAlert({ title, id, removeAlert }) { + const [show, setShow] = useState(true); + useEffect(() => { + if(show){ + setTimeout(() => { + setShow(false); setTimeout(() => {removeAlert(id);}, 500); + }, 5000); + } + }, [id, removeAlert, show]); + return ( + +
+
+
+
+
+

{title}

+
+
+
+ +
+
+
+
+ + ); +} diff --git a/space_flow/src/components/ExtraSidebarComponent/index.tsx b/space_flow/src/components/ExtraSidebarComponent/index.tsx new file mode 100644 index 000000000..2323409ff --- /dev/null +++ b/space_flow/src/components/ExtraSidebarComponent/index.tsx @@ -0,0 +1,130 @@ +import { Disclosure } from "@headlessui/react"; +import { ChevronLeftIcon } from "@heroicons/react/24/outline"; +import { useContext } from "react"; +import { Link } from "react-router-dom"; +import { classNames } from "../../utils"; +import { locationContext } from "../../contexts/locationContext"; + +export default function ExtraSidebar() { + const { + atual, + isStackedOpen, + setIsStackedOpen, + extraNavigation, + extraComponent, + } = useContext(locationContext); + return ( + <> + + + ); +} diff --git a/space_flow/src/components/HeaderComponent/index.tsx b/space_flow/src/components/HeaderComponent/index.tsx new file mode 100644 index 000000000..b4504c346 --- /dev/null +++ b/space_flow/src/components/HeaderComponent/index.tsx @@ -0,0 +1,109 @@ +import { Fragment, useContext, useState } from 'react' +import { Menu, Transition } from '@headlessui/react' +import { MagnifyingGlassIcon } from '@heroicons/react/20/solid' +import { + BellIcon, + MoonIcon, + } from '@heroicons/react/24/outline' +import { classNames } from '../../utils' +import { Link } from 'react-router-dom' +import Breadcrumb from '../breadcrumbComponent' +import { alertContext } from '../../contexts/alertContext' +import { useLayer,Arrow } from 'react-laag' +import AlertDropdown from '../../alerts/alertDropDown' + +export default function Header({user, userNavigation}){ + const {notificationCenter, setNotificationCenter} = useContext(alertContext) + const [isOpen,setIsOpen] = useState(false) + const {layerProps,renderLayer, triggerProps} = useLayer({ + isOpen, + placement: "left-start", + onOutsideClick:()=>setIsOpen(false), + preferX: "left", + triggerOffset: 10, + containerOffset: 12, + arrowOffset: 4, + }) + return ( +
+ {/* Logo area */} +
+ + Your Company + +
+ + {/* Desktop nav area */} +
+
+ +
+
+
+ + {renderLayer(
setIsOpen(false)} open={isOpen}>
)} + + + + + Open user menu + + + + + +
+ {userNavigation.map((item,index) => ( + + {({ active }) => ( + !item.href.includes("http://")? + + {item.name} + : + + {item.name} + )} + + )) + } +
+ + + +
+
+
+
+ ) +} \ No newline at end of file diff --git a/space_flow/src/components/SidebarComponent/index.tsx b/space_flow/src/components/SidebarComponent/index.tsx new file mode 100644 index 000000000..518b985b4 --- /dev/null +++ b/space_flow/src/components/SidebarComponent/index.tsx @@ -0,0 +1,68 @@ +import SidebarButton from "./sidebarButton"; +import { BsPlusSquare } from "react-icons/bs"; +import { classNames } from "../../utils"; +import { ChevronRightIcon } from "@heroicons/react/24/outline"; +import { useContext, useState } from "react"; +import { sidebarNavigation } from "../../entities/sidebarNav"; +import { locationContext } from "../../contexts/locationContext"; + +export default function Sidebar() { + let { showSideBar, isStackedOpen, setIsStackedOpen } = + useContext(locationContext); + const [newProjectOpen, setNewProjectOpen] = useState(false); + let current = false; + return ( +
+
+ +
+
+ ); +} diff --git a/space_flow/src/components/SidebarComponent/sidebarButton/index.tsx b/space_flow/src/components/SidebarComponent/sidebarButton/index.tsx new file mode 100644 index 000000000..447f3fc52 --- /dev/null +++ b/space_flow/src/components/SidebarComponent/sidebarButton/index.tsx @@ -0,0 +1,23 @@ +import { classNames } from "../../../utils" +import { Link } from "react-router-dom" +import { useContext } from "react" +import { locationContext } from "../../../contexts/locationContext"; + +export default function SidebarButton({item}){ + let {atual}= useContext(locationContext); + return ( + <> + + {item.name} +