feat: add Hub Menu

Add Hub Menu
IhsenBouallegue · Apr 26, 2023 · a70e8a4 · a70e8a4
2 parents a5322aa + ecec1fb
commit a70e8a4
Show file tree

Hide file tree

Showing 25 changed files with 277 additions and 115 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,37 @@
+## [2.2.21](https://github.com/IhsenBouallegue/HubOne/compare/v2.2.20...v2.2.21) (2023-04-26)
+
+
+### Bug Fixes
+
+* add format:checkl to precommit check ([6830cff](https://github.com/IhsenBouallegue/HubOne/commit/6830cffdbc7538826040b01922e97e3aa0e2e1cd))
+* add static tests workflow ([f927705](https://github.com/IhsenBouallegue/HubOne/commit/f927705baece543d78cc146d7e58c9269b5167cb))
+* fix dev container ([96eb479](https://github.com/IhsenBouallegue/HubOne/commit/96eb479ad8479e324456b44f225ca5701ab675ea))
+* improve fetch performance ([53f4c1d](https://github.com/IhsenBouallegue/HubOne/commit/53f4c1d1f2852bd1c0d107ec123a65c3eb7d730d))
+* re lint some files and remove workflows ([9f4626c](https://github.com/IhsenBouallegue/HubOne/commit/9f4626c81a3ee132a0af2b10b4bff25e7f38d0c8))
+* use the json protocol in prisma ([a177fc9](https://github.com/IhsenBouallegue/HubOne/commit/a177fc903600b11d10d4aecf7df6e04bda360c10))
+
+
+### Reverts
+
+* Revert "fix: improve eslint rules" ([31a638f](https://github.com/IhsenBouallegue/HubOne/commit/31a638f3a68c2aecbebe91e78661083e941cac2d))
+
+## [2.2.21](https://github.com/IhsenBouallegue/HubOne/compare/v2.2.20...v2.2.21) (2023-04-26)
+
+
+### Bug Fixes
+
+* add format:checkl to precommit check ([6830cff](https://github.com/IhsenBouallegue/HubOne/commit/6830cffdbc7538826040b01922e97e3aa0e2e1cd))
+* add static tests workflow ([f927705](https://github.com/IhsenBouallegue/HubOne/commit/f927705baece543d78cc146d7e58c9269b5167cb))
+* fix dev container ([96eb479](https://github.com/IhsenBouallegue/HubOne/commit/96eb479ad8479e324456b44f225ca5701ab675ea))
+* improve fetch performance ([53f4c1d](https://github.com/IhsenBouallegue/HubOne/commit/53f4c1d1f2852bd1c0d107ec123a65c3eb7d730d))
+* re lint some files and remove workflows ([9f4626c](https://github.com/IhsenBouallegue/HubOne/commit/9f4626c81a3ee132a0af2b10b4bff25e7f38d0c8))
+* use the json protocol in prisma ([a177fc9](https://github.com/IhsenBouallegue/HubOne/commit/a177fc903600b11d10d4aecf7df6e04bda360c10))
+
+
+### Reverts
+
+* Revert "fix: improve eslint rules" ([31a638f](https://github.com/IhsenBouallegue/HubOne/commit/31a638f3a68c2aecbebe91e78661083e941cac2d))
+
 ## [2.2.20](https://github.com/IhsenBouallegue/HubOne/compare/v2.2.19...v2.2.20) (2023-04-16)
 
 

diff --git a/lib/context/HubOneContext.tsx b/lib/context/HubOneContext.tsx
@@ -8,6 +8,7 @@ export type Settings = {
   links: Link[];
   linkGroups: LinkGroup[];
   footerLinks: FooterLink[];
+  createModalOpened: boolean;
 };
 
 const defaultSettings: Settings = {
@@ -16,6 +17,7 @@ const defaultSettings: Settings = {
   links: [],
   linkGroups: [],
   footerLinks: [],
+  createModalOpened: false,
 };
 
 const HubOneContext = React.createContext({
@@ -25,6 +27,7 @@ const HubOneContext = React.createContext({
   setLinks: (link: Link[]) => {},
   setLinkGroups: (linkGroups: LinkGroup[]) => {},
   setFooterLinks: (footerLinks: FooterLink[]) => {},
+  setCreateModalOpened: (createModalOpened: boolean) => {},
 });
 
 export const useHubOneContext = () => useContext(HubOneContext);
@@ -64,6 +67,12 @@ export function HubOneContextProvider({
       footerLinks,
     }));
   };
+  const setCreateModalOpened = (createModalOpened: boolean) => {
+    setState((prevState) => ({
+      ...prevState,
+      createModalOpened,
+    }));
+  };
 
   const initState = {
     ...defaultSettings,
@@ -72,6 +81,7 @@ export function HubOneContextProvider({
     setLinks,
     setLinkGroups,
     setFooterLinks,
+    setCreateModalOpened,
   };
 
   const [state, setState] = useState(initState);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hub-one",
-  "version": "2.2.20",
+  "version": "2.2.21",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -24,6 +24,7 @@
     "@mantine/next": "^6.0.0",
     "@mantine/notifications": "^6.0.0",
     "@prisma/client": "^4.5.0",
+    "@tabler/icons-react": "^2.17.0",
     "@tanstack/react-query": "^4.12.0",
     "@tanstack/react-query-devtools": "^4.12.0",
     "axios": "^1.1.3",
@@ -32,8 +33,7 @@
     "prettier": "^2.6.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-scroll": "^1.8.8",
-    "tabler-icons-react": "^1.55.0"
+    "react-scroll": "^1.8.8"
   },
   "devDependencies": {
     "@babel/core": "^7.19.6",

diff --git a/pages/[[...hubPaths]].tsx b/pages/[[...hubPaths]].tsx
@@ -5,16 +5,25 @@ import { useRouter } from "next/router";
 
 import { useHubOneContext } from "../lib/context/HubOneContext";
 import { getHubWithPath } from "../lib/requests/hub/getHub";
+import { getHubs } from "../lib/requests/hub/getHubs";
 import { useFetchByHubId } from "../lib/useQueries";
 import { Footer } from "../ui/components/Footer";
 import { HeaderBar } from "../ui/components/Header";
+import AddHubModal from "../ui/components/HubModals/CreateHubModal/CreateHubModal";
 import Hero from "../ui/sections/Hero";
+import HubMenu from "../ui/sections/HubMenu";
 import LinkSection from "../ui/sections/LinkSection";
 
 export default function Home() {
   const router = useRouter();
-  const { setHub, setLinks, setLinkGroups, setFooterLinks } =
-    useHubOneContext();
+  const {
+    setHub,
+    setLinks,
+    setLinkGroups,
+    setFooterLinks,
+    createModalOpened,
+    setCreateModalOpened,
+  } = useHubOneContext();
   // use `|| [""]` for root hub that has no set path by the router
   const hubPaths = (router.query.hubPaths as string[]) || [""];
   const {
@@ -24,8 +33,8 @@ export default function Home() {
   } = useQuery<Hub>(["hubs", hubPaths[0]], () => getHubWithPath(hubPaths[0]), {
     onSuccess: setHub,
   });
-  const hubId = Number(hub?.id);
 
+  const hubId = Number(hub?.id);
   const config = <T,>(onSuccess: (data: T) => void) => ({
     enabled: !!hubId,
     onSuccess,
@@ -34,6 +43,8 @@ export default function Home() {
   useFetchByHubId<LinkGroup>("linkgroups", hubId, config(setLinkGroups));
   useFetchByHubId<FooterLink>("footerlinks", hubId, config(setFooterLinks));
 
+  const { data: hubs } = useQuery(["hubs"], () => getHubs());
+
   if (isLoading) {
     return (
       <Center
@@ -81,7 +92,12 @@ export default function Home() {
       <HeaderBar />
       <Hero />
       <LinkSection />
+      {hubs && <HubMenu hubs={hubs} />}
       <Footer />
+      <AddHubModal
+        opened={createModalOpened}
+        setOpened={setCreateModalOpened}
+      />
     </>
   );
 }
diff --git a/pages/api/v1/hubs/index.ts b/pages/api/v1/hubs/index.ts
@@ -5,7 +5,11 @@ import { prisma } from "../../../../lib/prisma";
 // GET
 export async function handleGET(res: NextApiResponse) {
   try {
-    const items = await prisma.hub.findMany();
+    const items = await prisma.hub.findMany({
+      orderBy: {
+        id: "asc",
+      },
+    });
     res.json(items);
   } catch (error) {
     res.status(500).json({ error });

diff --git a/pages/api/v1/linkgroups/index.ts b/pages/api/v1/linkgroups/index.ts
@@ -7,7 +7,12 @@ async function handleGET(res: NextApiResponse, hubId: number) {
   try {
     let items;
     if (hubId && !Number.isNaN(hubId)) {
-      items = await prisma.linkGroup.findMany({ where: { hubId } });
+      items = await prisma.linkGroup.findMany({
+        where: { hubId },
+        orderBy: {
+          id: "asc",
+        },
+      });
     } else {
       items = await prisma.linkGroup.findMany();
     }

diff --git a/pages/api/v1/links/index.ts b/pages/api/v1/links/index.ts
@@ -7,7 +7,12 @@ async function handleGET(res: NextApiResponse, hubId: number) {
   try {
     let items;
     if (hubId && !Number.isNaN(hubId)) {
-      items = await prisma.link.findMany({ where: { hubId } });
+      items = await prisma.link.findMany({
+        where: { hubId },
+        orderBy: {
+          id: "asc",
+        },
+      });
     } else {
       items = await prisma.link.findMany();
     }

diff --git a/ui/components/AddLinkCard.tsx b/ui/components/AddLinkCard.tsx
@@ -1,7 +1,7 @@
 import { Card, createStyles, Stack, Text } from "@mantine/core";
+import { IconPlus } from "@tabler/icons-react";
 import { motion } from "framer-motion";
 import { useState } from "react";
-import { Plus } from "tabler-icons-react";
 
 import AddLinkModal from "./LinkModals";
 
@@ -48,7 +48,7 @@ function AddLinkCard({
           justify="center"
           sx={() => ({ height: "inherit" })}
         >
-          <Plus size={36} strokeWidth={2} color="black" />
+          <IconPlus size={36} strokeWidth={2} color="black" />
           <Text align="center">Add Link</Text>
         </Stack>
       </Card>

diff --git a/ui/components/AddLinkGroupCard.tsx b/ui/components/AddLinkGroupCard.tsx
@@ -1,7 +1,7 @@
 import { Card, createStyles, Group, Text } from "@mantine/core";
+import { IconPlus } from "@tabler/icons-react";
 import { motion } from "framer-motion";
 import { useState } from "react";
-import { Plus } from "tabler-icons-react";
 
 import AddLinkGroupModal from "./LinkGroupModals";
 
@@ -34,7 +34,7 @@ function AddLinkGroupCard({ hubId }: { hubId: number }) {
             height: "100%",
           })}
         >
-          <Plus size={36} strokeWidth={2} color="black" />
+          <IconPlus size={36} strokeWidth={2} color="black" />
           <Text align="center">Add Link Group</Text>
         </Group>
       </Card>

diff --git a/ui/components/Header.tsx b/ui/components/Header.tsx
@@ -2,26 +2,27 @@ import {
   ActionIcon,
   Burger,
   Button,
+  Center,
   Container,
   createStyles,
   Group,
   Header,
   Image,
   MediaQuery,
   Paper,
+  rem,
   Transition,
   useMantineTheme,
 } from "@mantine/core";
 import { useToggle } from "@mantine/hooks";
+import { IconPlus, IconSettings, IconX } from "@tabler/icons-react";
 import { useState } from "react";
 import { Link as ScrollLink } from "react-scroll";
-import { X, Settings, Plus } from "tabler-icons-react";
 
 import { useHubOneContext } from "../../lib/context/HubOneContext";
 
-import DefaultHubLogo from "./DefaultHubLogo";
-import EditHubModal from "./HubModals";
-import AddHubModal from "./HubModals/AddHubModal";
+import HubLogo from "./HubLogo";
+import EditHubModal from "./HubModals/EditHubModal";
 
 const HEADER_HEIGHT = 60;
 
@@ -72,31 +73,28 @@ const useStyles = createStyles((theme) => ({
 
 export function HeaderBar() {
   const { classes } = useStyles();
-  const { hub, linkGroups, footerLinks } = useHubOneContext();
+  const { hub, linkGroups, setCreateModalOpened } = useHubOneContext();
   const theme = useMantineTheme();
   const [opened, toggleOpened] = useToggle();
   const { editMode } = useHubOneContext();
   const [editModalOpened, setEditModalOpened] = useState(false);
-  const [addModalOpened, setAddModalOpened] = useState(false);
-  const items = linkGroups?.map((linkGroup) => {
-    return (
-      <ScrollLink
-        key={linkGroup.title}
-        to={linkGroup.title}
-        smooth="easeInOutQuint"
-        duration={1000}
+  const items = linkGroups?.map((linkGroup) => (
+    <ScrollLink
+      key={linkGroup.title}
+      to={linkGroup.title}
+      smooth="easeInOutQuint"
+      duration={1000}
+    >
+      <Button
+        variant="subtle"
+        onClick={() => {
+          toggleOpened(false);
+        }}
       >
-        <Button
-          variant="subtle"
-          onClick={() => {
-            toggleOpened(false);
-          }}
-        >
-          {linkGroup.title}
-        </Button>
-      </ScrollLink>
-    );
-  });
+        {linkGroup.title}
+      </Button>
+    </ScrollLink>
+  ));
 
   return (
     <Header
@@ -117,12 +115,10 @@ export function HeaderBar() {
           <MediaQuery smallerThan="sm" styles={{ display: "none" }}>
             <Image src="/logo/hubone_logo_full.svg" width={126} />
           </MediaQuery>
-          <X size={20} strokeWidth={1} color="black" />
-          {hub.hubLogo ? (
-            <Image src={hub.hubLogo} height={28} width={28} />
-          ) : (
-            hub.hubName && <DefaultHubLogo {...hub} />
-          )}
+          <IconX size={20} strokeWidth={1} color="black" />
+          <Center h={rem(28)} w={rem(28)}>
+            <HubLogo hub={hub} />
+          </Center>
         </Group>
 
         <Group spacing={5} className={classes.links}>
@@ -139,20 +135,20 @@ export function HeaderBar() {
         {editMode ? (
           <Group ml="auto" mr="12px">
             <Button
-              leftIcon={<Plus />}
+              leftIcon={<IconPlus />}
               variant="outline"
               color="brand"
               sx={{ height: 30 }}
-              onClick={() => setAddModalOpened(true)}
+              onClick={() => setCreateModalOpened(true)}
             >
-              Create Sub Hub
+              Create New Hub
             </Button>
             <ActionIcon
               variant="light"
               color="brand"
               onClick={() => setEditModalOpened(true)}
             >
-              <Settings size={30} />
+              <IconSettings />
             </ActionIcon>
           </Group>
         ) : (
@@ -170,14 +166,8 @@ export function HeaderBar() {
           </ScrollLink>
         )}
       </Container>
-      <AddHubModal opened={addModalOpened} setOpened={setAddModalOpened} />
       {hub.id && (
-        <EditHubModal
-          opened={editModalOpened}
-          setOpened={setEditModalOpened}
-          footerLinks={footerLinks}
-          {...hub}
-        />
+        <EditHubModal opened={editModalOpened} setOpened={setEditModalOpened} />
       )}
     </Header>
   );