Merge pull request #35 from harmonydata/staging

Staging --> Release

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/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>}

src/contexts/AuthContext.js

@@ -10,7 +10,7 @@ import {
   signOut,
   onAuthStateChanged,
 } from "firebase/auth";
-import { auth } from "../firebase";
+import { auth, apiKey } from "../firebase";
 
 const AuthContext = React.createContext();
 
@@ -77,6 +77,7 @@ export function AuthProvider({ children }) {
 
   const value = {
     currentUser,
+    apiKey,
     login,
     signup,
     logout,

src/contexts/DataContext.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext } from "react";
+import React, { createContext, useCallback, useContext } from "react";
 import {
   doc,
   collection,
@@ -94,31 +94,42 @@ export function DataProvider({ children }) {
       timeout: 15000,
     });
   };
-  const match = (instruments) => {
-    return retryablePostData({
-      url: process.env.REACT_APP_API_MATCH,
-      data: { instruments: instruments, parameters: currentModel },
-      timeout: 30000,
-    });
-  };
-  const exampleInstruments = () => {
+  const match = useCallback(
+    // allow the forcing of a model
+    (instruments, model) => {
+      return retryablePostData({
+        url:
+          process.env.REACT_APP_API_MATCH + "?include_catalogue_matches=true",
+        data: {
+          instruments: instruments,
+          parameters: model || currentModel,
+        },
+        timeout: 30000,
+      });
+    },
+    [currentModel]
+  );
+
+  const exampleInstruments = useCallback(() => {
     return retryablePostData({
       url: process.env.REACT_APP_API_EXAMPLES,
       timeout: 5000,
     });
-  };
-  const getVersion = () => {
+  }, []);
+
+  const getVersion = useCallback(() => {
     return retryableGetData({
       url: process.env.REACT_APP_API_VERSION,
       timeout: 1500,
     }).then((data) => data.harmony_version || "unknown");
-  };
-  const getModels = () => {
+  }, []);
+
+  const getModels = useCallback(() => {
     return retryableGetData({
       url: process.env.REACT_APP_API_MODELS,
       timeout: 1500,
     });
-  };
+  }, []);
 
   const getSharedInstrument = async (docID) => {
     if (docID) {

src/firebase.js

@@ -2,8 +2,9 @@ import { initializeApp } from "firebase/app";
 import { getAuth } from "firebase/auth";
 import { getFirestore } from "firebase/firestore/lite";
 
+export const apiKey = "AIzaSyBQVkRjbTQD6BXCdo2JeiFfwyvGVT7bOXM";
 const app = initializeApp({
-  apiKey: "AIzaSyBQVkRjbTQD6BXCdo2JeiFfwyvGVT7bOXM",
+  apiKey: apiKey,
   authDomain: "harmony-6bd51.firebaseapp.com",
   projectId: "harmony-6bd51",
   storageBucket: "harmony-6bd51.appspot.com",