From 0d8652a703344a376f41b4324349254fd603b188 Mon Sep 17 00:00:00 2001
From: jodeleeuw <josh.deleeuw@gmail.com>
Date: Tue, 12 Mar 2024 08:58:51 -0400
Subject: [PATCH 1/2] add select component

---
 pages/admin/new.js | 41 +++++++++++++++++++++++++++--------------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/pages/admin/new.js b/pages/admin/new.js
index 1f145fc..4df1dbe 100644
--- a/pages/admin/new.js
+++ b/pages/admin/new.js
@@ -1,11 +1,6 @@
 import { customAlphabet } from "nanoid";
 import AuthCheck from "../../components/AuthCheck";
-import {
-  doc,
-  getDoc,
-  writeBatch,
-  arrayUnion,
-} from "firebase/firestore";
+import { doc, getDoc, writeBatch, arrayUnion } from "firebase/firestore";
 import { db, auth } from "../../lib/firebase";
 import { useContext, useState } from "react";
 import { UserContext } from "../../lib/context";
@@ -26,6 +21,7 @@ import {
   FormHelperText,
   VStack,
   Text,
+  Select,
 } from "@chakra-ui/react";
 
 export default function NewExperimentPage({}) {
@@ -42,7 +38,7 @@ function NewExperimentForm() {
   const [osfError, setOsfError] = useState(false);
   const [titleError, setTitleError] = useState(false);
   const [dataComponentError, setDataComponentError] = useState(false);
- 
+
   const [data, loading, error] = useDocumentData(doc(db, "users", user.uid));
 
   return (
@@ -53,8 +49,10 @@ function NewExperimentForm() {
           <Heading>Create a New Experiment</Heading>
           <FormControl id="title" isInvalid={titleError}>
             <FormLabel>Title</FormLabel>
-            <Input type="text" onChange={()=>setTitleError(false)} />
-            <FormErrorMessage color={"red"}>This field is required</FormErrorMessage>
+            <Input type="text" onChange={() => setTitleError(false)} />
+            <FormErrorMessage color={"red"}>
+              This field is required
+            </FormErrorMessage>
           </FormControl>
           <FormControl id="osf-repo" isInvalid={osfError}>
             <FormLabel>Existing OSF Project</FormLabel>
@@ -70,9 +68,24 @@ function NewExperimentForm() {
           </FormControl>
           <FormControl id="osf-component-name" isInvalid={dataComponentError}>
             <FormLabel>New OSF Data Component Name</FormLabel>
-            <Input type="text" onChange={()=>setDataComponentError(false)}/>
-            <FormErrorMessage color={"red"}>This field is required</FormErrorMessage>
-            <FormHelperText color="gray">DataPipe will create a new component with this name in the OSF project and store all data in it.</FormHelperText>
+            <Input type="text" onChange={() => setDataComponentError(false)} />
+            <FormErrorMessage color={"red"}>
+              This field is required
+            </FormErrorMessage>
+            <FormHelperText color="gray">
+              DataPipe will create a new component with this name in the OSF
+              project and store all data in it.
+            </FormHelperText>
+          </FormControl>
+          <FormControl id="osf-component-region">
+            <FormLabel>Storage Location</FormLabel>
+            <Select placeholder="Select region">
+              <option value="us">US</option>
+              <option value="de-1">EU</option>
+            </Select>
+            <FormHelperText color="gray">
+              Choose the region where the data will be stored.
+            </FormHelperText>
           </FormControl>
           <Button
             onClick={() =>
@@ -128,13 +141,13 @@ async function handleCreateExperiment(
   const useSessionLimit = false;
   const maxSessions = 1;
 
-  if(title.length === 0) {
+  if (title.length === 0) {
     setTitleError(true);
     setIsSubmitting(false);
     return;
   }
 
-  if(osfComponentName.length === 0) {
+  if (osfComponentName.length === 0) {
     setDataComponentError(true);
     setIsSubmitting(false);
     return;

From 7c7fc23a6f5d1a2ca6071e46817029a1179a0743 Mon Sep 17 00:00:00 2001
From: Josh de Leeuw <josh.deleeuw@gmail.com>
Date: Tue, 12 Mar 2024 09:31:17 -0400
Subject: [PATCH 2/2] implement region selection

---
 pages/admin/new.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/pages/admin/new.js b/pages/admin/new.js
index 4df1dbe..f5b8544 100644
--- a/pages/admin/new.js
+++ b/pages/admin/new.js
@@ -79,9 +79,11 @@ function NewExperimentForm() {
           </FormControl>
           <FormControl id="osf-component-region">
             <FormLabel>Storage Location</FormLabel>
-            <Select placeholder="Select region">
-              <option value="us">US</option>
-              <option value="de-1">EU</option>
+            <Select defaultValue="us" sx={{'> option': {background: 'black', color: 'white'}}}>
+              <option value="us">United States</option>
+              <option value="de-1">Germany - Frankfurt</option>
+              <option value="au-1">Australia - Sydney</option>
+              <option value="ca-1">Canada - Montreal</option>
             </Select>
             <FormHelperText color="gray">
               Choose the region where the data will be stored.
@@ -133,6 +135,7 @@ async function handleCreateExperiment(
   const user = auth.currentUser;
   const title = document.querySelector("#title").value;
   let osfRepo = document.querySelector("#osf-repo").value;
+  const region = document.querySelector("#osf-component-region").value;
   const osfComponentName = document.querySelector("#osf-component-name").value;
   const nConditions = 1;
   const useValidation = true;
@@ -173,7 +176,7 @@ async function handleCreateExperiment(
     }
 
     const osfResult = await fetch(
-      `https://api.osf.io/v2/nodes/${osfRepo}/children/`,
+      `https://api.osf.io/v2/nodes/${osfRepo}/children/?region=${region}`,
       {
         method: "POST",
         headers: {