Beginning author screen, finished the loading of existing data and se…

…tup the form system

packages/frontend/src/components/ListPopup.tsx → 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;

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;

packages/frontend/src/components/PromptForm.tsx → 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 (

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 {

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>