Add New Components, Refactor Pages, Update Configurations and Depende…

…ncies (#119) * wip * wip * wip * wip
jsonresume · Jul 3, 2024 · f9a22b7 · f9a22b7
1 parent 89f8e39
commit f9a22b7
Show file tree

Hide file tree

Showing 18 changed files with 309 additions and 91 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v20.13.1
diff --git a/README.md b/README.md
@@ -124,4 +124,6 @@ This is an implementation of a chat bot, your resume is injected, and the conver
   - add a footer
   - change the url pattern to be ai.jsonresume.org/thomasdavis etc
 
-ci
+Design System
+
+https://www.colorhexa.com/fff18f
diff --git a/apps/registry/app/[username]/dashboard/page.js b/apps/registry/app/[username]/dashboard/page.js
@@ -0,0 +1,25 @@
+'use client';
+
+import React from 'react';
+import styled from 'styled-components';
+
+// create a two column layout
+const Container = styled.div`
+  width: 400px;
+  margin: auto;
+`;
+
+const Resumes = () => {
+  return (
+    <Container>
+      <p>Coming soon...</p>
+      <p>
+        This will show meta information about the user. And a preview of their
+        resume.
+      </p>
+      <p>For now use the tooling in the top menu</p>
+    </Container>
+  );
+};
+
+export default Resumes;
diff --git a/apps/registry/app/[username]/editor/page.js b/apps/registry/app/[username]/editor/page.js
@@ -0,0 +1,5 @@
+import Editor from '../../components/Editor';
+
+export default async function Page() {
+  return <Editor />;
+}
diff --git a/apps/registry/pages/interview.js → ...registry/app/[username]/interview/page.js b/apps/registry/pages/interview.js → ...registry/app/[username]/interview/page.js
@@ -1,8 +1,8 @@
-import { useRouter } from 'next/router';
+'use client';
+
 import { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
-import Layout from '../src/ui/Layout';
 
 function capitalizeFirstLetter(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
@@ -124,10 +124,8 @@ const Helper = styled.div`
 const INTERVIEWER = 'interviewer';
 const CANDIDATE = 'candidate';
 
-export default function Talk() {
-  const router = useRouter();
-  const parts = router.asPath.split('/');
-  const username = parts[1];
+export default function Talk({ params }) {
+  const { username } = params;
   const [text, setText] = useState('');
   const [reply, setReply] = useState('');
   const [replying, setReplying] = useState(null);
@@ -239,7 +237,7 @@ export default function Talk() {
   }, [messages]);
 
   return (
-    <Layout>
+    <>
       {!showAbout && (
         <>
           <Switch>
@@ -306,6 +304,6 @@ export default function Talk() {
           </InputContainer>
         </>
       )}
-    </Layout>
+    </>
   );
 }
diff --git a/apps/registry/pages/jobs.js → apps/registry/app/[username]/jobs/page.js b/apps/registry/pages/jobs.js → apps/registry/app/[username]/jobs/page.js
@@ -1,12 +1,13 @@
+'use client';
+
 import axios from 'axios';
-import Router, { useRouter } from 'next/router';
+import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import Layout from '../src/ui/Layout';
 import Link from 'next/link';
-import Hero from '../src/ui/Hero';
-import ButtonGroup from '../src/ui/ButtonGroup';
-import Button from '../src/ui/Button';
+import Hero from '../../../src/ui/Hero';
+import ButtonGroup from '../../../src/ui/ButtonGroup';
+import Button from '../../../src/ui/Button';
 
 const MessagesContainer = styled.div`
   background: #fbfbfb;
@@ -31,11 +32,9 @@ const Message = styled.div`
  - show similarity score
 */
 
-export default function Jobs() {
+export default function Jobs({ params }) {
+  const username = params.username;
   const router = useRouter();
-  const parts = router.asPath.split('/');
-  const username = parts[1];
-
   const [submitting, setSubmitting] = useState(false);
   const [jobs, setJobs] = useState(null);
 
@@ -83,15 +82,15 @@ export default function Jobs() {
   
     `
     );
-    Router.push(`/${username}/letter?job=${job.id}`);
+    router.push(`/${username}/letter?job=${job.id}`);
   };
 
   const handleGenerate = () => {
     setSubmitting(true);
   };
 
   return (
-    <Layout>
+    <>
       {' '}
       <Hero>
         Creates an embedding with 3702 dimensions of your resume.json. The same
@@ -101,7 +100,7 @@ export default function Jobs() {
       <ButtonGroup>
         <div></div>
         <Button disabled={submitting} onClick={handleGenerate}>
-          {submitting ? 'GENERATING' : 'GENERATE'}
+          {submitting ? 'FINDING' : 'FIND JOBS'}
         </Button>
       </ButtonGroup>
       <br />
@@ -167,6 +166,6 @@ export default function Jobs() {
           </Messages>
         </MessagesContainer>
       )}
-    </Layout>
+    </>
   );
 }
diff --git a/apps/registry/app/[username]/layout.js b/apps/registry/app/[username]/layout.js
@@ -0,0 +1,13 @@
+'use client';
+
+import styled from 'styled-components';
+
+const Container = styled.div`
+  width: 800px;
+  margin: auto;
+  padding-top: 40px;
+`;
+
+export default function Home({ children }) {
+  return <Container>{children}</Container>;
+}
diff --git a/apps/registry/pages/letter.js → apps/registry/app/[username]/letter/page.js b/apps/registry/pages/letter.js → apps/registry/app/[username]/letter/page.js
@@ -1,14 +1,15 @@
+'use client';
+
 import axios from 'axios';
-import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
-import Layout from '../src/ui/Layout';
-import Button from '../src/ui/Button';
-import Dropdown from '../src/ui/Dropdown';
+import { useSearchParams } from 'next/navigation';
+import Button from '../../../src/ui/Button';
+import Dropdown from '../../../src/ui/Dropdown';
 import styled from 'styled-components';
 import ReactMarkdown from 'react-markdown';
-import Hero from '../src/ui/Hero';
-import Label from '../src/ui/Label';
-import ButtonGroup from '../src/ui/ButtonGroup';
+import Hero from '../../../src/ui/Hero';
+import Label from '../../../src/ui/Label';
+import ButtonGroup from '../../../src/ui/ButtonGroup';
 
 /*
 #todo
@@ -33,13 +34,11 @@ const Paper = styled.div`
   background: #fff;
 `;
 
-export default function Letter() {
-  const router = useRouter();
-  const parts = router.asPath.split('/');
-  const username = parts[1];
-  // get query param
-  const { job } = router.query;
-  console.log({ job });
+export default function Letter({ params }) {
+  const searchParams = useSearchParams();
+  const { username } = params;
+  const job = searchParams.get('job');
+  console.log({ job, searchParams });
   const [submitting, setSubmitting] = useState(false);
   const [jobDescription, setJobDescription] = useState(
     typeof window !== 'undefined'
@@ -85,7 +84,7 @@ export default function Letter() {
   };
 
   return (
-    <Layout>
+    <>
       <Hero>
         Combines the users resume.json with the job description below to
         generate a cover letter in the tonality specified
@@ -131,6 +130,6 @@ export default function Letter() {
           <ReactMarkdown>{letter}</ReactMarkdown>
         </Paper>
       )}
-    </Layout>
+    </>
   );
 }
diff --git a/apps/registry/pages/suggestions.js → ...gistry/app/[username]/suggestions/page.js b/apps/registry/pages/suggestions.js → ...gistry/app/[username]/suggestions/page.js
@@ -1,13 +1,12 @@
+'use client';
 import axios from 'axios';
 import styled from 'styled-components';
-import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
-import Layout from '../src/ui/Layout';
-import Hero from '../src/ui/Hero';
-import Label from '../src/ui/Label';
-import ButtonGroup from '../src/ui/ButtonGroup';
-import Dropdown from '../src/ui/Dropdown';
-import Button from '../src/ui/Button';
+import Hero from '../../../src/ui/Hero';
+import Label from '../../../src/ui/Label';
+import ButtonGroup from '../../../src/ui/ButtonGroup';
+import Dropdown from '../../../src/ui/Dropdown';
+import Button from '../../../src/ui/Button';
 import ReactMarkdown from 'react-markdown';
 
 const Paper = styled.div`
@@ -17,10 +16,8 @@ const Paper = styled.div`
   background: #fff;
 `;
 
-export default function Suggestions() {
-  const router = useRouter();
-  const parts = router.asPath.split('/');
-  const username = parts[1];
+export default function Suggestions({ params }) {
+  const { username } = params;
 
   const [submitting, setSubmitting] = useState(false);
   const [focus, setFocus] = useState('general');
@@ -50,7 +47,7 @@ export default function Suggestions() {
   };
 
   return (
-    <Layout>
+    <>
       <Hero>Generates suggestions to improve your resume</Hero>
       <Label>Focus</Label>
       <ButtonGroup>
@@ -85,6 +82,6 @@ export default function Suggestions() {
           <ReactMarkdown>{suggestions}</ReactMarkdown>
         </Paper>
       )}
-    </Layout>
+    </>
   );
 }
diff --git a/apps/registry/app/components/Dashboard.js → apps/registry/app/components/Editor.js b/apps/registry/app/components/Dashboard.js → apps/registry/app/components/Editor.js
@@ -234,8 +234,6 @@ export default async function Page() {
     return response;
   }
 
-  console.log({ session });
-
   return (
     <div>
       {!session && <SignIn />}

diff --git a/apps/registry/app/components/Menu.js b/apps/registry/app/components/Menu.js
@@ -0,0 +1,88 @@
+'use client';
+
+import Header from '@jsonresume/ui/Header';
+import { signOut } from 'next-auth/react';
+import { useParams } from 'next/navigation';
+import Link from '@jsonresume/ui/Link';
+import styled from 'styled-components';
+
+const Viewing = styled.div`
+  height: 30px;
+  line-height: 30px;
+  padding: 5px 10px;
+  background: #8f9dff;
+  display: flex;
+  justify-content: space-between;
+`;
+
+export default function Menu({ session }) {
+  let { username } = useParams();
+  console.log({ session });
+  return (
+    <>
+      <Header
+        left={
+          <div
+            style={{
+              display: 'flex',
+              gap: '1rem',
+            }}
+          >
+            <Link href="/">JSON Resume Registry</Link>
+            <Link href="/explore">Explore</Link>
+          </div>
+        }
+        right={
+          <div
+            style={{
+              display: 'flex',
+              gap: '1rem',
+            }}
+          >
+            {username && <Link href={`/${username}/dashboard`}>Dashboard</Link>}
+            {session && username && (
+              <Link href={`/${username}/editor`}>Editor</Link>
+            )}
+            {username && <Link href={`/${username}/jobs`}>Jobs</Link>}
+            {username && (
+              <Link href={`/${username}/suggestions`}>Suggestions</Link>
+            )}
+            {username && <Link href={`/${username}/interview`}>Interview</Link>}
+            {username && <Link href={`/${username}/letter`}>Letter</Link>}
+            {session && <Link onClick={signOut}>Logout</Link>}
+            {!session && <Link href="/">Sign in</Link>}
+          </div>
+        }
+      />
+      {username && (
+        <Viewing>
+          <div>
+            You are currently looking at the profile of github.com/@{username}
+          </div>
+          <div>
+            <Link
+              href={`/${username}`}
+              target="_blank"
+              style={{
+                marginRight: 20,
+                fontSize: 12,
+              }}
+            >
+              View Resume
+            </Link>
+            <Link
+              href={`/${username}.json`}
+              target="_blank"
+              style={{
+                marginRight: 20,
+                fontSize: 12,
+              }}
+            >
+              View JSON
+            </Link>
+          </div>
+        </Viewing>
+      )}
+    </>
+  );
+}