codepod-io · lihebi · Sep 9, 2023 · Sep 9, 2023
diff --git a/apps/file-backend/src/server.ts b/apps/file-backend/src/server.ts
@@ -29,23 +29,83 @@ export const typeDefs = gql`
 
   type Query {
     hello: String
+    me: User
+    repo(id: String!): Repo
+    getDashboardRepos: [Repo]
   }
 
   type Mutation {
     world: String
+    createRepo: Repo
+    updateRepo(id: ID!, name: String!): Boolean
+    deleteRepo(id: ID!): Boolean
   }
 `;
 
+// TODO Dummy Data
+const repos = [
+  {
+    id: "repo1",
+    name: "test",
+    userId: "user1",
+    stargazers: [],
+    collaborators: [],
+    public: false,
+    createdAt: "2021-01-01",
+    updatedAt: "2021-01-01",
+    accessedAt: "2021-01-01",
+  },
+  {
+    id: "repo2",
+    name: "test2",
+    userId: "user1",
+    stargazers: [],
+    collaborators: [],
+    public: false,
+    createdAt: "2021-01-01",
+    updatedAt: "2021-01-01",
+    accessedAt: "2021-01-01",
+  },
+];
+
 export const resolvers = {
   Query: {
     hello: () => {
       return "Hello world!";
     },
+    // TODO Dummy Data
+    me: () => {
+      return {
+        id: "user1",
+        username: "test",
+        email: "",
+        firstname: "Local",
+        lastname: "User",
+      };
+    },
+    getDashboardRepos: () => {
+      console.log("returning repos");
+      console.log(repos);
+      return repos;
+    },
+    repo: (_, { id }) => {
+      console.log("finding", id);
+      const res = repos.find((repo) => repo.id === id);
+      repos.forEach((repo) => {
+        console.log(repo.id === id);
+      });
+      console.log("res", res);
+      return repos.find((repo) => repo.id === id);
+    },
   },
   Mutation: {
     world: () => {
       return "World!";
     },
+    // TODO fill APIs
+    createRepo: () => {},
+    updateRepo: () => {},
+    deleteRepo: () => {},
   },
 };
 

diff --git a/apps/ui-desktop/src/App.tsx b/apps/ui-desktop/src/App.tsx
@@ -10,13 +10,17 @@ import {
 
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 
-import { Dashboard, Repo, Test, Profile, Docs } from "@codepod/ui";
+import { Dashboard, Repo, Test } from "@codepod/ui";
 
 import { Header, Footer } from "@codepod/ui";
-import { AuthProvider } from "@codepod/ui";
+import { AuthProvider } from "./lib/auth";
+
+import Link from "@mui/material/Link";
+import { Link as ReactLink } from "react-router-dom";
 
 import Box from "@mui/material/Box";
 import { SnackbarProvider } from "notistack";
+import { Typography } from "@mui/material";
 
 const yjsWsUrl = import.meta.env.VITE_APP_YJS_WS_URL;
 const apiUrl = import.meta.env.VITE_APP_API_URL;
@@ -43,7 +47,19 @@ const theme = createTheme({
 const NormalLayout = ({ children }) => {
   return (
     <Box>
-      <Header />
+      <Header>
+        <Box
+          sx={{
+            alignItems: "baseline",
+            display: "flex",
+            flexGrow: 1,
+          }}
+        >
+          <Link component={ReactLink} underline="hover" to="/">
+            <Typography noWrap>CodePod</Typography>
+          </Link>
+        </Box>
+      </Header>
       <Box pt="50px">{children}</Box>
       {/* <Footer /> */}
     </Box>

diff --git a/apps/ui-desktop/src/lib/auth.tsx b/apps/ui-desktop/src/lib/auth.tsx
@@ -0,0 +1,54 @@
+import React, { useState, useContext, useEffect, createContext } from "react";
+import {
+  ApolloProvider,
+  ApolloClient,
+  InMemoryCache,
+  HttpLink,
+  gql,
+  useQuery,
+  split,
+} from "@apollo/client";
+
+type AuthContextType = ReturnType<typeof useProvideAuth>;
+
+const authContext = createContext<AuthContextType | null>(null);
+
+export function AuthProvider({ children, apiUrl, spawnerApiUrl }) {
+  const auth = useProvideAuth({ apiUrl, spawnerApiUrl });
+
+  return (
+    <authContext.Provider value={auth}>
+      <ApolloProvider client={auth.createApolloClient()}>
+        {children}
+      </ApolloProvider>
+    </authContext.Provider>
+  );
+}
+
+export const useAuth = () => {
+  return useContext(authContext)!;
+};
+
+function useProvideAuth({ apiUrl, spawnerApiUrl }) {
+  function createApolloClient(auth = true) {
+    const link = new HttpLink({
+      uri: apiUrl,
+    });
+    const yjslink = new HttpLink({
+      uri: spawnerApiUrl,
+    });
+
+    return new ApolloClient({
+      link: split(
+        (operation) => operation.getContext().clientName === "spawner",
+        yjslink,
+        link
+      ),
+      cache: new InMemoryCache(),
+    });
+  }
+
+  return {
+    createApolloClient,
+  };
+}
diff --git a/apps/ui-web/package.json b/apps/ui-web/package.json
@@ -16,6 +16,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.10.9",
     "@mui/material": "^5.14.5",
+    "formik": "^2.2.9",
     "notistack": "^2.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/apps/ui-web/src/App.tsx b/apps/ui-web/src/App.tsx
@@ -6,25 +6,27 @@ import {
   createRoutesFromElements,
   Route,
   RouterProvider,
+  useNavigate,
 } from "react-router-dom";
 
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 
-import {
-  Dashboard,
-  Repo,
-  Test,
-  Profile,
-  Docs,
-  SignIn,
-  SignUp,
-} from "@codepod/ui";
+import { Dashboard, Repo, Test, Docs } from "@codepod/ui";
+
+import { Profile } from "./pages/profile";
+import { SignIn } from "./pages/login";
+import { SignUp } from "./pages/signup";
 
 import { Header, Footer } from "@codepod/ui";
-import { AuthProvider } from "@codepod/ui";
+import { AuthProvider, useAuth } from "./lib/auth";
+import { useMe } from "@codepod/ui";
+
+import Link from "@mui/material/Link";
+import { Link as ReactLink } from "react-router-dom";
 
 import Box from "@mui/material/Box";
 import { SnackbarProvider } from "notistack";
+import { Button, Typography } from "@mui/material";
 
 const yjsWsUrl = import.meta.env.VITE_APP_YJS_WS_URL;
 const apiUrl = import.meta.env.VITE_APP_API_URL;
@@ -49,9 +51,54 @@ const theme = createTheme({
 });
 
 const NormalLayout = ({ children }) => {
+  const { isSignedIn, signOut } = useAuth();
+  let navigate = useNavigate();
+  const { me } = useMe();
   return (
     <Box>
-      <Header />
+      <Header>
+        <Box
+          sx={{
+            alignItems: "baseline",
+            display: "flex",
+            flexGrow: 1,
+          }}
+        >
+          <Link component={ReactLink} underline="hover" to="/">
+            <Typography noWrap>CodePod</Typography>
+          </Link>
+        </Box>
+
+        {isSignedIn() ? (
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+            }}
+          >
+            <Box sx={{ mr: 2 }}>
+              <Link component={ReactLink} to="/profile" underline="none">
+                {me?.firstname}
+              </Link>
+            </Box>
+            <Button
+              onClick={() => {
+                signOut();
+                navigate("/login");
+              }}
+            >
+              Logout
+            </Button>
+          </Box>
+        ) : (
+          <Box display="block">
+            <Link to="/login" component={ReactLink} underline="none">
+              Login
+            </Link>
+          </Box>
+        )}
+      </Header>
       <Box pt="50px">{children}</Box>
       {/* <Footer /> */}
     </Box>

diff --git a/apps/ui/src/lib/auth.tsx → apps/ui-web/src/lib/auth.tsx b/apps/ui/src/lib/auth.tsx → apps/ui-web/src/lib/auth.tsx
@@ -187,24 +187,3 @@ function useProvideAuth({ apiUrl, spawnerApiUrl }) {
     hasToken,
   };
 }
-
-const PROFILE_QUERY = gql`
-  query Me {
-    me {
-      firstname
-      lastname
-      email
-      id
-    }
-  }
-`;
-
-//   avatar_url
-
-export function useMe() {
-  /* eslint-disable no-unused-vars */
-  const { loading, data } = useQuery(PROFILE_QUERY, {
-    // fetchPolicy: "network-only",
-  });
-  return { loading, me: data?.me };
-}
diff --git a/apps/ui/src/pages/login.tsx → apps/ui-web/src/pages/login.tsx b/apps/ui/src/pages/login.tsx → apps/ui-web/src/pages/login.tsx
diff --git a/apps/ui/src/pages/profile.tsx → apps/ui-web/src/pages/profile.tsx b/apps/ui/src/pages/profile.tsx → apps/ui-web/src/pages/profile.tsx
@@ -5,7 +5,7 @@ import Typography from "@mui/material/Typography";
 import Paper from "@mui/material/Paper";
 import { Container, Stack } from "@mui/material";
 
-import { useMe } from "../lib/auth";
+import { useMe } from "@codepod/ui";
 
 export function Profile() {
   const { loading, me } = useMe();

diff --git a/apps/ui/src/pages/signup.tsx → apps/ui-web/src/pages/signup.tsx b/apps/ui/src/pages/signup.tsx → apps/ui-web/src/pages/signup.tsx
diff --git a/apps/ui/src/components/Header.tsx b/apps/ui/src/components/Header.tsx
@@ -21,15 +21,7 @@ import Tooltip from "@mui/material/Tooltip";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import AppBar from "@mui/material/AppBar";
 
-import { useAuth } from "../lib/auth";
-
-import { useMe } from "../lib/auth";
-
 export const Header = ({ children }: { children?: any }) => {
-  const { isSignedIn, signOut } = useAuth();
-  let navigate = useNavigate();
-  const { me } = useMe();
-
   return (
     <AppBar
       position="fixed"
@@ -73,48 +65,12 @@ export const Header = ({ children }: { children?: any }) => {
               Docs <OpenInNewIcon fontSize="small" sx={{ ml: "1px" }} />
             </Link>
           </Box>
-
-          {isSignedIn() ? (
-            <Box
-              sx={{
-                display: "flex",
-                flexDirection: "row",
-                alignItems: "center",
-              }}
-            >
-              <Box sx={{ mr: 2 }}>
-                <Link component={ReactLink} to="/profile" underline="none">
-                  {me?.firstname}
-                </Link>
-              </Box>
-              <Button
-                onClick={() => {
-                  signOut();
-                  navigate("/login");
-                }}
-              >
-                Logout
-              </Button>
-            </Box>
-          ) : (
-            <MyMenuItem to="/login">Login</MyMenuItem>
-          )}
         </Toolbar>
       </Container>
     </AppBar>
   );
 };
 
-const MyMenuItem = ({ children, to = "/" }) => {
-  return (
-    <Box display="block">
-      <Link to={to} component={ReactLink} underline="none">
-        {children}
-      </Link>
-    </Box>
-  );
-};
-
 export function Footer() {
   return (
     <Box

diff --git a/apps/ui/src/index.tsx b/apps/ui/src/index.tsx
@@ -1,11 +1,8 @@
 export * from "./pages/test";
 export * from "./pages/index";
-export * from "./pages/login";
-export * from "./pages/signup";
 export * from "./pages/dashboard";
-export * from "./pages/profile";
 export * from "./pages/repo";
 export * from "./pages/docs";
 
-export * from "./lib/auth";
+export * from "./lib/me";
 export * from "./components/Header";