fix: fetch categories from remote (#25)

components/Auth/UserAvatar.tsx

@@ -4,7 +4,7 @@ import { useSession, signOut } from "next-auth/react";
 import { Avatar, Box, Divider, Menu, MenuItem } from "@mui/material";
 import { bindMenu, usePopupState } from "material-ui-popup-state/hooks";
 import { useRouter } from "next/router";
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { UIConfig } from "../../src/UIConfig";
 import Link from "next/link";
 
@@ -13,7 +13,7 @@ type Props = {};
 export function UserAvatar(props: Props) {
   const session = useSession();
   const popupState = usePopupState({
-    variant: "popover",
+    variant: "popper",
     popupId: "userAvatar",
   });
   const router = useRouter();
@@ -22,29 +22,31 @@ export function UserAvatar(props: Props) {
     return session.data?.user as any;
   }, [session]);
 
+  const handleOnClick = useCallback(
+    async (e: any) => {
+      if (session.status === "unauthenticated") {
+        await router.push("/user/signin");
+      } else {
+        popupState.open(e.currentTarget);
+      }
+    },
+    [popupState, session]
+  );
+
   return (
     <>
-      <Box
-        sx={{ cursor: "pointer" }}
-        onClick={async (e) => {
-          if (session.status === "unauthenticated") {
-            await router.push("/user/signin");
-          } else {
-            popupState.open(e);
-          }
-        }}
-      >
-        <Avatar src={user?.avatar}>
-          {user?.name?.charAt(0).toUpperCase()}
-        </Avatar>
+      <Box sx={{ cursor: "pointer" }} onClick={handleOnClick}>
+        <Avatar>{user?.name?.charAt(0).toUpperCase()}</Avatar>
       </Box>
-      <Menu {...bindMenu(popupState)}>
+      <Menu {...bindMenu(popupState)} onClose={() => popupState.close()}>
         <MenuItem sx={{ color: "gray", width: UIConfig.userAvatarMenuWidth }}>
           {session.data?.user?.name}
         </MenuItem>
         <Divider />
         <MenuItem>
-          <Link href={"/user/profile"}>Profile</Link>
+          <Link href={"/user/profile"} onClick={() => popupState.close()}>
+            Profile
+          </Link>
         </MenuItem>
         <MenuItem onClick={() => signOut()}>Sign out</MenuItem>
       </Menu>

components/Layout.tsx

@@ -22,7 +22,7 @@ interface Props {
 }
 export default function Layout({ children, menus, actions }: Props) {
   return (
-    <>
+    <div>
       <AppBar position="sticky" elevation={0}>
         <Toolbar>
           <Stack direction={"row"} alignItems={"center"} mr={5} spacing={2}>
@@ -56,6 +56,6 @@ export default function Layout({ children, menus, actions }: Props) {
       </AppBar>
 
       <main>{children}</main>
-    </>
+    </div>
   );
 }

pages/create.tsx

@@ -9,6 +9,7 @@ import {
   UploadContextProvider,
 } from "../src/models/UploadModel";
 import {
+  Alert,
   Box,
   Breadcrumbs,
   Button,
@@ -133,6 +134,7 @@ export function UploadStep(props: UploadStepProps) {
           <Stack direction={"row"} spacing={2}>
             {["video", "audio"].map((uploadType) => (
               <Button
+                key={uploadType}
                 size={"small"}
                 onClick={() => router.push(`/create?uploadType=${uploadType}`)}
                 variant={
@@ -191,6 +193,11 @@ function CreateVideoStep(props: CreateVideoStep) {
       description: props.video.description,
       SalesInfo: props.video.SalesInfo,
     },
+    validate: (values) => {
+      if (!values.title) {
+        return { title: "Title is Required" };
+      }
+    },
     onSubmit: async (values) => {
       try {
         await VideoService.publishVideo(
@@ -220,6 +227,9 @@ function CreateVideoStep(props: CreateVideoStep) {
               currentUploadBytes={currentUploadBytes}
               totalUploadBytes={totalUploadBytes}
             />
+            {formik.errors.title && (
+              <Alert severity={"error"}>{formik.errors.title}</Alert>
+            )}
 
             <form onSubmit={(e) => e.preventDefault()}>
               <Stack spacing={2}>
@@ -228,6 +238,7 @@ function CreateVideoStep(props: CreateVideoStep) {
                   id="title"
                   name="title"
                   label="Title"
+                  required
                   value={formik.values.title}
                   onChange={formik.handleChange}
                 />

pages/index.tsx

@@ -5,16 +5,23 @@ import {
   Box,
   Chip,
   CircularProgress,
-  Container,
   Grid,
   Paper,
   Stack,
   useTheme,
 } from "@mui/material";
-import { debug } from "util";
 import { VideoCard } from "../components/Video/VideoCard";
+import { GetServerSideProps } from "next";
+import {
+  CategoryService,
+  GetCategoryResponse,
+} from "../src/services/CategoryService";
+
+interface Props {
+  categories: GetCategoryResponse[];
+}
 
-export default function Home() {
+export default function Home({ categories }: Props) {
   const {
     status,
     data,
@@ -75,16 +82,30 @@ export default function Home() {
             justifyContent={"center"}
             alignItems={"center"}
             p={1}
+            spacing={2}
+            overflow={"scroll"}
           >
-            <Chip label={"All"} />
+            {categories.map((category) => (
+              <Chip
+                clickable
+                key={category.id}
+                label={category.name}
+                sx={{ fontSize: "1rem" }}
+              />
+            ))}
           </Stack>
         </Paper>
       </Box>
-      <Grid container spacing={2} columns={{ lg: 15 }} px={10}>
+      <Grid
+        container
+        spacing={2}
+        columns={{ xl: 18, lg: 15, md: 9, sm: 6 }}
+        px={10}
+      >
         {rowVirtualizer.getVirtualItems().map((virtualRow) => {
           const row = rows[virtualRow.index];
           return (
-            <Grid item lg={3} key={virtualRow.index}>
+            <Grid item sm={3} key={virtualRow.index}>
               {row ? <VideoCard video={row} /> : <CircularProgress />}
             </Grid>
           );
@@ -93,3 +114,14 @@ export default function Home() {
     </Stack>
   );
 }
+
+export const getServerSideProps: GetServerSideProps<Props> = async (
+  context
+) => {
+  const categories = await CategoryService.getCategories();
+  return {
+    props: {
+      categories,
+    },
+  };
+};

src/hooks/useGetVideos.ts

@@ -8,9 +8,7 @@ export function useGetVideos() {
   const result = useInfiniteQuery(
     "videos",
     async ({ pageParam }) => {
-      console.log("fetching videos", pageParam);
       const videos = await VideoService.getVideos(pageParam);
-      console.log(videos);
       return videos;
     },
     {

src/services/CategoryService.ts

@@ -0,0 +1,19 @@
+import axios from "axios";
+import { SignedUrl } from "./StorageService";
+
+export interface GetCategoryResponse {
+  id: string;
+  name: string;
+  SubCategory: {
+    id: string;
+    name: string;
+  }[];
+}
+
+export class CategoryService {
+  static async getCategories(): Promise<GetCategoryResponse[]> {
+    const url = process.env.NEXT_PUBLIC_API_ENDPOINT + `/category`;
+    const category = await axios.get(url, {});
+    return category.data;
+  }
+}