Undo hotfix

.env

@@ -1,4 +1,4 @@
-REACT_APP_API_URL=https://api.harmonydata.ac.uk
+REACT_APP_API_URL=https://api.harmonydata.ac.uk/
 REACT_APP_API_EXAMPLES=$REACT_APP_API_URL/text/examples
 REACT_APP_API_PARSE=$REACT_APP_API_URL/text/parse
 REACT_APP_API_MATCH=$REACT_APP_API_URL/text/match

.env.development

@@ -1,4 +1,4 @@
-REACT_APP_API_URL=https://harmonystagingtmp.azurewebsites.net/
+REACT_APP_API_URL=https://api.harmonydata.ac.uk/
 REACT_APP_API_EXAMPLES=$REACT_APP_API_URL/text/examples
 REACT_APP_API_PARSE=$REACT_APP_API_URL/text/parse
 REACT_APP_API_MATCH=$REACT_APP_API_URL/text/match

corsscamp.json

@@ -0,0 +1,8 @@
+[
+    {
+      "origin": ["https://www.delosis.com"],
+      "method": ["PUT"],
+      "responseHeader": ["Content-Type"],
+      "maxAgeSeconds": 3600
+    }
+]

package.json

@@ -22,6 +22,7 @@
     "react-dom": "^18.3.1",
     "react-drag-drop-files": "^2.3.10",
     "react-ga4": "^2.1.0",
+    "react-google-drive-picker": "^1.2.2",
     "react-pdf": "^9.0.0",
     "react-router-dom": "^5.3.4",
     "react-toastify": "^9.1.3",

src/components/App.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect, useMemo, useCallback } from "react";
 import {
   Container,
   Box,
@@ -19,6 +19,7 @@ import {
   ThemeProvider,
   responsiveFontSizes,
 } from "@mui/material/styles";
+import { simplifyApi } from "../utilities/simplifyApi";
 import HarmonyAppBar from "./AppBar";
 import pattern from "../img/pattern.svg";
 import logoWithText from "../img/Logo-04-min.svg";
@@ -34,8 +35,10 @@ import MakeMeJSON from "./MakeMeJSON.js";
 import "react-toastify/dist/ReactToastify.css";
 import YouTube from "react-youtube";
 import "../css/youtube.css";
+import { useHistory } from "react-router-dom";
 
 function App() {
+  const history = useHistory();
   const [fullscreen, setFullscreen] = useState(false);
   const [existingInstruments, setExistingInstruments] = useState([]);
   const [apiData, setApiData] = useState({});
@@ -46,7 +49,13 @@ function App() {
   });
   const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
   const [mode, setMode] = useState();
-  const { storeHarmonisation, reportRating, exampleInstruments } = useData();
+  const {
+    storeHarmonisation,
+    reportRating,
+    exampleInstruments,
+    match,
+    currentModel,
+  } = useData();
   const [ratingValue, setRatingValue] = useState();
   const [computedMatches, setComputedMatches] = useState();
   const [fileInfos, setFileInfos] = useState();
@@ -137,6 +146,23 @@ function App() {
       })[0];
   };
 
+  const executeMatch = useCallback(
+    (forceModel) => {
+      if (fileInfos)
+        return match(fileInfos, forceModel).then((data) => {
+          let simpleApi = simplifyApi(data, fileInfos);
+          setApiData(simpleApi);
+        });
+    },
+    [history, fileInfos]
+  );
+
+  useEffect(() => {
+    if (window.location.href.includes("/model")) {
+      executeMatch(currentModel);
+    }
+  }, [currentModel, executeMatch]);
+
   const makePublicShareLink = () => {
     let h = {};
     h.apiData = apiData;
@@ -461,9 +487,9 @@ function App() {
                   </Route>
                   <Route path="/import/:importId">
                     <Upload
+                      executeMatch={executeMatch}
                       appFileInfos={fileInfos}
                       setAppFileInfos={setFileInfos}
-                      setApiData={setApiData}
                       existingInstruments={existingInstruments}
                       ReactGA={ReactGA}
                     />
@@ -472,7 +498,7 @@ function App() {
                     <Upload
                       appFileInfos={fileInfos}
                       setAppFileInfos={setFileInfos}
-                      setApiData={setApiData}
+                      executeMatch={executeMatch}
                       existingInstruments={existingInstruments}
                       ReactGA={ReactGA}
                     />

src/components/AppBar.js

@@ -127,8 +127,9 @@ function HarmonyAppBar() {
           </Box>
 
           <Box sx={{ flexGrow: 0 }}>
-            <Tooltip title="My Harmony">
+            <Tooltip key="My Harmony" title="My Harmony">
               <Avatar
+                key={(currentUser && currentUser.uid) || "anonUser"}
                 src={currentUser && currentUser.photoURL}
                 imgProps={{ referrerPolicy: "no-referrer" }}
                 onClick={handleOpenUserMenu}
@@ -219,8 +220,11 @@ function HarmonyAppBar() {
                 </MenuItem>
               ))}
               {!currentUser && [
-                <Divider />,
-                <p style={{ margin: "0 0.5rem", textAlign: "center" }}>
+                <Divider key="oauthSigninDiv" />,
+                <p
+                  key="oauthSigninText"
+                  style={{ margin: "0 0.5rem", textAlign: "center" }}
+                >
                   Signing in with one of the OAuth providers below allows you
                   access to My Harmony where you can save and share your
                   harmonisations.
@@ -259,7 +263,7 @@ function HarmonyAppBar() {
                   </Typography>
                 </MenuItem>
               )}
-              <Divider />
+              <Divider key="versionDiv" />
               {apiVersion && (
                 <Typography sx={{ mx: 1 }}>
                   Harmony API version: {apiVersion}

src/components/GoogleDriveImport.js

@@ -1,10 +1,47 @@
-import React from "react";
+import React, { useState } from "react";
 import { Box, Button } from "@mui/material";
-
+import { useAuth } from "../contexts/AuthContext";
+import useDrivePicker from "react-google-drive-picker";
 function GoogleDriveImport({ filesReceiver, sx }) {
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
+  const [openPicker, authResponse] = useDrivePicker();
+  const { apiKey, currentUser } = useAuth();
+
+  const handleOpenPicker = () => {
+    const userOAuthToken = currentUser.accessToken;
+
+    const handleOpenPicker = () => {
+      console.log(currentUser);
+      console.log(apiKey);
+      openPicker({
+        clientId:
+          "914732561143-d46nnko41krb3vo1lbif9khmcta8k836.apps.googleusercontent.com",
+        developerKey: apiKey,
+        viewId: "DOCS",
+        //token: currentUser.accessToken, // pass oauth token in case you already have one
+        showUploadView: false,
+        showUploadFolders: false,
+        supportDrives: false,
+        multiselect: true,
+        // customViews: customViewsArray, // custom view
+        callbackFunction: (data) => {
+          if (data.action === "cancel") {
+            console.log("User clicked cancel/close button");
+          }
+          console.log(data);
+        },
+      });
+    };
+  };
+
   return (
     <Box sx={sx}>
-      <Button variant="contained" size="large" sx={{ mx: "auto" }}>
+      <Button
+        variant="contained"
+        size="large"
+        sx={{ mx: "auto" }}
+        onClick={() => handleOpenPicker()}
+      >
         <img
           style={{ height: "2rem", marginRight: 10 }}
           src={require("../img/google-drive.png")}

src/components/Upload.js

@@ -7,7 +7,8 @@ import React, {
   useEffect,
 } from "react";
 import DragDrop from "./DragDrop";
-import GoogleDriveImport from "./GoogleDriveImport";
+// This requires more finessing to request the additional permissions needed smoothly - it may require google approval before it can be enabled
+//import GoogleDriveImport from "./GoogleDriveImport";
 import { useData } from "../contexts/DataContext";
 import { useParams } from "react-router-dom";
 import {
@@ -44,7 +45,7 @@ import { Base64 } from "js-base64";
 export default function Upload({
   appFileInfos,
   setAppFileInfos,
-  setApiData,
+  executeMatch,
   existingInstruments,
   ReactGA,
 }) {
@@ -116,9 +117,7 @@ export default function Upload({
 
         // if valid import - adding to the existing fileinfos - App contains a beforeunload to stash file infors between loads within session.
         if (imported.every((inst) => isValidImport(inst))) {
-          imported.map(
-            (i) => (i.instrument_id = "Imported" + String(new Date().getTime()))
-          );
+          imported.map((i) => (i.instrument_id = "Imported_" + Math.random()));
           setFileInfos([...fileInfos].concat(imported));
           syncFileInfos();
           return imported.length;
@@ -129,6 +128,7 @@ export default function Upload({
       toast.promise(
         new Promise((resolve, reject) => {
           if (importId.length > 20 && Base64.isValid(importId)) {
+            console.log("decoded", Base64.decode(importId));
             // Support the whole instrument being presented as a base64 encoded instrument object - This will only work for small instruments but enhances privacy and speed
             try {
               let imported = JSON.parse(Base64.decode(importId));
@@ -608,8 +608,10 @@ export default function Upload({
         state={!!importFeedback}
         setState={setImportFeedback}
       />
-
       <DragDrop filesReceiver={filesReceiver} sx={{ mt: "2rem" }} />
+      {/* //REMOVING for now - the firebase auth tokens do not cover the scopes for
+      drive access and we would need to request additional permissions as well
+      as get validated by google to enable this
       {currentUser &&
         currentUser.providerData &&
         currentUser.providerData
@@ -619,7 +621,7 @@ export default function Upload({
             filesReceiver={filesReceiver}
             sx={{ display: "flex", width: "100%", mt: "1rem" }}
           />
-        )}
+        )} */}
       <Stack
         direction={"row"}
         spacing={1}
@@ -656,15 +658,24 @@ export default function Upload({
             })
           : ""}
       </Box>
-
       <Button
         variant="contained"
         size="large"
         sx={{ margin: "2rem" }}
         disabled={!fileInfos || fileInfos.length === 0 || loading}
         onClick={() => {
+          console.log("executeMatch", executeMatch);
           setLoading(true);
-          match(fileInfos)
+          executeMatch()
+            .then((_) => {
+              history.push("/model");
+              setLoading(false);
+            })
+            .catch((e) => {
+              console.log(e);
+              setMatchError(true);
+            });
+          /*  match(fileInfos)
             .then((data) => {
               let simpleApi = simplifyApi(data, fileInfos);
               setApiData(simpleApi);
@@ -675,7 +686,7 @@ export default function Upload({
             .catch((e) => {
               console.log(e);
               setMatchError(true);
-            });
+            }); */
         }}
       >
         {!loading && <Typography>Harmonise</Typography>}