Merge pull request #115 from IhsenBouallegue/develop

Develop
IhsenBouallegue · Apr 26, 2023 · 525010e · 525010e · vercel · Apr 26, 2023
2 parents 83f33e4 + a70e8a4
commit 525010e
Show file tree

Hide file tree

Showing 24 changed files with 242 additions and 114 deletions.
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
@@ -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>
   );

diff --git a/ui/components/DefaultHubLogo.tsx → ui/components/HubLogo/DefaultHubLogo.tsx b/ui/components/DefaultHubLogo.tsx → ui/components/HubLogo/DefaultHubLogo.tsx
@@ -1,16 +1,19 @@
 import { Box, Title } from "@mantine/core";
-import type { Hub } from "@prisma/client";
 
 export default function DefaultHubLogo({
-  hubName,
-  primaryColor,
-  secondaryColor,
-}: Hub) {
+  hubName = "X",
+  primaryColor = "#ff008c",
+  secondaryColor = "#0cd4f7",
+}: {
+  hubName: string;
+  primaryColor: string;
+  secondaryColor: string;
+}) {
   return (
     <Box
       sx={(theme) => ({
-        height: "32px",
         minWidth: "32px",
+        width: "100%",
         padding: "6px",
         borderRadius: theme.radius.md,
         backgroundImage: theme.fn.gradient({
@@ -26,6 +29,7 @@ export default function DefaultHubLogo({
         mozUserSelect: "none",
         msUserSelect: "none",
         userSelect: "none",
+        aspectRatio: "1/1",
       })}
     >
       <Title size={16}>{shorten(hubName)}</Title>

diff --git a/ui/components/HubLogo/HubLogo.tsx b/ui/components/HubLogo/HubLogo.tsx
@@ -0,0 +1,12 @@
+import { Image } from "@mantine/core";
+import type { Hub } from "@prisma/client";
+
+import DefaultHubLogo from "./DefaultHubLogo";
+
+export default function HubLogo({ hub }: { hub: Hub }) {
+  return hub.hubLogo ? (
+    <Image src={hub.hubLogo} />
+  ) : (
+    <DefaultHubLogo {...hub} />
+  );
+}
diff --git a/ui/components/HubLogo/index.ts b/ui/components/HubLogo/index.ts
@@ -0,0 +1,3 @@
+import HubLogo from "./HubLogo";
+
+export default HubLogo;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import HubLogo from "./HubLogo";

		export default HubLogo;