refactor data objects

Author: LinaBell

README.md

@@ -65,13 +65,21 @@ WEB_IMAGE_ASSET_ID=webImageAsset
 
 _We use data objects to store information about each implementation of the app per world._
 
-- Dropped Assets: the data object attached to the dropped assets can optionally include `questItemImage` which will be used instead of the default image when someone first interacts with the instance of Quest
+- Dropped Assets: the data object attached to the dropped assets can optionally include `questItemImage` which will be used instead of the default image when someone first interacts with the instance of Quest. Additionally it'll capture user progress to be displayed in the leaderboard
+
+  - leaderboard (`leaderboard.${profileId}`)
+
 - World: the data object attached to the world will store information for every instance of the app in a given world by sceneDropId and will persist if a specific instance is removed manually from world instead of through the Admin screen.
 
-  - itemsCollectedByUser (`scenes.${sceneDropId}.itemsCollectedByUser.${profileId}`)
-  - totalItemsCollected (`scenes.${sceneDropId}.totalItemsCollected`)
   - questItems (`scenes.${sceneDropId}.questItems.${assetId}`)
 
+- User: the data object attached to the user will store user's progress per instance of Quest across all worlds.
+  - currentStreak
+  - lastCollectedDate
+  - longestStreak
+  - totalCollected
+  - totalCollectedToday
+
 ### Helpful links
 
 - [SDK Developer docs](https://metaversecloud-com.github.io/mc-sdk-js/index.html)

client/src/App.tsx

@@ -1,26 +1,22 @@
-import { useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
 import { Route, Routes, useNavigate, useSearchParams } from "react-router-dom";
 
 // pages
 import Home from "@pages/Home";
 import Error from "@pages/Error";
 import QuestItemClicked from "@pages/QuestItemClicked";
 
-// components
-import { Loading } from "./components";
-
 // context
 import { GlobalDispatchContext } from "./context/GlobalContext";
-import { InteractiveParams, SET_INTERACTIVE_PARAMS, SET_QUEST_DETAILS, SET_VISITOR_INFO } from "./context/types";
+import { InteractiveParams, SET_HAS_INTERACTIVE_PARAMS } from "./context/types";
 
 // utils
-import { backendAPI, setupBackendAPI } from "./utils/backendAPI";
+import { setupBackendAPI } from "./utils/backendAPI";
 
 const App = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const [hasInitBackendAPI, setHasInitBackendAPI] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
 
   const dispatch = useContext(GlobalDispatchContext);
 
@@ -40,99 +36,28 @@ const App = () => {
     };
   }, [searchParams]);
 
-  const setInteractiveParams = useCallback(
-    ({
-      assetId,
-      displayName,
-      identityId,
-      interactiveNonce,
-      interactivePublicKey,
-      profileId,
-      sceneDropId,
-      uniqueName,
-      urlSlug,
-      username,
-      visitorId,
-    }: InteractiveParams) => {
-      const isInteractiveIframe = visitorId && interactiveNonce && interactivePublicKey && assetId;
+  useEffect(() => {
+    if (interactiveParams.assetId) {
       dispatch!({
-        type: SET_INTERACTIVE_PARAMS,
-        payload: {
-          assetId,
-          displayName,
-          identityId,
-          interactiveNonce,
-          interactivePublicKey,
-          isInteractiveIframe,
-          profileId,
-          sceneDropId,
-          uniqueName,
-          urlSlug,
-          username,
-          visitorId,
-        },
+        type: SET_HAS_INTERACTIVE_PARAMS,
+        payload: { hasInteractiveParams: true },
       });
-    },
-    [dispatch],
-  );
+    }
+  }, [interactiveParams]);
+
+  useEffect(() => {
+    if (!hasInitBackendAPI) setupBackend();
+  }, [hasInitBackendAPI, interactiveParams]);
 
   const setupBackend = () => {
     setupBackendAPI(interactiveParams)
       .catch((error) => {
         console.error(error?.response?.data?.message);
         navigate("*");
       })
-      .finally(() => setHasInitBackendAPI(true))
-  };
-
-  const getVisitor = () => {
-    backendAPI.get("/visitor")
-      .then((result) => {
-        dispatch!({
-          type: SET_VISITOR_INFO,
-          payload: result.data.visitor,
-        });
-      })
-      .catch((error) => {
-        console.error(error?.response?.data?.message);
-        navigate("*");
-      })
-      .finally(() => setIsLoading(false))
-  };
-
-  const getQuestDetails = () => {
-    backendAPI.get("/quest")
-      .then((result) => {
-        dispatch!({
-          type: SET_QUEST_DETAILS,
-          payload: result.data,
-        });
-      })
-      .catch((error) => {
-        console.error(error?.response?.data?.message);
-        navigate("*");
-      })
-      .finally(() => setIsLoading(false))
+      .finally(() => setHasInitBackendAPI(true));
   };
 
-  useEffect(() => {
-    if (interactiveParams.assetId) {
-      setInteractiveParams({
-        ...interactiveParams,
-      });
-    }
-  }, [interactiveParams, setInteractiveParams]);
-
-  useEffect(() => {
-    if (!hasInitBackendAPI) setupBackend();
-    else {
-      getVisitor();
-      getQuestDetails();
-    }
-  }, [hasInitBackendAPI, interactiveParams]);
-
-  if (isLoading || !hasInitBackendAPI) return <Loading />;
-
   return (
     <Routes>
       <Route element={<Home />} path="/" />

client/src/components/Admin.tsx

@@ -4,21 +4,22 @@ import { useContext, useEffect, useState } from "react";
 import { AdminForm, Loading, PlacedItems } from "./index.js";
 
 // utils
-import { backendAPI } from "@utils/backendAPI";
+import { backendAPI, setErrorMessage } from "@/utils";
 
 // context
-import { GlobalStateContext } from "@context/GlobalContext";
+import { GlobalDispatchContext, GlobalStateContext } from "@context/GlobalContext";
+import { ErrorType } from "@/context/types.js";
 
 export const Admin = () => {
   const [questItems, setQuestItems] = useState({});
   const [questItemCount, setQuestItemCount] = useState(0);
   const [areButtonsDisabled, setAreButtonsDisabled] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
-  const [errorMessage, setErrorMessage] = useState("");
 
   // context
+  const dispatch = useContext(GlobalDispatchContext);
   const { hasInteractiveParams, questDetails } = useContext(GlobalStateContext);
-  const { questItemImage } = questDetails
+  const { questItemImage } = questDetails || {};
 
   useEffect(() => {
     if (hasInteractiveParams) {
@@ -27,42 +28,42 @@ export const Admin = () => {
   }, [hasInteractiveParams]);
 
   const getQuestItems = () => {
-    setErrorMessage("");
-    backendAPI.get("/quest-items")
-      .then((result) => {
-        setQuestItems(result.data.droppedAssets)
-        setQuestItemCount(Object.keys(result.data.droppedAssets).length)
+    backendAPI
+      .get("/quest-items")
+      .then((response) => {
+        setQuestItems(response.data.droppedAssets);
+        setQuestItemCount(Object.keys(response.data.droppedAssets).length);
       })
-      .catch((error) => setErrorMessage(error?.response?.data?.message || error.message))
-      .finally(() => setIsLoading(false))
+      .catch((error) => setErrorMessage(dispatch, error as ErrorType))
+      .finally(() => setIsLoading(false));
   };
 
   const dropItem = () => {
-    setErrorMessage("");
     setAreButtonsDisabled(true);
-    backendAPI.post("/drop-quest-item")
+    backendAPI
+      .post("/drop-quest-item")
       .then(() => getQuestItems())
-      .catch((error) => setErrorMessage(error?.response?.data?.message || error.message))
-      .finally(() => setAreButtonsDisabled(false))
+      .catch((error) => setErrorMessage(dispatch, error as ErrorType))
+      .finally(() => setAreButtonsDisabled(false));
   };
 
   const removeAllQuestItems = () => {
-    setErrorMessage("");
     setAreButtonsDisabled(true);
-    backendAPI.post("/dropped-asset/remove-all-with-unique-name")
+    backendAPI
+      .post("/dropped-asset/remove-all-with-unique-name")
       .then(() => {
-        setQuestItems({})
-        setQuestItemCount(0)
+        setQuestItems({});
+        setQuestItemCount(0);
       })
-      .catch((error) => setErrorMessage(error?.response?.data?.message || error.message))
-      .finally(() => setAreButtonsDisabled(false))
+      .catch((error) => setErrorMessage(dispatch, error as ErrorType))
+      .finally(() => setAreButtonsDisabled(false));
   };
 
   if (isLoading) return <Loading />;
 
   return (
     <>
-      <AdminForm setErrorMessage={setErrorMessage} />
+      <AdminForm />
 
       <div className="container py-6 items-center justify-center">
         <h5 className="h5 flex items-center justify-center pb-4">
@@ -92,9 +93,7 @@ export const Admin = () => {
         </div>
       </div>
 
-      {questItemCount > 0 && <PlacedItems questItems={questItems} getQuestItems={getQuestItems} setErrorMessage={setErrorMessage} />}
-
-      {errorMessage && <p className="p3 text-error">{`${errorMessage}`}</p>}
+      {questItemCount > 0 && <PlacedItems questItems={questItems} getQuestItems={getQuestItems} />}
     </>
   );
-}
+};

client/src/components/AdminForm.tsx

@@ -1,61 +1,58 @@
 import { useContext, useState } from "react";
 import { useForm } from "react-hook-form";
 
-// utils
-import { backendAPI } from "@utils/backendAPI";
-
 // context
 import { GlobalStateContext } from "@context/GlobalContext";
 import { GlobalDispatchContext } from "@context/GlobalContext";
-import { SET_QUEST_DETAILS } from "@/context/types";
+import { ErrorType, SET_QUEST_DETAILS } from "@/context/types";
 
-export const AdminForm = ({ setErrorMessage }: { setErrorMessage: (value: string) => void }) => {
+// utils
+import { backendAPI, setErrorMessage } from "@/utils";
+
+export const AdminForm = () => {
   const [areButtonsDisabled, setAreButtonsDisabled] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
   // context
   const { questDetails } = useContext(GlobalStateContext);
-  const { numberAllowedToCollect, questItemImage } = questDetails
+  const { numberAllowedToCollect, questItemImage } = questDetails || {};
   const dispatch = useContext(GlobalDispatchContext);
 
-  const {
-    handleSubmit,
-    register,
-  } = useForm();
+  const { handleSubmit, register } = useForm();
 
   const onSubmit = handleSubmit((data) => {
-    const { numberAllowedToCollect, questItemImage } = data
+    const { numberAllowedToCollect, questItemImage } = data;
     setAreButtonsDisabled(true);
-    setErrorMessage("");
-    backendAPI.post("/admin-settings", { numberAllowedToCollect, questItemImage })
-      .then(() => {
+    backendAPI
+      .post("/admin-settings", { numberAllowedToCollect, questItemImage })
+      .then((response) => {
         dispatch!({
           type: SET_QUEST_DETAILS,
-          payload: { ...questDetails, numberAllowedToCollect, questItemImage },
+          payload: { questDetails: response.data.questDetails },
         });
       })
-      .catch((error) => setErrorMessage(error?.response?.data?.message || error.message))
-      .finally(() => setAreButtonsDisabled(false))
+      .catch((error) => setErrorMessage(dispatch, error as ErrorType))
+      .finally(() => setAreButtonsDisabled(false));
   });
 
   const removeQuest = () => {
-    setErrorMessage("");
     setAreButtonsDisabled(true);
     setIsLoading(true);
-    backendAPI.delete("/quest")
-      .catch((error) => setErrorMessage(error?.response?.data?.message || error.message))
+    backendAPI
+      .delete("/quest")
+      .catch((error) => setErrorMessage(dispatch, error as ErrorType))
       .finally(() => {
         setAreButtonsDisabled(false);
         setIsLoading(false);
         setShowModal(false);
-      })
+      });
   };
 
   return (
-    <div className="container grid gap-2">
+    <div className="grid gap-2">
       <hr />
-      <form onSubmit={onSubmit}>
+      <form className="grid gap-4" onSubmit={onSubmit}>
         <div className="mt-4">
           <label htmlFor="numberAllowedToCollect">Number Allowed To Collect Per Day:</label>
           <input
@@ -66,19 +63,18 @@ export const AdminForm = ({ setErrorMessage }: { setErrorMessage: (value: string
 
         <div>
           <label htmlFor="questItemImage">Quest Item Image URL:</label>
-          <input
-            className="input"
-            {...register("questItemImage", { required: true, value: questItemImage })}
-          />
+          <input className="input" {...register("questItemImage", { required: true, value: questItemImage })} />
           <p className="p3">Update image for all Quest Items in world. This will not change the Key Asset image.</p>
         </div>
 
-        <button className="btn my-2" disabled={areButtonsDisabled} type="submit">
-          Save
-        </button>
-        <button className="btn btn-danger" disabled={areButtonsDisabled} onClick={() => setShowModal(true)}>
-          Remove Quest from world
-        </button>
+        <div>
+          <button className="btn mb-2" disabled={areButtonsDisabled} type="submit">
+            Save
+          </button>
+          <button className="btn btn-danger" disabled={areButtonsDisabled} onClick={() => setShowModal(true)}>
+            Remove Quest from world
+          </button>
+        </div>
       </form>
       <hr className="mt-4 mb-2" />
 
@@ -102,4 +98,4 @@ export const AdminForm = ({ setErrorMessage }: { setErrorMessage: (value: string
       )}
     </div>
   );
-}
+};

client/src/components/AdminIconButton.tsx

@@ -0,0 +1,15 @@
+export const AdminIconButton = ({
+  setShowSettings,
+  showSettings,
+}: {
+  setShowSettings: (value: boolean) => void;
+  showSettings: boolean;
+}) => {
+  return (
+    <button className="icon-with-rounded-border mb-2" onClick={() => setShowSettings(showSettings)}>
+      <img src={`https://sdk-style.s3.amazonaws.com/icons/${showSettings ? "arrow" : "cog"}.svg`} />
+    </button>
+  );
+};
+
+export default AdminIconButton;