Merge pull request #3 from adrianfocke/small-changes

Small changes

README.md

@@ -16,12 +16,11 @@ npm run dev
 Prepare the project for a deployment (with Vercel). Just add some environment variables:
 
 ```
-NEXT_PUBLIC_TINA_URL=http://localhost:4001/graphql (or in production the tinacms url)
-NEXT_PUBLIC_TINA_TOKEN=<your value here>
+TINA_TOKEN=<your value here>
 NEXT_PUBLIC_TINA_CLIENT_ID=<your value here>
 
-NEXT_PUBLIC_SUPABASE_URL=<your value here>
-NEXT_PUBLIC_SUPABASE_KEY=<your value here>
+SUPABASE_URL=<your value here>
+SUPABASE_KEY=<your value here>
 ```
 
 More info here: [Going to Production with Tina Cloud](https://tina.io/docs/tina-cloud/overview/) and [Supabase Storage Quickstart](https://supabase.com/docs/guides/storage/quickstart)

app/api/document/download/route.ts

@@ -0,0 +1,20 @@
+import { createClient } from '@supabase/supabase-js';
+import { NextResponse } from 'next/server';
+
+export async function POST(request: Request) {
+  const document: string = await request.json();
+
+  const supabaseClient = createClient(
+    process.env.SUPABASE_URL!,
+    process.env.SUPABASE_TOKEN!
+  );
+
+  const { data, error } = await supabaseClient.storage
+    .from('Documents')
+    .download(`${document}`);
+
+  return NextResponse.json(
+    { data: Array.from(new Uint8Array(await data!.arrayBuffer())) },
+    { status: 200 }
+  );
+}

app/api/document/patch/hook.ts

@@ -0,0 +1,23 @@
+import type { PatchBackendParcel } from '@/types/index';
+import useSWR from 'swr';
+
+const fetcher = async (...args: any[]) => {
+  const req = await fetch('/api/document/patch', {
+    method: 'POST',
+    body: JSON.stringify(args[0]),
+  });
+  return await req.json();
+};
+
+export const usePatchDocument = (
+  file: PatchBackendParcel['file'],
+  placeholders: PatchBackendParcel['placeholders']
+) => {
+  const { data, error, isLoading } = useSWR({ file, placeholders }, fetcher);
+
+  return {
+    document: data,
+    isLoading,
+    error,
+  };
+};

app/api/document/patch/route.ts

@@ -0,0 +1,15 @@
+import type { PatchBackendParcel } from '@/types/index';
+import patchDocument from '@/utils/patchDocument';
+import { NextResponse } from 'next/server';
+
+export async function POST(request: Request) {
+  const patchBackendParcel: PatchBackendParcel = await request.json();
+
+  const patch = await patchDocument(patchBackendParcel);
+
+  if (!patch) {
+    return NextResponse.json({ error: 'Could not patch document' });
+  }
+
+  return NextResponse.json({ data: patch }, { status: 200 });
+}

app/api/tina/route.ts

@@ -1,6 +1,6 @@
+import client from '@/tina/__generated__/client';
 import type { TinaBackendParcel } from '@/types/index';
 import { NextResponse } from 'next/server';
-import client from '../../../tina/__generated__/client';
 
 export async function POST(request: Request) {
   const tinaBackendParcel: TinaBackendParcel = await request.json();

app/files/[slug]/page.tsx

@@ -1,9 +1,9 @@
+import File from '@/components/File';
+import client from '@/tina/__generated__/client';
 import type { Skeleton } from '@/types/index';
+import extractPlaceholders from '@/utils/extractPlaceholders';
 import { Text } from '@radix-ui/themes';
 import { Suspense } from 'react';
-import File from '../../../components/File';
-import client from '../../../tina/__generated__/client';
-import extractPlaceholders from '../../../utils/extractPlaceholders';
 
 export type Params = {
   params: {
@@ -24,7 +24,9 @@ export default async function Page({ params }: Params) {
 
   return (
     <Suspense fallback={<Text>Loading...</Text>}>
-      <File placeholders={placeholders} result={result} />
+      {result && placeholders && (
+        <File placeholders={placeholders} result={result} />
+      )}
     </Suspense>
   );
 }

app/files/page.tsx

@@ -1,6 +1,6 @@
 import Files from '@/components/Files';
+import client from '@/tina/__generated__/client';
 import type { FileLinkInfo } from '@/types/index';
-import client from '../../tina/__generated__/client';
 
 export default async function Page() {
   const result = await client.queries.fileConnection();

components/Card/NewFileCard.tsx

@@ -1,11 +1,10 @@
 'use client';
+import { LETTERS_NUMBERS_HYPEN_BLANK_REGEX } from '@/utils/constants';
 import { AccessibleIcon } from '@radix-ui/react-accessible-icon';
 import * as Form from '@radix-ui/react-form';
 import { FilePlusIcon } from '@radix-ui/react-icons';
 import { Button, Card, Flex, Text } from '@radix-ui/themes';
-import { revalidatePath } from 'next/cache';
 import { useRouter } from 'next/navigation';
-import { LETTERS_NUMBERS_HYPEN_BLANK_REGEX } from '../../utils/constants';
 
 /** Card component that includes a form to create new files */
 export default () => {

components/EditorPanel.tsx

@@ -1,8 +1,6 @@
-import downloadDocument from '@/app/actions/downloadDocument';
 import { DownloadIcon, ListBulletIcon } from '@radix-ui/react-icons';
 import { Button, Card, Flex } from '@radix-ui/themes';
 import { useRouter } from 'next/navigation';
-import { IS_RUNNING_LOCALLY } from 'utils/constants';
 
 type EditorPanelProps = {
   patchedDocument?: string;
@@ -29,9 +27,32 @@ export default ({ patchedDocument }: EditorPanelProps) => {
           className='bg-[#0c6bff]'
           title={`Download file ${patchedDocument}`}
           onClick={async () => {
-            IS_RUNNING_LOCALLY
-              ? router.push(`/${patchedDocument}`)
-              : await downloadDocument(patchedDocument!);
+            if (window.location.hostname === 'localhost') {
+              router.push(`/${patchedDocument}`);
+              return;
+            }
+
+            const downloadDocument = async (document: string) => {
+              const req = await fetch('/api/document/download', {
+                method: 'POST',
+                body: JSON.stringify(document),
+              });
+
+              return await req.json();
+            };
+
+            const documentAsUint8Array = await downloadDocument(
+              patchedDocument!
+            ).then((data: Uint8Array) => data);
+
+            const blob = new Blob([documentAsUint8Array]);
+
+            const downloadLink = document.createElement('a');
+            downloadLink.href = URL.createObjectURL(blob);
+            downloadLink.download = patchedDocument!;
+            document.body.appendChild(downloadLink);
+            downloadLink.click();
+            document.body.removeChild(downloadLink);
           }}
         >
           <DownloadIcon width='16' height='16' />

components/File.tsx

@@ -1,16 +1,15 @@
 'use client';
-import patchDocument from '@/app/actions/patchDocument';
-import type { Placeholders, Skeleton } from '@/types/index';
+import { usePatchDocument } from '@/app/api/document/patch/hook';
+import { FileQuery } from '@/tina/__generated__/types';
+import patchableEntityMapper from '@/tina/patchable-entity/patchableEntityMapper';
+import type { Placeholders } from '@/types/index';
 import { uniqueUuid } from 'docx';
-import { useEffect, useState } from 'react';
-import entityMapper from 'tina/entityMapper';
 import { useTina } from 'tinacms/dist/react';
-import { FileQuery } from '../tina/__generated__/types';
 import EditorPanel from './EditorPanel';
 import { renderView } from './View';
 
 type FileProps = {
-  placeholders?: Placeholders;
+  placeholders: Placeholders;
   result: {
     data: FileQuery;
     variables: {
@@ -22,44 +21,14 @@ type FileProps = {
 
 export default ({ placeholders, result }: FileProps) => {
   const { data } = useTina(result);
-  const [patchedDocument, setPatchedDocument] = useState<string | undefined>();
-  const givenEntity = entityMapper(data.file.entity?.__typename!);
-
-  useEffect(
-    () => {
-      const {
-        file: { entity, name, skeleton },
-      } = data;
-
-      if (placeholders) {
-        const patchDocumentOnServer = async () => {
-          try {
-            const patchedDocument = await patchDocument({
-              entity,
-              filename: name,
-              placeholders,
-              skeleton: skeleton as Skeleton,
-            });
-            setPatchedDocument(patchedDocument);
-          } catch (error) {
-            console.error('Error patching document:', error);
-          }
-        };
-
-        if (skeleton && entity && name) {
-          patchDocumentOnServer();
-        }
-      }
-    },
-    [data, placeholders] /* TODO Only trigger when "Save" button is clicked */
-  );
+  const { document } = usePatchDocument(data, placeholders);
+  const givenEntity = patchableEntityMapper[data.file.entity?.__typename!];
 
   return (
-    placeholders &&
-    givenEntity && (
-      <>
-        <EditorPanel patchedDocument={patchedDocument} />
-        {placeholders.map((placeholder) => (
+    <>
+      <EditorPanel patchedDocument={(document && document.data) || undefined} />
+      {givenEntity &&
+        placeholders.map((placeholder) => (
           <div key={uniqueUuid()} className='mb-4'>
             {renderView({
               placeholder,
@@ -69,8 +38,7 @@ export default ({ placeholders, result }: FileProps) => {
             })}
           </div>
         ))}
-      </>
-    )
+    </>
   );
 };
 

components/Files.tsx

@@ -1,8 +1,8 @@
 'use client';
 import type { FileLinkInfo } from '@/types/index';
+import { fileInEditMode } from '@/utils/path';
 import { Grid, Link } from '@radix-ui/themes';
 import { uniqueUuid } from 'docx';
-import { fileInEditMode } from '../utils/path';
 import ContextCard from './Card/ContextCard';
 import NewFileCard from './Card/NewFileCard';
 

content/entities/companies/ÖBB_PV.json

@@ -10,5 +10,5 @@
     }
   ],
   "size": 95,
-  "name": "ÖBB Personenverkehr"
+  "name": "ÖBB Personenverkehr AG"
 }

env.ts

@@ -4,18 +4,18 @@ import { z } from 'zod';
 
 export const env = createEnv({
   server: {
+    SUPABASE_TOKEN: z.string().min(1),
+    SUPABASE_URL: z.string().url(),
     TINA_TOKEN: z.string().min(1),
   },
   client: {
     NEXT_PUBLIC_TINA_CLIENT_ID: z.string().min(1),
-    NEXT_PUBLIC_SUPABASE_URL: z.string().url(),
-    NEXT_PUBLIC_SUPABASE_KEY: z.string().min(1),
   },
   runtimeEnv: {
-    TINA_TOKEN: process.env.TINA_TOKEN,
     NEXT_PUBLIC_TINA_CLIENT_ID: process.env.NEXT_PUBLIC_TINA_CLIENT_ID,
-    NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
-    NEXT_PUBLIC_SUPABASE_KEY: process.env.NEXT_PUBLIC_SUPABASE_KEY,
+    SUPABASE_TOKEN: process.env.SUPABASE_TOKEN,
+    SUPABASE_URL: process.env.SUPABASE_URL,
+    TINA_TOKEN: process.env.TINA_TOKEN,
   },
   skipValidation: process.env.NODE_ENV === 'development',
   onValidationError: (error: ZodError) => {

tina/collections/audits/index.tsx → tina/collections/audits.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
 import { Collection } from 'tinacms';
-import { DURATIONS, LOCATIONS, TIMES } from '../../../utils/constants/tina';
+import { DURATIONS, LOCATIONS, TIMES } from '../../utils/constants';
 import {
   readableDateFromDatetime,
   readableFileNameFromEntity,
-} from '../../../utils/readables';
-import Picker from '../../picker/Picker';
+} from '../../utils/readables';
+import Picker from '../picker/Picker';
 
 export default {
   name: 'audit',