Merge branch 'master' into release

Author: ronnyTodgers

.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

src/components/App.js

@@ -35,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({});
@@ -152,7 +154,7 @@ function App() {
           setApiData(simpleApi);
         });
     },
-    [match, fileInfos]
+    [history, fileInfos]
   );
 
   useEffect(() => {

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/conf/theme.ts

@@ -1,18 +1,18 @@
 import "../css/Pragmatica.css";
 
-export const getDesignTokens = (mode) => ({
+export const getDesignTokens = (mode: string | undefined) => ({
   typography: {
     body1: {
       fontFamily: "Pragmatica, sans-serif",
       fontWeight: 300,
       lineHeight: "150%",
       fontSize: "0.9rem",
-      "@media (min-width:600px)":{
+      "@media (min-width:600px)": {
         fontSize: "1rem",
       },
-      "@media (min-width:900px)":{
+      "@media (min-width:900px)": {
         fontSize: "1.1rem",
-      }
+      },
     },
     caption: {
       fontFamily: "Pragmatica, sans-serif",
@@ -26,8 +26,8 @@ export const getDesignTokens = (mode) => ({
   },
   palette: {
     mode,
-    ...(mode === 'light'
-      ?{
+    ...(mode === "light"
+      ? {
           primary: {
             main: "#2b45ed",
           },
@@ -39,10 +39,10 @@ export const getDesignTokens = (mode) => ({
             paper: "#FEFCFB",
           },
           text: {
-            primary: "#131854"
-          }
-        }:
-        //Dark Mode
+            primary: "#131854",
+          },
+        }
+      : //Dark Mode
         {
           primary: {
             main: "#0de5b2",
@@ -55,10 +55,10 @@ export const getDesignTokens = (mode) => ({
             paper: "#131854",
           },
           text: {
-            primary: "#FEFCFB"
-          }
-        })
-      }
+            primary: "#FEFCFB",
+          },
+        }),
+  },
 });
 
 export const getThemedComponents = (mode) => ({
@@ -101,18 +101,18 @@ export const getThemedComponents = (mode) => ({
             },
           },
         }),
-        // Both Modes
-        MuiInputBase: {
-          styleOverrides: {
-            root: {
-              "& input": {
-                "&:-webkit-autofill": {
-                  transition:
-                    "background-color 50000s ease-in-out 0s, color 50000s ease-in-out 0s",
-                },
-              },
+    // Both Modes
+    MuiInputBase: {
+      styleOverrides: {
+        root: {
+          "& input": {
+            "&:-webkit-autofill": {
+              transition:
+                "background-color 50000s ease-in-out 0s, color 50000s ease-in-out 0s",
             },
           },
-        }
+        },
+      },
+    },
   },
 });

src/contexts/DataContext.js

@@ -78,15 +78,30 @@ export function DataProvider({ children }) {
             signal: controller.signal,
           });
           clearTimeout(id);
+          // If successful, resolve immediately
+          if (response.ok) {
+            resolve(response.json());
+            return; // Exit the loop and promise
+          }
         } catch (e) {
-          console.log(e);
-          reject(e);
+          console.log("Get rejection", e);
+          // Only reject if there are no more retries
+          if (retries === 0) {
+            reject(e);
+          }
         }
         retries--;
+        if (retries > 0) {
+          await new Promise((resolve) => setTimeout(resolve, 1000)); // Wait 1 second
+        }
+      }
+      // If the loop completes without a successful response, reject
+      if (!(response && response.ok)) {
+        reject(new Error("Failed to fetch data after multiple retries"));
       }
-      resolve(response.json());
     });
   };
+
   const parse = (allFiles) => {
     return retryablePostData({
       url: process.env.REACT_APP_API_PARSE,
@@ -120,14 +135,14 @@ export function DataProvider({ children }) {
   const getVersion = useCallback(() => {
     return retryableGetData({
       url: process.env.REACT_APP_API_VERSION,
-      timeout: 1500,
+      timeout: 2500,
     }).then((data) => data.harmony_version || "unknown");
   }, []);
 
   const getModels = useCallback(() => {
     return retryableGetData({
       url: process.env.REACT_APP_API_MODELS,
-      timeout: 1500,
+      timeout: 2500,
     });
   }, []);