From 70026efcfc81c6243ce57fc6f5d68d71acc9b7f9 Mon Sep 17 00:00:00 2001
From: vzhang03 <vzhang@vassar.edu>
Date: Fri, 2 Aug 2024 15:04:59 -0400
Subject: [PATCH] Beginning author screen, finished the loading of existing
 data and setup the form system

---
 .../components/{ => popups}/AuthorPopup.tsx   |  0
 .../components/{ => popups}/FieldPopup.tsx    |  0
 .../src/components/{ => popups}/ListPopup.tsx |  2 +-
 .../components/{ => popups}/VariablePopup.tsx |  0
 .../src/components/upload/AuthorForm.tsx      | 62 +++++++++++++++++++
 .../components/{ => upload}/PromptForm.tsx    |  2 +-
 .../components/{ => upload}/UploadData.tsx    |  0
 .../{ => upload}/UploadMetadata.tsx           |  0
 packages/frontend/src/pages/Options.tsx       |  8 +--
 packages/frontend/src/pages/Upload.tsx        | 25 ++++++--
 10 files changed, 88 insertions(+), 11 deletions(-)
 rename packages/frontend/src/components/{ => popups}/AuthorPopup.tsx (100%)
 rename packages/frontend/src/components/{ => popups}/FieldPopup.tsx (100%)
 rename packages/frontend/src/components/{ => popups}/ListPopup.tsx (99%)
 rename packages/frontend/src/components/{ => popups}/VariablePopup.tsx (100%)
 create mode 100644 packages/frontend/src/components/upload/AuthorForm.tsx
 rename packages/frontend/src/components/{ => upload}/PromptForm.tsx (98%)
 rename packages/frontend/src/components/{ => upload}/UploadData.tsx (100%)
 rename packages/frontend/src/components/{ => upload}/UploadMetadata.tsx (100%)

diff --git a/packages/frontend/src/components/AuthorPopup.tsx b/packages/frontend/src/components/popups/AuthorPopup.tsx
similarity index 100%
rename from packages/frontend/src/components/AuthorPopup.tsx
rename to packages/frontend/src/components/popups/AuthorPopup.tsx
diff --git a/packages/frontend/src/components/FieldPopup.tsx b/packages/frontend/src/components/popups/FieldPopup.tsx
similarity index 100%
rename from packages/frontend/src/components/FieldPopup.tsx
rename to packages/frontend/src/components/popups/FieldPopup.tsx
diff --git a/packages/frontend/src/components/ListPopup.tsx b/packages/frontend/src/components/popups/ListPopup.tsx
similarity index 99%
rename from packages/frontend/src/components/ListPopup.tsx
rename to packages/frontend/src/components/popups/ListPopup.tsx
index d3c8cee..2bb5b41 100644
--- a/packages/frontend/src/components/ListPopup.tsx
+++ b/packages/frontend/src/components/popups/ListPopup.tsx
@@ -1,6 +1,6 @@
 import JsPsychMetadata from 'metadata';
 import React, { useState } from 'react';
-import Trash from '../assets/trash.svg'
+import Trash from '../../assets/trash.svg'
 
 type ListPopup = {
   jsPsychMetadata: JsPsychMetadata;
diff --git a/packages/frontend/src/components/VariablePopup.tsx b/packages/frontend/src/components/popups/VariablePopup.tsx
similarity index 100%
rename from packages/frontend/src/components/VariablePopup.tsx
rename to packages/frontend/src/components/popups/VariablePopup.tsx
diff --git a/packages/frontend/src/components/upload/AuthorForm.tsx b/packages/frontend/src/components/upload/AuthorForm.tsx
new file mode 100644
index 0000000..c37e0a1
--- /dev/null
+++ b/packages/frontend/src/components/upload/AuthorForm.tsx
@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { AuthorFields } from '../../../../metadata/dist/AuthorsMap';
+import JsPsychMetadata from 'metadata';
+
+interface AuthorFormProps {
+  jsPsychMetadata: JsPsychMetadata;
+}
+
+/// need to rework the testing button to make it add another name and identifier field
+// need to rework the save button to be built natively similar to the prompt form so that can handleSave with the state data
+const AuthorForm: React.FC<AuthorFormProps> = ({ jsPsychMetadata }) => {
+  const [authors, setAuthors] = useState<(AuthorFields)[]>(
+    jsPsychMetadata.getAuthorList().map((author: AuthorFields | string) => {
+      if (typeof author === 'string') {
+        return { name: author, identifier: '' };
+      } else {
+        return author;
+      }
+    })
+  );
+
+  const handleNameChange = (index: number, value: string) => {
+    const newAuthors = [...authors];
+    newAuthors[index].name = value;
+    setAuthors(newAuthors);
+  };
+
+  const handleIdentifierChange = (index: number, value: string) => {
+    const newAuthors = [...authors];
+    newAuthors[index].identifier = value;
+    setAuthors(newAuthors);
+  };
+
+  return (
+    <div>
+      <h2>Authors</h2>
+      {authors.map((author, index) => (
+        <div key={index}>
+          <label>
+            Name:
+            <input
+              type="text"
+              value={author.name}
+              onChange={(e) => handleNameChange(index, e.target.value)}
+            />
+          </label>
+          <label>
+            Identifier:
+            <input
+              type="text"
+              value={author.identifier}
+              onChange={(e) => handleIdentifierChange(index, e.target.value)}
+            />
+          </label>
+        </div>
+      ))}
+      <button onClick={() => console.log(authors)}>testing</button>
+    </div>
+  );
+};
+
+export default AuthorForm;
\ No newline at end of file
diff --git a/packages/frontend/src/components/PromptForm.tsx b/packages/frontend/src/components/upload/PromptForm.tsx
similarity index 98%
rename from packages/frontend/src/components/PromptForm.tsx
rename to packages/frontend/src/components/upload/PromptForm.tsx
index 4128349..d4e27f8 100644
--- a/packages/frontend/src/components/PromptForm.tsx
+++ b/packages/frontend/src/components/upload/PromptForm.tsx
@@ -36,7 +36,7 @@ const PromptForm: React.FC<PromptFormProps> = ({ jsPsychMetadata, updateMetadata
     if (formData.author_name !== "") jsPsychMetadata.setAuthor({ "name": formData.author_name});
 
     updateMetadataString();
-    handleScreenChange('data', 'skip');
+    handleScreenChange('author', 'Save');
   };
 
   return (
diff --git a/packages/frontend/src/components/UploadData.tsx b/packages/frontend/src/components/upload/UploadData.tsx
similarity index 100%
rename from packages/frontend/src/components/UploadData.tsx
rename to packages/frontend/src/components/upload/UploadData.tsx
diff --git a/packages/frontend/src/components/UploadMetadata.tsx b/packages/frontend/src/components/upload/UploadMetadata.tsx
similarity index 100%
rename from packages/frontend/src/components/UploadMetadata.tsx
rename to packages/frontend/src/components/upload/UploadMetadata.tsx
diff --git a/packages/frontend/src/pages/Options.tsx b/packages/frontend/src/pages/Options.tsx
index 32266eb..63758dc 100644
--- a/packages/frontend/src/pages/Options.tsx
+++ b/packages/frontend/src/pages/Options.tsx
@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import FieldPopup, { FieldFormData } from '../components/FieldPopup';
-import AuthorPopup, { AuthorFormData } from '../components/AuthorPopup';
-import VariablePopup, { VariableFormData } from '../components/VariablePopup';
-import ListPopup from '../components/ListPopup';
+import FieldPopup, { FieldFormData } from '../components/popups/FieldPopup';
+import AuthorPopup, { AuthorFormData } from '../components/popups/AuthorPopup';
+import VariablePopup, { VariableFormData } from '../components/popups/VariablePopup';
+import ListPopup from '../components/popups/ListPopup';
 import JsPsychMetadata, { AuthorFields, VariableFields } from 'metadata';
 
 interface OptionsProps {
diff --git a/packages/frontend/src/pages/Upload.tsx b/packages/frontend/src/pages/Upload.tsx
index 0318e38..c4deeed 100644
--- a/packages/frontend/src/pages/Upload.tsx
+++ b/packages/frontend/src/pages/Upload.tsx
@@ -1,8 +1,9 @@
-import UploadMetadata from '../components/UploadMetadata.tsx';
-import UploadData from '../components/UploadData.tsx';
+import UploadMetadata from '../components/upload/UploadMetadata.tsx';
+import UploadData from '../components/upload/UploadData.tsx';
 import JsPsychMetadata from 'metadata';
+import AuthorForm from '../components/upload/AuthorForm.tsx';
 import { useState } from 'react';
-import PromptForm from '../components/PromptForm.tsx';
+import PromptForm from '../components/upload/PromptForm.tsx';
 
 interface UploadProps {
   jsPsychMetadata: JsPsychMetadata;
@@ -25,8 +26,11 @@ const Upload: React.FC<UploadProps> = ( { jsPsychMetadata, setPage, updateMetada
         case 'form':
           setPageNumber(2);
           break;
-        case 'data':
+        case 'author':
           setPageNumber(3);
+          break;
+        case 'data':
+          setPageNumber(4);
       }
     }
 
@@ -39,6 +43,8 @@ const Upload: React.FC<UploadProps> = ( { jsPsychMetadata, setPage, updateMetada
         return <UploadMetadata jsPsychMetadata={jsPsychMetadata} updateMetadataString={updateMetadataString} handleScreenChange={handleScreenChange}/>
       case 'form':
         return <PromptForm jsPsychMetadata={jsPsychMetadata} updateMetadataString={updateMetadataString} handleScreenChange={handleScreenChange}/>;
+      case 'author': 
+        return <AuthorForm jsPsychMetadata={jsPsychMetadata} />
       case 'data':
         return <UploadData jsPsychMetadata={jsPsychMetadata} updateMetadataString={updateMetadataString} handleScreenChange={handleScreenChange} />
     } 
@@ -57,6 +63,15 @@ const Upload: React.FC<UploadProps> = ( { jsPsychMetadata, setPage, updateMetada
                </button>; 
       case 'form':
         return; // this will be handled internally to tie behavior with the form
+      case 'author':
+        return <button 
+                className="upload-continue" 
+                onClick={() => {
+                  handleScreenChange('data');
+                  setButtonText('Skip')
+                }}>
+                  {buttonText}
+               </button>; 
       case 'data':
         return <button 
                   className="upload-continue" 
@@ -72,7 +87,7 @@ const Upload: React.FC<UploadProps> = ( { jsPsychMetadata, setPage, updateMetada
   return (
     <>
       <div className="uploadPage">
-        <h2>{pageNumber}/3</h2>
+        <h2>{pageNumber}/4</h2>
         {renderPage()}
         {renderButton()}
       </div>