codepod-io · lihebi · Aug 2, 2023 · Aug 2, 2023
diff --git a/api/prisma/migrations/20230802033453_add_star/migration.sql b/api/prisma/migrations/20230802033453_add_star/migration.sql
@@ -0,0 +1,17 @@
+-- CreateTable
+CREATE TABLE "_STAR" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "_STAR_AB_unique" ON "_STAR"("A", "B");
+
+-- CreateIndex
+CREATE INDEX "_STAR_B_index" ON "_STAR"("B");
+
+-- AddForeignKey
+ALTER TABLE "_STAR" ADD CONSTRAINT "_STAR_A_fkey" FOREIGN KEY ("A") REFERENCES "Repo"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_STAR" ADD CONSTRAINT "_STAR_B_fkey" FOREIGN KEY ("B") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/api/prisma/schema.prisma b/api/prisma/schema.prisma
@@ -50,6 +50,7 @@ model User {
     profile      Profile?
     Repo         Repo[]         @relation("OWNER")
     sharedRepos  Repo[]         @relation("COLLABORATOR")
+    stars        Repo[]         @relation("STAR")
     UserRepoData UserRepoData[]
 
     codeiumAPIKey String? @default("")
@@ -81,6 +82,7 @@ model Repo {
     // Edit pod content likely won't update this updatedAt field.
     updatedAt     DateTime       @default(now()) @updatedAt
     UserRepoData  UserRepoData[]
+    stargazers    User[]         @relation("STAR")
 }
 
 enum PodType {

diff --git a/api/src/resolver_repo.ts b/api/src/resolver_repo.ts
@@ -1,7 +1,7 @@
 // nanoid v4 does not work with nodejs. https://github.com/ai/nanoid/issues/365
 import { customAlphabet } from "nanoid/async";
 import { lowercase, numbers } from "nanoid-dictionary";
-import prisma from './client'
+import prisma from "./client";
 
 const nanoid = customAlphabet(lowercase + numbers, 20);
 
@@ -55,6 +55,7 @@ async function myRepos(_, __, { userId }) {
           userId: userId,
         },
       },
+      stargazers: true,
     },
   });
   // Sort by last access time.
@@ -90,6 +91,9 @@ async function myCollabRepos(_, __, { userId }) {
         some: { id: userId },
       },
     },
+    include: {
+      stargazers: true,
+    },
   });
   return repos;
 }
@@ -383,6 +387,53 @@ async function deleteCollaborator(_, { repoId, collaboratorId }, { userId }) {
   return true;
 }
 
+async function star(_, { repoId }, { userId }) {
+  // make sure the repo is visible by this user
+  if (!userId) throw new Error("Not authenticated.");
+  let repo = await prisma.repo.findFirst({
+    where: {
+      id: repoId,
+      OR: [
+        { owner: { id: userId || "undefined" } },
+        { collaborators: { some: { id: userId || "undefined" } } },
+        { public: true },
+      ],
+    },
+  });
+  if (!repo) throw new Error("Repo not found.");
+  // 3. add the user to the repo
+  await prisma.repo.update({
+    where: {
+      id: repoId,
+    },
+    data: {
+      stargazers: { connect: { id: userId } },
+    },
+  });
+  return true;
+}
+
+async function unstar(_, { repoId }, { userId }) {
+  if (!userId) throw new Error("Not authenticated.");
+  // 1. find the repo
+  const repo = await prisma.repo.findFirst({
+    where: {
+      id: repoId,
+    },
+  });
+  // 2. delete the user from the repo
+  if (!repo) throw new Error("Repo not found.");
+  await prisma.repo.update({
+    where: {
+      id: repoId,
+    },
+    data: {
+      stargazers: { disconnect: { id: userId } },
+    },
+  });
+  return true;
+}
+
 async function updatePod(_, { id, repoId, input }, { userId }) {
   if (!userId) throw new Error("Not authenticated.");
   await ensureRepoEditAccess({ repoId, userId });
@@ -576,5 +627,7 @@ export default {
     addCollaborator,
     updateVisibility,
     deleteCollaborator,
+    star,
+    unstar,
   },
 };
diff --git a/api/src/typedefs.ts b/api/src/typedefs.ts
@@ -26,6 +26,7 @@ export const typeDefs = gql`
     pods: [Pod]
     edges: [Edge]
     userId: ID!
+    stargazers: [User]
     collaborators: [User]
     public: Boolean
     createdAt: String
@@ -141,6 +142,8 @@ export const typeDefs = gql`
     updateVisibility(repoId: String!, isPublic: Boolean!): Boolean
     addCollaborator(repoId: String!, email: String!): Boolean
     deleteCollaborator(repoId: String!, collaboratorId: String!): Boolean
+    star(repoId: ID!): Boolean
+    unstar(repoId: ID!): Boolean
 
     exportJSON(repoId: String!): String!
     exportFile(repoId: String!): String!

diff --git a/ui/src/pages/repos.tsx b/ui/src/pages/repos.tsx
@@ -19,6 +19,8 @@ import StopCircleIcon from "@mui/icons-material/StopCircle";
 import CircularProgress from "@mui/material/CircularProgress";
 import SourceIcon from "@mui/icons-material/Source";
 import DescriptionOutlinedIcon from "@mui/icons-material/DescriptionOutlined";
+import StarIcon from "@mui/icons-material/Star";
+import StarBorderIcon from "@mui/icons-material/StarBorder";
 import Tooltip from "@mui/material/Tooltip";
 import IconButton from "@mui/material/IconButton";
 import ShareIcon from "@mui/icons-material/Share";
@@ -32,6 +34,7 @@ import {
   DialogActions,
   DialogContent,
   DialogTitle,
+  Stack,
   useTheme,
 } from "@mui/material";
 import { useAuth } from "../lib/auth";
@@ -45,6 +48,9 @@ const GET_REPOS = gql`
       name
       id
       public
+      stargazers {
+        id
+      }
       updatedAt
       createdAt
     }
@@ -74,39 +80,91 @@ function RepoLine({
 
   // haochen: any reason not using Loading state from useMutation?
   const [killing, setKilling] = useState(false);
+
+  const [star, { loading: starLoading }] = useMutation(
+    gql`
+      mutation star($repoId: ID!) {
+        star(repoId: $repoId)
+      }
+    `,
+    {
+      refetchQueries: ["GetRepos"],
+    }
+  );
+  const [unstar, { loading: unstarLoading }] = useMutation(
+    gql`
+      mutation unstar($repoId: ID!) {
+        unstar(repoId: $repoId)
+      }
+    `,
+    {
+      refetchQueries: ["GetRepos"],
+    }
+  );
+
   return (
     <TableRow
       key={repo.id}
       sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
     >
-      <TableCell align="center">
-        <Link
-          component={ReactLink}
-          to={`/repo/${repo.id}`}
-          sx={
-            deleting
-              ? {
-                  color: theme.palette.action.disabled,
-                  textDecorationColor: theme.palette.action.disabled,
-                  pointerEvents: "none",
-                }
-              : {}
-          }
-        >
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-            }}
+      <TableCell align="left">
+        <Stack direction="row">
+          {repo.stargazers?.map((_) => _.id).includes(me.id) ? (
+            <Tooltip title="unstar">
+              <IconButton
+                size="small"
+                onClick={() => {
+                  unstar({ variables: { repoId: repo.id } });
+                }}
+                disabled={unstarLoading}
+              >
+                <StarIcon
+                  fontSize="inherit"
+                  sx={{
+                    color: "orange",
+                  }}
+                />
+                {repo.stargazers.length}
+              </IconButton>
+            </Tooltip>
+          ) : (
+            <Tooltip title="star">
+              <IconButton
+                size="small"
+                onClick={() => {
+                  star({ variables: { repoId: repo.id } });
+                }}
+                disabled={starLoading}
+              >
+                <StarBorderIcon fontSize="inherit" />
+                {repo.stargazers.length}
+              </IconButton>
+            </Tooltip>
+          )}
+
+          <Link
+            component={ReactLink}
+            to={`/repo/${repo.id}`}
+            sx={
+              deleting
+                ? {
+                    color: theme.palette.action.disabled,
+                    textDecorationColor: theme.palette.action.disabled,
+                    pointerEvents: "none",
+                  }
+                : {}
+            }
           >
-            <DescriptionOutlinedIcon
-              sx={{
-                marginRight: "5px",
-              }}
-            />
-            {repo.name || "Untitled"}
-          </Box>
-        </Link>
+            <Stack direction="row">
+              <DescriptionOutlinedIcon
+                sx={{
+                  marginRight: "5px",
+                }}
+              />
+              {repo.name || "Untitled"}
+            </Stack>
+          </Link>
+        </Stack>
       </TableCell>
       <TableCell align="left">
         <Chip
@@ -388,6 +446,9 @@ function SharedWithMe() {
         name
         id
         public
+        stargazers {
+          id
+        }
         updatedAt
         createdAt
       }
@@ -522,7 +583,7 @@ export default function Page() {
     return <Box>Loading user ..</Box>;
   }
   return (
-    <Box sx={{ maxWidth: "sm", alignItems: "center", m: "auto" }}>
+    <Box sx={{ maxWidth: "md", alignItems: "center", m: "auto" }}>
       {/* TODO some meta information about the user */}
       {/* <CurrentUser /> */}
       {/* TODO the repos of this user */}
@@ -538,7 +599,7 @@ export default function Page() {
         started.
       </Box>
       {!isSignedIn() && (
-        <Box sx={{ maxWidth: "sm", alignItems: "center", m: "auto" }}>
+        <Box sx={{ alignItems: "center", m: "auto" }}>
           <Alert severity="warning">
             Please note that you are a{" "}
             <Box component="span" color="red">