WIP

cypress/e2e/simple.cy.ts

@@ -1,6 +1,7 @@
 describe('Simple Test', () => {
   it('Renders elements', () => {
     cy.visit('http://localhost:5173');
+    cy.get('[data-cy="upload-tab"]').click();
     cy.get('[data-cy="dataset-id-field"]').should('be.visible');
     cy.get('[data-cy="upload-file-button"]').should('be.visible');
     cy.get('[data-cy="submit-button"]').should('be.visible');

src/App.tsx

@@ -1,30 +1,27 @@
 import { useState, useRef } from 'react';
-import { TextField, Button, Typography } from '@mui/material';
+import { TextField, Button, Typography, Tab, Tabs } from '@mui/material';
 import { SnackbarProvider, enqueueSnackbar } from 'notistack';
 import axios from 'axios';
-import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 import './App.css';
+import Upload from './components/Upload';
+import Download from './components/Download';
 import { updateURL } from './utils/constants';
 import { isErrorWithResponse } from './utils/type';
 
 function App() {
+  const [selectedTab, setSelectedTab] = useState(0);
   const [datasetID, setDatasetID] = useState<string>('');
   const [uploadedFile, setUploadedFile] = useState<File | null>(null);
   const fileInput = useRef<HTMLInputElement>(null);
 
+  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
+    setSelectedTab(newValue);
+  };
+
   function updateSelectedRepo(value: string | null) {
     setDatasetID(value ?? '');
   }
 
-  function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
-    const file = event.target.files?.[0] || null;
-    setUploadedFile(file);
-  }
-
-  function handleUpload() {
-    fileInput.current?.click();
-  }
-
   async function handleSubmit() {
     if (datasetID === '') {
       enqueueSnackbar('Error: Please enter a dataset id.', { variant: 'error' });
@@ -66,45 +63,21 @@ function App() {
         anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
         maxSnack={7}
       />
-      <div className="flex h-[70vh] flex-col items-center justify-center space-y-3">
-        <TextField
-          data-cy="dataset-id-field"
-          label="Dataset ID"
-          placeholder="dataset id"
-          required
-          type="text"
-          onChange={(event) => updateSelectedRepo(event.target.value)}
+      <Tabs centered value={selectedTab} onChange={handleTabChange}>
+        <Tab label="Download" />
+        <Tab label="Upload" data-cy="upload-tab" />
+      </Tabs>
+      {selectedTab === 0 ? (
+        <Download onSomeError={(message) => enqueueSnackbar(message, { variant: 'error' })} />
+      ) : (
+        <Upload
+          onUpdateSelectedRepo={(value) => updateSelectedRepo(value)}
+          fileInput={fileInput}
+          uploadedFile={uploadedFile}
+          setUploadedFile={setUploadedFile}
+          onHandleSubmit={() => handleSubmit()}
         />
-        {/*
-         * We have to use a button and an invisible input to trigger the file upload
-         * since MUI doesn't have a native file input.
-         * Once the button is clicked we click the invisible input through DOM manipulation
-         * to trigger the file upload.
-         */}
-        <label htmlFor="file-upload">
-          <input
-            ref={fileInput}
-            accept="*/*"
-            style={{ display: 'none' }}
-            id="file-upload"
-            type="file"
-            onChange={handleFileChange}
-          />
-          <Button
-            data-cy="upload-file-button"
-            onClick={() => handleUpload()}
-            startIcon={<CloudUploadIcon />}
-            variant="contained"
-          >
-            Upload File
-          </Button>
-        </label>
-        <Typography>{uploadedFile && `File uploaded: ${uploadedFile.name}`}</Typography>
-
-        <Button data-cy="submit-button" variant="contained" onClick={() => handleSubmit()}>
-          Submit
-        </Button>
-      </div>
+      )}
     </>
   );
 }

src/components/Download.tsx

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import { Autocomplete, TextField, CircularProgress } from '@mui/material';
+import repos from '../assets/repos.json';
+import axios from 'axios';
+
+const Download = ({ onSomeError }: { onSomeError: (message: string) => void }) => {
+  // const [repos, setRepos] = useState([]);
+  // const [loading, setLoading] = useState(false);
+  // const [fetching, setFetching] = useState(false);
+
+  return (
+    <Autocomplete
+      options={repos}
+      getOptionLabel={(option) => option.name}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          label="Select a Repository"
+          variant="outlined"
+          InputProps={{
+            ...params.InputProps,
+          }}
+        />
+      )}
+    />
+  );
+};
+
+export default Download;

src/components/Upload.tsx

@@ -0,0 +1,68 @@
+import { TextField, Button, Typography } from '@mui/material';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+
+function Upload({
+  fileInput,
+  uploadedFile,
+  setUploadedFile,
+  onUpdateSelectedRepo,
+  onHandleSubmit,
+}: {
+  onUpdateSelectedRepo: (value: string | null) => void;
+  fileInput: React.RefObject<HTMLInputElement>;
+  uploadedFile: File | null;
+  setUploadedFile: (value: File | null) => void;
+  onHandleSubmit: () => void;
+}) {
+  function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0] || null;
+    setUploadedFile(file);
+  }
+
+  function handleUpload() {
+    fileInput.current?.click();
+  }
+  return (
+    <div className="flex h-[70vh] flex-col items-center justify-center space-y-3">
+      <TextField
+        data-cy="dataset-id-field"
+        label="Dataset ID"
+        placeholder="dataset id"
+        required
+        type="text"
+        onChange={(event) => onUpdateSelectedRepo(event.target.value)}
+      />
+      {/*
+       * We have to use a button and an invisible input to trigger the file upload
+       * since MUI doesn't have a native file input.
+       * Once the button is clicked we click the invisible input through DOM manipulation
+       * to trigger the file upload.
+       */}
+      <label htmlFor="file-upload">
+        <input
+          ref={fileInput}
+          accept="*/*"
+          style={{ display: 'none' }}
+          id="file-upload"
+          type="file"
+          onChange={handleFileChange}
+        />
+        <Button
+          data-cy="upload-file-button"
+          onClick={() => handleUpload()}
+          startIcon={<CloudUploadIcon />}
+          variant="contained"
+        >
+          Upload File
+        </Button>
+      </label>
+      <Typography>{uploadedFile && `File uploaded: ${uploadedFile.name}`}</Typography>
+
+      <Button data-cy="submit-button" variant="contained" onClick={() => onHandleSubmit()}>
+        Submit
+      </Button>
+    </div>
+  );
+}
+
+export default Upload;