Resume edit

apps/graphql/esbuild.config.ts

@@ -29,7 +29,7 @@ build({
 
   writeFileSync('esbuild-meta.json', JSON.stringify(result.metafile));
   // eslint-disable-next-line no-console
-  console.log(
+  console.info(
     '\nMetafile written to esbuild-meta.json\nOpen https://esbuild.github.io/analyze/ to analyze the bundle',
   );
 });

apps/graphql/src/modules/resume/resume-resolver.ts

@@ -34,13 +34,12 @@ export const resumeConnectionResolve = async (
   _: unknown,
   args: QueryResumesArgs,
   context: GraphQLContext,
-): Promise<ResumeConnection | null> => {
-  return context.user
+): Promise<ResumeConnection | null> =>
+  context.user
     ? resumeConnectionResolverSchema.parse(
         await context.loaders.resume.loaderByUserId.loadConnection(
           context.user,
           args,
         ),
       )
     : null;
-};

apps/resume-generator-web/package.json

@@ -16,6 +16,7 @@
     "@radix-ui/themes": "^2.0.1",
     "@react-spring/web": "^9.7.3",
     "@resume-generator/relay": "workspace:*",
+    "@uiw/react-textarea-code-editor": "^3.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",

apps/resume-generator-web/src/modules/resume/ResumeEdit.tsx

@@ -0,0 +1,68 @@
+import { Flex, IconButton } from '@radix-ui/themes';
+import { FC, useState } from 'react';
+
+import { DownloadIcon } from '@radix-ui/react-icons';
+import { useRoutePreloadedQuery } from '@resume-generator/relay';
+import CodeEditor from '@uiw/react-textarea-code-editor';
+import { Toaster } from 'react-hot-toast';
+import { graphql } from 'react-relay';
+import { usePDF } from 'react-to-pdf';
+import { ResumeEditQuery } from './__generated__/ResumeEditQuery.graphql';
+
+const ResumeEdit: FC = () => {
+  const { resume } = useRoutePreloadedQuery<ResumeEditQuery>(graphql`
+    query ResumeEditQuery($id: ID!) {
+      resume: node(id: $id) {
+        ... on Resume {
+          html
+        }
+      }
+    }
+  `);
+  const [html, setHtml] = useState(resume?.html);
+
+  const { targetRef, toPDF } = usePDF({ filename: 'resume.pdf' });
+
+  if (html === undefined) {
+    return <div>Resume not found</div>;
+  }
+
+  return (
+    <Flex direction="row" width="100%" gap="2" p="8">
+      <CodeEditor
+        value={html}
+        language="html"
+        onChange={(evn) => setHtml(evn.target.value)}
+        padding={15}
+        style={{
+          backgroundColor: '#f5f5f5',
+          fontFamily:
+            'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
+        }}
+      />
+      <Flex direction="column" gap="5" width="100%" align="end">
+        <IconButton
+          onClick={() => toPDF()}
+          size="4"
+          aria-label="Download Resume PDF"
+        >
+          <DownloadIcon />
+        </IconButton>
+
+        <div ref={targetRef} style={{ width: '100%' }}>
+          <div dangerouslySetInnerHTML={{ __html: html }} />
+        </div>
+      </Flex>
+      <Toaster position="top-center" />
+    </Flex>
+  );
+};
+
+export const Component: FC = () => {
+  return (
+    <Flex width="100%" height="100%">
+      <ResumeEdit />
+    </Flex>
+  );
+};
+Component.displayName = 'ResumeEdit';

apps/resume-generator-web/src/modules/resume/Resumes.tsx

@@ -0,0 +1,70 @@
+import { Button, Flex, Link } from '@radix-ui/themes';
+import { FC } from 'react';
+
+import { useRoutePreloadedQuery } from '@resume-generator/relay';
+import { graphql, usePaginationFragment } from 'react-relay';
+import { ResumesQuery } from './__generated__/ResumesQuery.graphql';
+import { Resumes_query$key } from './__generated__/Resumes_query.graphql';
+
+type ResumesProps = {
+  queryRef: Resumes_query$key;
+};
+
+const Resumes: FC<ResumesProps> = ({ queryRef }) => {
+  const { data, loadNext, hasNext, isLoadingNext } = usePaginationFragment(
+    graphql`
+      fragment Resumes_query on Query
+      @argumentDefinitions(
+        first: { type: "Int", defaultValue: 5 }
+        last: { type: "Int" }
+        before: { type: String }
+        after: { type: String, defaultValue: null }
+      )
+      @refetchable(queryName: "ResumesPaginationQuery") {
+        resumes(first: $first, last: $last, after: $after, before: $before)
+          @connection(key: "Resumes_query_resumes") {
+          count
+          edges {
+            node {
+              id
+              html
+            }
+          }
+        }
+      }
+    `,
+    queryRef,
+  );
+
+  return (
+    <Flex direction="column" gap="5" width="100%">
+      {data?.resumes?.edges?.map((edge) => (
+        <Button key={edge?.node.id} asChild size="4">
+          <Link href={`/resume/${edge?.node.id}`}>Open Resume</Link>
+        </Button>
+      ))}
+      <Button
+        size="4"
+        disabled={!hasNext || isLoadingNext}
+        onClick={() => loadNext(5)}
+      >
+        Load More
+      </Button>
+    </Flex>
+  );
+};
+
+export const Component: FC = () => {
+  const query = useRoutePreloadedQuery<ResumesQuery>(graphql`
+    query ResumesQuery {
+      ...Resumes_query
+    }
+  `);
+
+  return (
+    <Flex width="100%" height="100%">
+      <Resumes queryRef={query} />
+    </Flex>
+  );
+};
+Component.displayName = 'Resumes';

apps/resume-generator-web/src/routes/router.ts

@@ -4,6 +4,8 @@ import { lazyRoute } from '../lib/lazyRoute';
 import { getEnvironment } from '@resume-generator/relay';
 import { PreloadableConcreteRequest, loadQuery } from 'react-relay';
 import { LayoutQuery } from '../modules/layout/__generated__/LayoutQuery.graphql';
+import { ResumeEditQuery } from '../modules/resume/__generated__/ResumeEditQuery.graphql';
+import { ResumesQuery } from '../modules/resume/__generated__/ResumesQuery.graphql';
 
 export const routes: RouteObject[] = [
   {
@@ -13,7 +15,7 @@ export const routes: RouteObject[] = [
         getEnvironment(),
         (await import(
           '../modules/layout/__generated__/LayoutQuery.graphql'
-        )) as unknown as PreloadableConcreteRequest<LayoutQuery>, // TODO: abstract this
+        )) as unknown as PreloadableConcreteRequest<LayoutQuery>,
         {},
       );
 
@@ -24,8 +26,45 @@ export const routes: RouteObject[] = [
     children: [
       {
         path: '/',
+        lazy: lazyRoute(() => import('../modules/resume/Resumes')),
+        loader: async () => {
+          const queryRef = loadQuery(
+            getEnvironment(),
+            (await import(
+              '../modules/resume/__generated__/ResumesQuery.graphql'
+            )) as unknown as PreloadableConcreteRequest<ResumesQuery>,
+            {},
+          );
+
+          return {
+            queryRef,
+          };
+        },
+      },
+      {
+        path: '/resume',
         lazy: lazyRoute(() => import('../modules/resume/ResumeGenerate')),
       },
+      {
+        path: '/resume/:resumeId',
+        lazy: lazyRoute(() => import('../modules/resume/ResumeEdit')),
+        loader: async ({ params }) => {
+          if (!params.resumeId) {
+            throw new Response(`Missing resumeId`, { status: 422 });
+          }
+
+          const queryRef = loadQuery(
+            getEnvironment(),
+            (await import(
+              '../modules/resume/__generated__/ResumeEditQuery.graphql'
+            )) as unknown as PreloadableConcreteRequest<ResumeEditQuery>,
+            {
+              id: params.resumeId,
+            },
+          );
+          return { queryRef };
+        },
+      },
       {
         path: '/user',
         lazy: lazyRoute(() => import('../modules/user/UserEdit')),

cspell.json

@@ -32,6 +32,7 @@
     "pids",
     "pino",
     "preloadable",
+    "refetchable",
     "slonik",
     "stylelintcache",
     "vuepress",

packages/relay/src/fetch-with-retries.ts

@@ -40,7 +40,7 @@ export const fetchWithRetries = (
         isRequestAlive = false;
         if (shouldRetry(requestsAttempted)) {
           // eslint-disable-next-line no-console
-          console.log(false, 'fetchWithRetries: HTTP timeout, retrying.');
+          console.warn(false, 'fetchWithRetries: HTTP timeout, retrying.');
           retryRequest();
         } else {
           reject(
@@ -64,7 +64,7 @@ export const fetchWithRetries = (
             } else if (shouldRetry(requestsAttempted)) {
               // Fetch was not successful, retrying.
               // eslint-disable-next-line no-console
-              console.log(false, 'fetchWithRetries: HTTP error, retrying.'),
+              console.warn(false, 'fetchWithRetries: HTTP error, retrying.'),
                 retryRequest();
             } else {
               // Request was not successful, giving up.

packages/relay/tsconfig.json

@@ -1,4 +1,6 @@
 {
   "extends": "../tsconfig/tsconfig.web.json",
+  // https://stackoverflow.com/questions/60029058/project-must-list-all-files-or-use-an-include-pattern
+  "include": ["src/**/*", "package.json"],
   "exclude": ["node_modules"]
 }