Merge pull request #203 from mattzcarey/feat/user-info-page-fix-revert

Feat/user info page
mattzcarey · Aug 22, 2023 · 1ecbbfa · 1ecbbfa
2 parents 9d53c76 + f7c72c9
commit 1ecbbfa
Show file tree

Hide file tree

Showing 13 changed files with 2,596 additions and 127 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
   "dependencies": {
     "@actions/github": "^5.1.1",
     "@gitbeaker/rest": "^39.10.2",
+    "@radix-ui/themes": "^1.0.0",
     "chalk": "^4.1.2",
     "dotenv": "^16.3.1",
     "inquirer": "^9.2.8",

diff --git a/services/web-app/src/app/layout.tsx b/services/web-app/src/app/layout.tsx
@@ -1,28 +1,36 @@
 import "../styles/globals.css";
-import React, { ReactNode } from 'react';
-import { NextAuthProvider } from './providers';
-import { Footer } from '@/components/footer/footer';
-import { Header } from '@/components/header/header';
+import "../styles/custom.css";
+import React, { ReactNode } from "react";
+import { NextAuthProvider } from "./providers";
+import { Footer } from "@/components/footer/footer";
+import { Header } from "@/components/header/header";
+import "@radix-ui/themes/styles.css";
+import { Theme } from "@radix-ui/themes";
 
 export const metadata = {
-  title: 'Code Review GPT',
-}
+  title: "Code Review GPT",
+};
 
-export default function RootLayout({
-  children,
-  }: {children: ReactNode }) {
+export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
-        <head>
-        <script type="module" src="https://md-block.verou.me/md-block.js"></script>
-        </head>
-        <body>
+      <head>
+        <script
+          type="module"
+          src="https://md-block.verou.me/md-block.js"
+        ></script>
+      </head>
+      <body className="flex flex-col min-h-screen">
+        <Theme>
           <NextAuthProvider>
             <Header />
-            {children}
+            <main className="flex flex-col flex-grow mb-16"> 
+              {children}
+            </main>
             <Footer />
           </NextAuthProvider>
-        </body>
+        </Theme>
+      </body>
     </html>
-  )
+  );
 }
diff --git a/services/web-app/src/app/page.tsx b/services/web-app/src/app/page.tsx
@@ -4,7 +4,7 @@ import ReactMarkdown from 'react-markdown';
 export default function Home() {
   return (
     <>
-      <div className="flex flex-col p-5 ">
+      <div className="flex flex-col p-5 mx-10">
         <ReactMarkdown className="markdown" children={InstallationInstructions} />
       </div>
     </>

diff --git a/services/web-app/src/app/profile/page.tsx b/services/web-app/src/app/profile/page.tsx
@@ -0,0 +1,59 @@
+"use client";
+import Loading from "@/components/loading/loading";
+import { RepoTable } from "@/components/tables/repoTable";
+import { useSession } from "next-auth/react";
+import Image from "next/image";
+import Link from "next/link";
+
+export default function Profile(): JSX.Element {
+  const repos = [
+    "code-review-gpt",
+    "cooking-website",
+    "make-money-fast-crypto",
+  ];
+
+  const { data: session, status } = useSession();
+
+  if (status === "loading") {
+    return <Loading />;
+  }
+
+  if (!session) {
+    return (
+      <>
+        <p className="text-xl flex justify-center mt-16 ml-10">
+          You are not logged in.
+        </p>
+        <Link
+          className="text-xl underline flex justify-center mb-5 ml-10"
+          href="/"
+        >
+          Click here to return to home page.
+        </Link>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <h1 className="text-3xl flex justify-right mt-10 mb-5 ml-10">
+        My Profile
+      </h1>
+      <div className="flex flex-col p-5 mx-10">
+        <div className="flex items-center mb-10">
+          <div className="rounded-full overflow-hidden w-16 h-16">
+            <Image
+              src="/icon.png"
+              alt={"orion logo"}
+              width={100}
+              height={100}
+              layout="responsive"
+            />
+          </div>
+          <h1 className="text-2xl ml-5">{session.user?.email}</h1>
+        </div>
+        <RepoTable repos={repos} />
+      </div>
+    </>
+  );
+}
diff --git a/services/web-app/src/components/buttons/headerBtn.tsx b/services/web-app/src/components/buttons/headerBtn.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import Link from "next/link";
+
+interface HeaderButtonProps {
+  text: string;
+  route: string;
+}
+
+const HeaderButton: React.FC<HeaderButtonProps> = ({ text, route }) => {
+  return (
+    <Link
+      href={route}
+      className="p-[5px] mx-3 text-l font-mono hover:underline"
+    >
+      {text}
+    </Link>
+  );
+};
+
+export default HeaderButton;
diff --git a/services/web-app/src/components/buttons/signIn.tsx b/services/web-app/src/components/buttons/signIn.tsx
@@ -2,8 +2,8 @@ import { signIn } from 'next-auth/react';
 
 export const SignInButton = () => {
 return (
-  <button className="border-2 p-[5px] text-xl hover:underline" onClick={() => { signIn("github") }}>
+  <button className="border-2 p-[5px] mx-3 text-xl hover:underline" onClick={() => { signIn("github") }}>
     Sign In
   </button>
   )
-};
+};
diff --git a/services/web-app/src/components/buttons/signOut.tsx b/services/web-app/src/components/buttons/signOut.tsx
@@ -2,7 +2,7 @@ import { signOut } from 'next-auth/react';
 
 export const SignOutButton = () => {
 return (
-  <button className="border-2 border-black p-[5px] text-xl hover:underline" onClick={() => { signOut() }}>
+  <button className="border-2 border-black p-[5px] mx-3 text-xl hover:underline" onClick={() => { signOut() }}>
     Sign Out
   </button>
   )

diff --git a/services/web-app/src/components/footer/footer.tsx b/services/web-app/src/components/footer/footer.tsx
@@ -2,21 +2,22 @@ import Image from "next/image";
 
 export const Footer = (): JSX.Element => {
   return (
-    <footer className="flex flex-col items-center text-xl">
+    <footer className="flex flex-col items-center text-l text-white fixed bottom-0 left-0 w-full bg-black py-1">
       Join the community
-      <div className="flex flex-row justify-evenly py-[10px] space-x-4">
+      <div className="flex flex-row justify-evenly py-2 space-x-4">
           <a href="https://github.com/mattzcarey/code-review-gpt">
-            <Image src="/githubLogo.svg" alt={"github logo"} width={40} height={40} />
+            <Image src="/githubLogo.svg" alt={"github logo"} width={20} height={20} />
           </a>
           <a href="https://twitter.com/intent/follow?screen_name=oriontools.ai">
-            <Image src="/twitterLogo.svg" alt={"twitter logo"} width={40} height={40} />
+            <Image src="/twitterLogo.svg" alt={"twitter logo"} width={20} height={20} />
           </a>
           <a href="https://join.slack.com/t/orion-tools/shared_invite/zt-20x79nfgm-UGIHK1uWGQ59JQTpODYDwg">
-            <Image src="/slackLogo.png" alt={"slack logo"} width={40} height={40} />
+            <Image src="/slackLogo.png" alt={"slack logo"} width={20} height={20} />
           </a>
       </div>
     </footer>
   );
 };
+
 Footer.displayName = 'Footer';
 export default Footer;
diff --git a/services/web-app/src/components/header/header.tsx b/services/web-app/src/components/header/header.tsx
@@ -1,28 +1,45 @@
-"use client"
+"use client";
 import Image from "next/image";
-import { SignInButton } from '@/components/buttons/signIn';
-import { useSession } from 'next-auth/react';
-import { SignOutButton } from '../buttons/signOut';
+import { SignInButton } from "@/components/buttons/signIn";
+import { useSession } from "next-auth/react";
+import { SignOutButton } from "../buttons/signOut";
+import HeaderButton from "../buttons/headerBtn";
+import Link from "next/link";
 
 export const Header = (): JSX.Element => {
   const { data: session } = useSession();
 
   return (
-    <header className="flex flex-row navbar justify-between items-center">
-      <Image src="/icon.png" alt={"orion logo"} width={100} height={100} />
-      <h1 className="text-4xl font-mono">
-          Code Review GPT
-      </h1>
-      { session ? (
-        <div className="flex flex-col">
-          {session.user?.email}
-          <SignOutButton />
+    <header className="flex flex-row navbar justify-between items-center m-5">
+      <div className="flex items-center">
+        <div className="rounded-full overflow-hidden w-16 h-16">
+          <Image
+            src="/icon.png"
+            alt={"orion logo"}
+            width={100}
+            height={100}
+            layout="responsive"
+          />
         </div>
-      ) : (
-        <SignInButton />
-      )}
+        <Link className="text-4xl font-mono ml-4" href="/">
+          Code Review GPT
+        </Link>
+      </div>
+      <div className="flex items-center">
+        {session ? (
+          <div className="flex items-center">
+            <HeaderButton text="Profile" route="/profile" />
+            <div className="flex flex-col">
+              <SignOutButton />
+            </div>
+          </div>
+        ) : (
+          <SignInButton />
+        )}
+      </div>
     </header>
   );
 };
-Header.displayName = 'Header';
-export default Header;
+
+Header.displayName = "Header";
+export default Header;
diff --git a/services/web-app/src/components/loading/loading.tsx b/services/web-app/src/components/loading/loading.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+const Loading = () => {
+  return (
+    <div className="loading">
+      <div className="loader"></div>
+    </div>
+  );
+};
+
+export default Loading;
+
diff --git a/services/web-app/src/components/tables/repoTable.tsx b/services/web-app/src/components/tables/repoTable.tsx
@@ -0,0 +1,28 @@
+import { Table } from "@radix-ui/themes";
+
+interface RepoTableProps {
+  repos: string[];
+}
+
+export const RepoTable: React.FC<RepoTableProps> = ({ repos }) => {
+  return (
+    <div className="mx-10">
+      <h1 className="text-xl font-bold mb-5">Linked Repositories</h1>
+      <Table.Root>
+        <Table.Header>
+          <Table.Row>
+            <Table.ColumnHeaderCell>Repository Name</Table.ColumnHeaderCell>
+          </Table.Row>
+        </Table.Header>
+
+        <Table.Body>
+          {repos.map((repo, index) => (
+            <Table.Row key={index}>
+              <Table.RowHeaderCell>{repo}</Table.RowHeaderCell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
+    </div>
+  );
+};
diff --git a/services/web-app/src/styles/custom.css b/services/web-app/src/styles/custom.css
@@ -0,0 +1,25 @@
+.loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 50vh;
+  }
+
+  .loader {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-top: 4px solid #000;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+