fix(documents): umlaute in file names

UAV-Painkillers · Oct 19, 2024 · e217c6e · e217c6e
1 parent 12e9865
commit e217c6e
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 20 deletions.
diff --git a/src/components/pilot-id/documents/pilot-id-documents-card.tsx b/src/components/pilot-id/documents/pilot-id-documents-card.tsx
@@ -42,13 +42,20 @@ export async function PilotIdDocumentsCard() {
     <Card className="col-span-1 lg:col-span-5">
       <CardContent className="p-4 space-y-6">
         <div className="space-y-1">
-          <div className="mb-4">
-            <h2 className="text-lg font-semibold">Documents</h2>
-            <p className="text-gray-500 dark:text-gray-400">
-              Legal, Insurance and other Documents.
-              <br />
-              <small>(These are only visible to yourself)</small>
-            </p>
+          <div className="mb-4 flex flex-col sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <h2 className="text-lg font-semibold">Documents</h2>
+              <p className="text-gray-500 dark:text-gray-400">
+                Legal, Insurance and other Documents.
+                <br />
+                <small>(These are only visible to yourself)</small>
+              </p>
+            </div>
+
+            {/* Upload documents button adjusted for responsiveness */}
+            <div className="mt-4 sm:mt-0">
+              <PilotIdDocumentsUploadButton />
+            </div>
           </div>
 
           <div className="flex flex-col space-y-4">
@@ -63,10 +70,6 @@ export async function PilotIdDocumentsCard() {
               ))
             )}
           </div>
-
-          <div className="flex items-center space-x-4 pt-4">
-            <PilotIdDocumentsUploadButton />
-          </div>
         </div>
       </CardContent>
     </Card>

diff --git a/src/components/pilot-id/documents/pilot-id-documents-upload-button.action.ts b/src/components/pilot-id/documents/pilot-id-documents-upload-button.action.ts
@@ -4,9 +4,12 @@ import { uploadFileAction } from "@/lib/file-upload.action";
 import { getSupabaseServerClient } from "@/lib/supabase.server";
 import { Document } from "@/types/supabase-custom";
 import { revalidatePath } from "next/cache";
-import { redirect } from "next/navigation";
 
-async function createFileMetaData(file: File, fileId: string) {
+async function createFileMetaData(
+  file: File,
+  fileNameUTF8: string,
+  fileId: string
+) {
   const supabase = getSupabaseServerClient();
 
   const {
@@ -20,9 +23,9 @@ async function createFileMetaData(file: File, fileId: string) {
   }
 
   const meta: Omit<Document, "id" | "created_at"> = {
-    original_file_name: file.name,
+    original_file_name: fileNameUTF8,
     path: fileId,
-    name: file.name,
+    name: fileNameUTF8,
     user_id: user.id,
     category: "miscellaneous",
   };
@@ -42,7 +45,7 @@ async function createFileMetaData(file: File, fileId: string) {
   return { data };
 }
 
-async function uploadDocument(file: File) {
+async function uploadDocument(file: File, fileNameUTF8: string) {
   const { error: uploadError, fullFilePath } = await uploadFileAction({
     bucketName: "documents",
     file,
@@ -56,6 +59,7 @@ async function uploadDocument(file: File) {
 
   const { error: metaError, data } = await createFileMetaData(
     file,
+    fileNameUTF8,
     fullFilePath!
   );
 
@@ -99,6 +103,7 @@ async function getShareHandleOfCurrentUser() {
 
 export async function uploadDocumentFormAction(formData: FormData) {
   const file = formData.get("file") as File;
+  const fileNameUTF8 = formData.get("fileNameUTF8") as string;
 
   const { error: shareHandleError, shareHandle } =
     await getShareHandleOfCurrentUser();
@@ -107,7 +112,7 @@ export async function uploadDocumentFormAction(formData: FormData) {
     return { error: shareHandleError };
   }
 
-  const { error: uploadError, meta } = await uploadDocument(file);
+  const { error: uploadError, meta } = await uploadDocument(file, fileNameUTF8);
 
   if (uploadError) {
     return { error: uploadError };

diff --git a/src/components/pilot-id/documents/pilot-id-documents-upload-button.tsx b/src/components/pilot-id/documents/pilot-id-documents-upload-button.tsx
@@ -30,6 +30,8 @@ export function PilotIdDocumentsUploadButton(props: Props) {
 
   const onSubmit = useCallback(async (formData: FormData) => {
     startUploadTransition(async () => {
+      const file = formData.get("file") as any;
+      formData.set("fileNameUTF8", file.name);
       const { error, document } = await uploadDocumentFormAction(formData);
 
       if (error) {

diff --git a/src/components/pilot-id/pilot-id-card.tsx b/src/components/pilot-id/pilot-id-card.tsx
@@ -181,7 +181,7 @@ export async function PilotIdCard(props: {
                   </p>
                 </div>
 
-                <div className="flex items-center justify-between">
+                <div className="flex flex-col sm:flex-row sm:items-start justify-between space-y-4 sm:space-y-0">
                   <div className="space-y-2">
                     {pilot.contact_phone && (
                       <div className="flex items-center space-x-4">
@@ -203,10 +203,10 @@ export async function PilotIdCard(props: {
                     )}
                   </div>
 
-                  <div className="rounded-lg overflow-hidden">
+                  <div className="rounded-lg overflow-hidden self-center sm:self-auto">
                     <PilotShareQRCode
                       shareHandle={pilot.share_handle ?? ""}
-                      width={100}
+                      width={200}
                     />
                   </div>
                 </div>