fix: add firebase support (#13)

apps/video-trading/components/CategoryCard.tsx

@@ -7,13 +7,15 @@ interface Props {
    * use card component to wrap the category card
    */
   useCard: boolean;
+  keywords: string[];
 }
 
-export default function CategoryCard({ useCard }: Props) {
+export default function CategoryCard({ useCard, keywords }: Props) {
   const chips = (
     <Stack direction={"row"} spacing={2} p={2}>
-      <Chip label="Chip Outlined" variant="outlined" />
-      <Chip label="Chip Outlined" variant="outlined" />
+      {keywords.map((keyword, index) => (
+        <Chip key={keyword} label={keyword} variant="outlined" />
+      ))}
     </Stack>
   );
 

apps/video-trading/components/VideoCardSmall.tsx

@@ -14,10 +14,10 @@ export default function VideoCardSmall({ video }: Props) {
       <Stack>
         <Typography fontWeight={600}>{video.title}</Typography>
         <Typography color={"gray"} fontSize={"0.8rem"} fontWeight={400}>
-          {video.uid}
+          {video.title}
         </Typography>
         <Typography color={"gray"} fontSize={"0.8rem"} fontWeight={400}>
-          {video.views.toLocaleString("en-US")} views •{" "}
+          {"0"} views •{" "}
           {dayjs(video.created_at).format("MMM DD, YYYY")}
         </Typography>
       </Stack>

apps/video-trading/components/upload/VideoUploadDialog.tsx

@@ -73,7 +73,7 @@ export default function VideoUploadDialog(props: Props) {
     }
 
     if (video) {
-      return video.size;
+      return 0;
     }
     return 0;
   }, [props.video, props.file]);

apps/video-trading/components/video/VideoHistoryPage.tsx

@@ -0,0 +1,56 @@
+import {
+  Collapse,
+  LinearProgress,
+  List,
+  ListItem,
+  ListItemSecondaryAction,
+  ListItemText,
+  Stack,
+  Typography,
+} from "@mui/material";
+import dayjs from "dayjs";
+import useUser from "../../hooks/useUser";
+import useVideoHistory from "../../hooks/useVideoHistory";
+
+interface Props {
+  video: any;
+}
+
+export default function VideoHistoryPage({ video }: Props) {
+  const histories = useVideoHistory(video);
+
+  console.log("histories", histories);
+
+  return (
+    <List>
+      <Collapse in={histories.isLoading} mountOnEnter unmountOnExit>
+        <LinearProgress />
+      </Collapse>
+      {histories.data?.map((history, index) => (
+        <ListItem key={`${index}`}>
+          <ListItemText
+            primary={
+              <Stack direction={"row"} spacing={1}>
+                <TransactionText userRef={history.from} />
+                <Typography>Purchased from</Typography>
+                <TransactionText userRef={history.to} />
+              </Stack>
+            }
+            secondary={`HKD  $${history.amount}`}
+          />
+          <ListItemSecondaryAction>
+            <Typography>
+              {dayjs(history.created_at.seconds * 1000).format("YYYY-MM-DD")}
+            </Typography>
+          </ListItemSecondaryAction>
+        </ListItem>
+      ))}
+    </List>
+  );
+}
+
+function TransactionText({ userRef }: { userRef: any }) {
+  const user = useUser(userRef);
+
+  return <Typography>{user.data?.display_name}</Typography>;
+}

apps/video-trading/hooks/useComents.tsx

@@ -0,0 +1,30 @@
+import { useQuery } from "@tanstack/react-query";
+import { Comment } from "client";
+import {
+  collection,
+  getFirestore,
+  query,
+  where,
+  getDocs,
+} from "firebase/firestore";
+import React from "react";
+
+const firestore = getFirestore();
+
+export default function useComents(video: any) {
+  const comments = useQuery(["comments", video], async () => {
+    const commentRef = query(
+      collection(firestore, "Comment"),
+      where("video", "==", video)
+    );
+
+    const querySnapshot = await getDocs(commentRef);
+    const comments = querySnapshot.docs.map((doc) => ({
+      id: doc.id,
+      ...doc.data(),
+    }));
+    return comments as Comment[];
+  });
+
+  return comments;
+}

apps/video-trading/hooks/useUser.tsx

@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
+import React from "react";
+import { getDoc, doc, getFirestore } from "firebase/firestore";
+
+const firestore = getFirestore();
+
+export default function useUser(userId: any) {
+  const user = useQuery(["user", userId], async () => {
+    const document = await getDoc(userId);
+    if (document.exists()) {
+      return document.data() as any;
+    } else {
+      return undefined;
+    }
+  });
+
+  return user;
+}

apps/video-trading/hooks/useVideo.tsx

@@ -0,0 +1,29 @@
+import { useQuery } from "@tanstack/react-query";
+import { Video } from "client";
+import {
+  collection,
+  doc,
+  getDoc,
+  getFirestore,
+  limit,
+  query,
+} from "firebase/firestore";
+
+const firestore = getFirestore();
+
+export default function useVideo(id: string) {
+  /**
+   * Get video by id
+   */
+  const video = useQuery([id], async () => {
+    const docRef = doc(firestore, "Video", id);
+    const document = await getDoc(docRef);
+    if (document.exists()) {
+      return { id: id, ...document.data() } as Video;
+    } else {
+      return undefined;
+    }
+  });
+
+  return video;
+}

apps/video-trading/hooks/useVideoHistory.tsx

@@ -0,0 +1,26 @@
+import { useQuery } from "@tanstack/react-query";
+import { collection, getDocs, query, where } from "firebase/firestore";
+import React from "react";
+
+import { getFirestore } from "firebase/firestore";
+import { Transaction } from "client";
+
+const firestore = getFirestore();
+
+export default function useVideoHistory(video: any) {
+  const histories = useQuery(["histories", video], async () => {
+    const historyRef = query(
+      collection(firestore, "Transaction"),
+      where("video", "==", video)
+    );
+
+    const querySnapshot = await getDocs(historyRef);
+    const histories = querySnapshot.docs.map((doc) => ({
+      id: doc.id,
+      ...doc.data(),
+    }));
+    return histories as Transaction[];
+  });
+
+  return histories;
+}

apps/video-trading/hooks/useVideos.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+import { Video } from "client";
+import {
+  collection,
+  getDocs,
+  getFirestore,
+  limit,
+  query,
+} from "firebase/firestore";
+
+const firestore = getFirestore();
+
+export default function useVideos() {
+  const [videos, setVideos] = React.useState<Video[]>([]);
+
+  React.useEffect(() => {
+    const getVideos = async () => {
+      const q = query(collection(firestore, "Video"), limit(10));
+      const querySnapshot = await getDocs(q);
+      const videos = querySnapshot.docs.map((doc) => ({
+        id: doc.id,
+        ...doc.data(),
+      }));
+      setVideos(videos as Video[]);
+    };
+    getVideos();
+  }, []);
+
+  return videos;
+}

apps/video-trading/package.json

@@ -15,18 +15,20 @@
     "@monaco-editor/react": "^4.4.5",
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.10.1",
-    "@supabase/supabase-js": "^1.35.6",
     "@tanstack/react-query": "^4.2.1",
     "@tanstack/react-query-devtools": "^4.2.1",
     "@tanstack/react-virtual": "3.0.0-beta.18",
+    "@types/video-react": "^0.15.1",
     "client": "workspace:client",
+    "codevis": "workspace:codevis",
     "dayjs": "^1.11.5",
+    "firebase": "9.12.1",
     "monaco-editor": "^0.34.0",
     "next": "12.2.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "utils": "workspace:utils",
-    "codevis": "workspace:codevis"
+    "video-react": "^0.15.0"
   },
   "devDependencies": {
     "@types/node": "18.7.9",

apps/video-trading/pages/_app.tsx

@@ -5,8 +5,19 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import Head from "next/head";
 import { CodeVisulizationProvider } from "codevis";
+import { initializeApp } from "firebase/app";
+import { getAnalytics } from "firebase/analytics";
 
 const queryClient = new QueryClient();
+const app = initializeApp({
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
+});
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (

apps/video-trading/pages/index.tsx

@@ -1,43 +1,25 @@
 import {
   CardActionArea,
   CardMedia,
-  Chip,
   Grid,
-  Paper,
   Stack,
   Typography,
 } from "@mui/material";
-import type { NextPage } from "next";
 import { Video } from "client";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import React from "react";
-import CategoryCard from "../components/CategoryCard";
+import type { NextPage } from "next";
 import { useRouter } from "next/router";
-
-const videos: Video[] = Array(100)
-  .fill(1)
-  .map(() => ({
-    id: "1",
-    title: "Video 1",
-    description: "This is a video",
-    cover:
-      "https://assets.xboxservices.com/assets/8c/bf/8cbfa53c-96c4-42e1-9aa0-290cc166033c.jpg?n=XGP-2022_Small-tout-0_12-17-21_1067x600.jpg",
-    source: "https://www.youtube.com/watch?v=QH2-TGUlwu4",
-    created_at: new Date(),
-    updated_at: new Date(),
-    uid: "1",
-    cid: "1",
-    views: 3000,
-    likes: 3000,
-    size: 200 * 1024 * 1024,
-  }));
+import { useState } from "react";
+import CategoryCard from "../components/CategoryCard";
+import useVideos from "../hooks/useVideos";
+import dayjs from "dayjs";
 
 const Home: NextPage = () => {
   const router = useRouter();
+  const videos = useVideos();
 
   return (
     <div>
-      <CategoryCard useCard={true} />
+      <CategoryCard useCard={true} keywords={[]} />
       <Grid container spacing={5} p={3}>
         {videos.map((video, index) => (
           <Grid item xs={3} key={`video-${index}`}>
@@ -53,7 +35,7 @@ const Home: NextPage = () => {
                 />
                 <Typography>{video.title}</Typography>
                 <Typography variant="subtitle2" color={"gray"}>
-                  {video.uid}
+                  {dayjs(video.created_at.seconds * 1000).format("YYYY-MM-DD")}
                 </Typography>
               </CardActionArea>
             </Stack>