diff --git a/app/main.wasp b/app/main.wasp index f89f7671..cc6b27eb 100644 --- a/app/main.wasp +++ b/app/main.wasp @@ -80,7 +80,7 @@ page PlayGroundPage { route BuildRoute { path: "/build/:type?", to: BuildPage } page BuildPage { - component: import BuildPageWithCustomAuth from "@src/client/app/BuildPageNew" + component: import BuildPageWithCustomAuth from "@src/client/app/BuildPage" } route LoginRoute { path: "/login", to: LoginPage } diff --git a/app/src/client/app/BuildPage.tsx b/app/src/client/app/BuildPage.tsx index 7506ba22..e7ee1c76 100644 --- a/app/src/client/app/BuildPage.tsx +++ b/app/src/client/app/BuildPage.tsx @@ -1,18 +1,14 @@ -import React, { useEffect, useState, memo } from 'react'; +import React, { useEffect, useState } from 'react'; import { useHistory } from 'react-router-dom'; import { type User } from 'wasp/entities'; import _ from 'lodash'; import { useBuildPage } from '../hooks/useBuildPage'; - import CustomAuthRequiredLayout from './layout/CustomAuthRequiredLayout'; -import CustomSidebar from '../components/CustomSidebar'; import LoadingComponent from '../components/LoadingComponent'; import { ErrorComponent } from '../components/ErrorComponent'; - -import { SubHeader } from '../components/buildPage/SubHeader'; -import { UserProperty } from '../components/buildPage/UserProperty'; +import BuildPageTab from '../components/buildPage/BuildPageTab'; interface BuildPageProps { user: User; @@ -21,12 +17,11 @@ interface BuildPageProps { const BuildPage = ({ user }: BuildPageProps) => { const history = useHistory(); const { data: propertiesSchema, loading, error } = useBuildPage(); - const [sidebarOpen, setSidebarOpen] = useState(false); const [activeProperty, setActiveProperty] = useState(null); const [sideNavItemClickCount, setSideNavItemClickCount] = useState(0); const wrapperClass = document.body.classList.contains('server-error') - ? 'h-[calc(100vh-203px)]' - : 'h-[calc(100vh-105px)]'; + ? 'min-h-[calc(100vh-344px)]' + : 'min-h-[calc(100vh-246px)]'; const handleSideNavItemClick = (selectedComponentName: string) => { setActiveProperty(selectedComponentName); @@ -60,24 +55,18 @@ const BuildPage = ({ user }: BuildPageProps) => { {/* */} {canRenderProperty && (
- {/* */} - - {/* */} - {/* */} + {/* */}
{/* */} - + {/* */} {/* */} {/* */}
-
- */} +
+ { - const history = useHistory(); - const { data: propertiesSchema, loading, error } = useBuildPage(); - const [sidebarOpen, setSidebarOpen] = useState(false); - const [activeProperty, setActiveProperty] = useState(null); - const [sideNavItemClickCount, setSideNavItemClickCount] = useState(0); - const wrapperClass = document.body.classList.contains('server-error') - ? 'min-h-[calc(100vh-344px)]' - : 'min-h-[calc(100vh-246px)]'; - - const handleSideNavItemClick = (selectedComponentName: string) => { - setActiveProperty(selectedComponentName); - setSideNavItemClickCount(sideNavItemClickCount + 1); - }; - - const setActivePropertyInSessionStorage = (propertyName: string) => { - sessionStorage.setItem('activeProperty', propertyName); - }; - - useEffect(() => { - if (propertiesSchema) { - const propertyName = sessionStorage.getItem('activeProperty') || propertiesSchema.list_of_schemas[0].name; - setActiveProperty(propertyName); - } - }, [propertiesSchema]); - - useEffect(() => { - if (activeProperty) { - history.push(`/build/${activeProperty}`); - setActivePropertyInSessionStorage(activeProperty); - } - }, [activeProperty]); - - const canRenderProperty = propertiesSchema && activeProperty; - - return ( -
- {loading && } - {error && } - {/* */} - {canRenderProperty && ( -
- {/* */} -
- {/* */} - {/* */} - {/* */} - - {/* */} -
- {/*
*/} -
- - {/* */} -
-
-
-
- )} -
- ); -}; - -const BuildPageWithCustomAuth = CustomAuthRequiredLayout(BuildPage); -export default BuildPageWithCustomAuth; diff --git a/app/src/client/components/buildPage/BuildPageTab.tsx b/app/src/client/components/buildPage/BuildPageTab.tsx new file mode 100644 index 00000000..15a167fc --- /dev/null +++ b/app/src/client/components/buildPage/BuildPageTab.tsx @@ -0,0 +1,97 @@ +import { useEffect, useState } from 'react'; + +import { Tabs, TabList, TabPanels, Tab, TabPanel, Box, Flex } from '@chakra-ui/react'; + +import { navLinkItems } from '../CustomSidebar'; +import { UserProperty } from './UserProperty'; +import { PropertiesSchema } from '../../interfaces/BuildPageInterfaces'; +import faLogoWithoutText from '../../static/fa-logo-without-text.svg'; + +interface Props { + onSideNavItemClick: (selectedItem: string) => void; + activeProperty: string; + propertiesSchema: PropertiesSchema; + sideNavItemClickCount: number; + setActiveProperty: (activeProperty: string) => void; +} + +const BuildPageTab = ({ + activeProperty, + onSideNavItemClick, + propertiesSchema, + sideNavItemClickCount, + setActiveProperty, +}: Props) => { + const [activeTab, setActiveTab] = useState(0); + + const handleTabClick = (index: number) => { + onSideNavItemClick(navLinkItems[index].componentName); + }; + + useEffect(() => { + const index = navLinkItems.findIndex((item) => item.componentName === activeProperty); + setActiveTab(index); + }, [activeProperty]); + return ( + + + + {navLinkItems.map((tab, index) => ( + handleTabClick(index)} + bg={activeTab === index ? '#0A58D6' : 'rgba(255, 255, 255, 0.2)'} + color={activeTab === index ? '#FFF' : 'rgba(255, 255, 255, 1)'} + _hover={{ + bg: '#0A58D6', + opacity: 0.8, + }} + transition='all 0.3s' + borderTopRadius='xl' + mr={3} + px={4} + py={2} + fontWeight='bold' + fontSize='sm' + > + {tab.label} + + ))} + + + + {navLinkItems.map((tab, index) => ( + + + + ))} + + + + FA Logo + + + ); +}; + +export default BuildPageTab; diff --git a/app/src/client/components/buildPage/Tabs.tsx b/app/src/client/components/buildPage/Tabs.tsx deleted file mode 100644 index 6062491c..00000000 --- a/app/src/client/components/buildPage/Tabs.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { useEffect, useState } from 'react'; - -import { Tabs, TabList, TabPanels, Tab, TabPanel } from '@chakra-ui/react'; - -import { navLinkItems } from '../../components/CustomSidebar'; -import { UserProperty } from './UserProperty'; -import { PropertiesSchema } from '../../interfaces/BuildPageInterfaces'; - -interface Props { - onSideNavItemClick: (selectedItem: string) => void; - activeProperty: string; - propertiesSchema: PropertiesSchema; - sideNavItemClickCount: number; - setActiveProperty: (activeProperty: string) => void; -} - -const BuildPageTabs = ({ - activeProperty, - onSideNavItemClick, - propertiesSchema, - sideNavItemClickCount, - setActiveProperty, -}: Props) => { - const [activeTab, setActiveTab] = useState(0); - - const handleTabClick = (index: number) => { - onSideNavItemClick(navLinkItems[index].componentName); - }; - - useEffect(() => { - const index = navLinkItems.findIndex((item) => item.componentName === activeProperty); - setActiveTab(index); - }, [activeProperty]); - return ( - - - {navLinkItems.map((tab, index) => ( - handleTabClick(index)} - bg={activeTab === index ? '#0A58D6' : 'rgba(255, 255, 255, 0.2)'} - color={activeTab === index ? '#FFF' : 'rgba(255, 255, 255, 1)'} - _hover={{ - bg: '#0A58D6', - opacity: 0.8, - }} - transition='all 0.3s' - borderTopRadius='xl' - mr={3} - px={4} - py={2} - fontWeight='bold' - fontSize='sm' - > - {tab.label} - - ))} - - - - {navLinkItems.map((tab, index) => ( - - - - ))} - - - ); -}; - -export default BuildPageTabs; diff --git a/app/src/client/static/fa-logo-without-text.svg b/app/src/client/static/fa-logo-without-text.svg new file mode 100644 index 00000000..edb7198f --- /dev/null +++ b/app/src/client/static/fa-logo-without-text.svg @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +