feat: Fork a Repo (#312)

Author: li-xin-yi

api/src/resolver_repo.ts

@@ -216,7 +216,7 @@ async function deleteEdge(_, { source, target }, { userId }) {
   return true;
 }
 
-async function createRepo(_, { id, name, isPublic }, { userId }) {
+async function createRepo(_, {}, { userId }) {
   if (!userId) throw Error("Unauthenticated");
   const repo = await prisma.repo.create({
     data: {
@@ -497,6 +497,68 @@ async function deletePods(_, { ids }: { ids: string[] }, { userId }) {
   return true;
 }
 
+async function copyRepo(_, { repoId }, { userId }) {
+  // Find the repo
+  const repo = await prisma.repo.findFirst({
+    where: {
+      id: repoId,
+    },
+    include: {
+      pods: {
+        include: {
+          parent: true,
+        },
+      },
+    },
+  });
+  if (!repo) throw new Error("Repo not found");
+
+  // Create a new repo
+  const { id } = await createRepo(_, {}, { userId });
+  // update the repo name
+  await prisma.repo.update({
+    where: {
+      id,
+    },
+    data: {
+      name: repo.name ? `Copy of ${repo.name}` : `Copy of ${repo.id}`,
+    },
+  });
+
+  // Create new id for each pod
+  const sourcePods = repo.pods;
+  const idMap = await sourcePods.reduce(async (acc, pod) => {
+    const map = await acc;
+    const newId = await nanoid();
+    map.set(pod.id, newId);
+    return map;
+  }, Promise.resolve(new Map()));
+
+  // Update the parent/child relationship with their new ids
+  const targetPods = sourcePods.map((pod) => {
+    return {
+      ...pod,
+      id: idMap.get(pod.id),
+      parent: pod.parent ? { id: idMap.get(pod.parent.id) } : undefined,
+      repoId: id,
+      parentId: pod.parentId ? idMap.get(pod.parentId) : undefined,
+    };
+  });
+
+  // Add all nodes without parent/child relationship to the new repo.
+  // TODO: it updates the parent/child relationship automatically somehow,maybe because the parentId? Try to figure out why, then refactor addPods method.
+  await prisma.pod.createMany({
+    data: targetPods.map((pod) => ({
+      ...pod,
+      id: pod.id,
+      index: 0,
+      parent: undefined,
+    })),
+  });
+
+  return id;
+}
+
 export default {
   Query: {
     myRepos,
@@ -509,6 +571,7 @@ export default {
     createRepo,
     updateRepo,
     deleteRepo,
+    copyRepo,
     updatePod,
     deletePods,
     addEdge,

api/src/typedefs.ts

@@ -126,6 +126,7 @@ export const typeDefs = gql`
     createRepo: Repo
     updateRepo(id: ID!, name: String!): Boolean
     deleteRepo(id: ID!): Boolean
+    copyRepo(repoId: String!): ID!
     deletePods(ids: [String]): Boolean
     addPods(repoId: String!, pods: [PodInput]): Boolean
     updatePod(id: String!, repoId: String!, input: PodInput): Boolean

ui/src/components/Header.tsx

@@ -31,6 +31,7 @@ type HeaderProps = {
   currentPage?: string | null;
   breadcrumbItem?: React.ReactNode;
   shareButton?: React.ReactNode;
+  forkButton?: React.ReactNode;
 };
 
 export const Header: React.FC<HeaderProps> = ({
@@ -39,6 +40,7 @@ export const Header: React.FC<HeaderProps> = ({
   currentPage = null,
   breadcrumbItem = null,
   shareButton = null,
+  forkButton = null,
 }) => {
   const [anchorElNav, setAnchorElNav] = useState(null);
   const [anchorElUser, setAnchorElUser] = useState(null);
@@ -96,6 +98,16 @@ export const Header: React.FC<HeaderProps> = ({
             {breadcrumbItem}
           </Breadcrumbs>
 
+          <Box
+            sx={{
+              display: { xs: "none", md: "flex" },
+              alignItems: "center",
+              paddingRight: "10px",
+            }}
+          >
+            {forkButton}
+          </Box>
+
           <Box
             sx={{
               display: { xs: "none", md: "flex" },

ui/src/pages/repo.tsx

@@ -5,6 +5,7 @@ import Link from "@mui/material/Link";
 import Alert from "@mui/material/Alert";
 import AlertTitle from "@mui/material/AlertTitle";
 import ShareIcon from "@mui/icons-material/Share";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 import Button from "@mui/material/Button";
 import { gql, useApolloClient, useMutation } from "@apollo/client";
 
@@ -139,6 +140,18 @@ function RepoWrapper({ children, id }) {
   if (!store) throw new Error("Missing BearContext.Provider in the tree");
 
   const setShareOpen = useStore(store, (state) => state.setShareOpen);
+  const navigate = useNavigate();
+  const [copyRepo] = useMutation(
+    gql`
+      mutation CopyRepo($id: String!) {
+        copyRepo(repoId: $id)
+      }
+    `,
+    { variables: { id } }
+  );
+  // if(result.data.copyRepo){
+  //   navigate(`/repo/${result.data.copyRepo}`);
+  // }
 
   const DrawerWidth = 240;
 
@@ -180,6 +193,19 @@ function RepoWrapper({ children, id }) {
               Share
             </Button>
           }
+          forkButton={
+            <Button
+              endIcon={<ContentCopyIcon />}
+              onClick={async () => {
+                const result = await copyRepo();
+                const newRepoId = result.data.copyRepo;
+                window.open(`/repo/${newRepoId}`);
+              }}
+              variant="contained"
+            >
+              Make a copy
+            </Button>
+          }
         />
         <Box
           sx={{