basic avatar upload

package-lock.json

@@ -10,8 +10,10 @@
       "license": "MIT",
       "dependencies": {
         "@heroicons/react": "^2.0.17",
+        "@types/offscreencanvas": "^2019.7.1",
         "leaflet": "^1.9.4",
         "prop-types": "^15.8.1",
+        "react-image-crop": "^10.1.8",
         "react-leaflet": "^4.2.1",
         "react-leaflet-cluster": "^2.1.0",
         "react-router-dom": "^6.16.0",
@@ -283,6 +285,11 @@
         "@types/geojson": "*"
       }
     },
+    "node_modules/@types/offscreencanvas": {
+      "version": "2019.7.1",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.1.tgz",
+      "integrity": "sha512-+HSrJgjBW77ALieQdMJvXhRZUIRN1597L+BKvsyeiIlHHERnqjcuOLyodK3auJ3Y3zRezNKtKAhuQWYJfEgFHQ=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -3792,6 +3799,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-image-crop": {
+      "version": "10.1.8",
+      "resolved": "https://registry.npmjs.org/react-image-crop/-/react-image-crop-10.1.8.tgz",
+      "integrity": "sha512-4rb8XtXNx7ZaOZarKKnckgz4xLMvds/YrU6mpJfGhGAsy2Mg4mIw1x+DCCGngVGq2soTBVVOxx2s/C6mTX9+pA==",
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -44,8 +44,10 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.0.17",
+    "@types/offscreencanvas": "^2019.7.1",
     "leaflet": "^1.9.4",
     "prop-types": "^15.8.1",
+    "react-image-crop": "^10.1.8",
     "react-leaflet": "^4.2.1",
     "react-leaflet-cluster": "^2.1.0",
     "react-router-dom": "^6.16.0",

src/Components/AppShell/AppShell.tsx

@@ -3,26 +3,34 @@ import NavBar from './NavBar'
 import { BrowserRouter } from 'react-router-dom'
 import { ToastContainer } from 'react-toastify'
 import { QuestsProvider } from '../Gaming/hooks/useQuests'
+import { AssetsProvider, useSetAssetApi } from './hooks/useAssets'
+import { useEffect } from 'react'
+import { SetAssetsApi } from './SetAssetsApi'
+
+export function AppShell({ appName, children, assetsApi }) {
+
 
-export function AppShell({ appName, children }) {
     return (
         <BrowserRouter>
-            <QuestsProvider initialOpen={false}>
-                <ToastContainer position="top-right"
-                    autoClose={2000}
-                    hideProgressBar
-                    newestOnTop={false}
-                    closeOnClick
-                    rtl={false}
-                    pauseOnFocusLoss
-                    draggable
-                    pauseOnHover
-                    theme="light" />
-                <NavBar appName={appName}></NavBar>
-                <div id="app-content" className="tw-flex tw-!pl-[77px]">
-                    {children}
-                </div>
-            </QuestsProvider>
+            <AssetsProvider>
+                <SetAssetsApi assetsApi={assetsApi}></SetAssetsApi>
+                <QuestsProvider initialOpen={false}>
+                    <ToastContainer position="top-right"
+                        autoClose={2000}
+                        hideProgressBar
+                        newestOnTop={false}
+                        closeOnClick
+                        rtl={false}
+                        pauseOnFocusLoss
+                        draggable
+                        pauseOnHover
+                        theme="light" />
+                    <NavBar appName={appName}></NavBar>
+                    <div id="app-content" className="tw-flex tw-!pl-[77px]">
+                        {children}
+                    </div>
+                </QuestsProvider>
+            </AssetsProvider>
         </BrowserRouter>
     )
 }

src/Components/AppShell/NavBar.tsx

@@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
 import { toast } from "react-toastify";
 import QuestionMarkIcon from '@heroicons/react/24/outline/QuestionMarkCircleIcon'
 import * as React from "react";
-import DialogModal from "./DialogModal";
+import DialogModal from "../Templates/DialogModal";
 
 
 export default function NavBar({ appName}: { appName: string }) {

src/Components/AppShell/SetAssetsApi.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import { useSetAssetApi } from './hooks/useAssets'
+import { AssetsApi } from '../../types';
+import { useEffect } from 'react';
+
+export const SetAssetsApi = ({assetsApi}:{assetsApi: AssetsApi}) => {
+    const setAssetsApi = useSetAssetApi();
+
+    useEffect(() => {
+      setAssetsApi(assetsApi)
+    }, [assetsApi])
+    
+
+  return (
+    <></>
+  )
+}

src/Components/AppShell/hooks/useAssets.tsx

@@ -0,0 +1,47 @@
+import { useCallback, useState } from 'react';
+
+
+import { createContext, useContext } from "react";
+import * as React from "react";
+import { AssetsApi } from '../../../types';
+
+
+
+type UseAssetManagerResult = ReturnType<typeof useAssetsManager>;
+
+const AssetContext = createContext<UseAssetManagerResult>({
+  api: {} as AssetsApi,
+  setAssetsApi: () => { }
+});
+
+function useAssetsManager(): {
+  api: AssetsApi;
+  setAssetsApi: (api: AssetsApi) => void;
+} {
+  const [api, setApi] = useState<AssetsApi>({} as AssetsApi);
+
+  const setAssetsApi = useCallback((api: AssetsApi) => {
+    setApi(api);
+  }, []);
+
+  return { api, setAssetsApi };
+}
+
+export const AssetsProvider: React.FunctionComponent<{
+  children?: React.ReactNode
+}> = ({ children }) => (
+  <AssetContext.Provider value={useAssetsManager()}>
+    {children}
+  </AssetContext.Provider>
+);
+
+export const useAssetApi = (): AssetsApi => {
+  const { api } = useContext(AssetContext);
+  return api;
+};
+
+
+export const useSetAssetApi = (): UseAssetManagerResult["setAssetsApi"] => {
+  const { setAssetsApi } = useContext(AssetContext);
+  return setAssetsApi;
+}

src/Components/Gaming/Quests.tsx

@@ -9,14 +9,6 @@ export function Quests() {
     const setQuestsOpen = useSetQuestOpen();
     const { isAuthenticated, user } = useAuth();
 
-
-    
-    useEffect(() => {
-      console.log(questsOpen);
-      
-    }, [questsOpen])
-    
-
     return (
         <>{questsOpen? 
             <div className="tw-card tw-w-48 tw-bg-base-100 tw-shadow-xl tw-absolute tw-bottom-4 tw-left-4 tw-z-[2000]">

src/Components/Gaming/hooks/useQuests.tsx

@@ -19,8 +19,6 @@ function useQuestsManager(initialOpen: boolean): {
 } {
   const [open, setOpen] = useState<boolean>(initialOpen);
 
-
-
   const setQuestsOpen = useCallback((questOpen: boolean) => {
     setOpen(questOpen);
     console.log(open);

src/Components/Profile/Settings.tsx

@@ -56,6 +56,7 @@ export function Settings() {
       .then(() => navigate("/"));
   }
 
+  
 
   return (
     <main className="tw-flex-1 tw-overflow-y-auto tw-overflow-x-hidden tw-pt-8 tw-px-6 tw-bg-base-200 tw-min-w-80 tw-flex tw-justify-center" >

src/Components/Templates/CardPage.tsx

@@ -20,7 +20,7 @@ export function CardPage({title,children, parent} : {
             <li>{title}</li>
           </ul>
         </div>
-        <TitleCard title={title} topMargin="mt-2">
+        <TitleCard title={title} topMargin="tw-my-2" className=" tw-mb-4">
           {children}
         </TitleCard>
       </div>

src/Components/Templates/DialogModal.tsx

@@ -43,7 +43,7 @@ const DialogModal = ({
 
 
   return (
-    <dialog className='tw-card tw-shadow-xl tw-absolute tw-right-0 tw-top-0 tw-bottom-0 tw-left-0 tw-m-auto tw-transition-opacity tw-duration-300 tw-p-4'
+    <dialog className='tw-card tw-shadow-xl tw-absolute tw-right-0 tw-top-0 tw-bottom-0 tw-left-0 tw-m-auto tw-transition-opacity tw-duration-300 tw-p-4 tw-max-w-2xl'
     
       ref={ref}
       onCancel={onClose}

src/Components/Templates/TitleCard.tsx

@@ -12,7 +12,7 @@ interface TitleCardProps {
   
   export function TitleCard({title, children, topMargin, TopSideButtons, className} : TitleCardProps){
       return(
-          <div className={"tw-card tw-w-full tw-p-6 tw-bg-base-100 tw-shadow-xl tw-h-fit " + className + " " + (topMargin || "tw-mt-6")}>
+          <div className={"tw-card tw-w-full tw-p-6 tw-bg-base-100 tw-shadow-xl tw-h-fit " + (className || "") + " " + (topMargin || "tw-mt-6")}>
 
             {/* Title for Card */}
               <Subtitle styleClass={TopSideButtons ? "tw-inline-block" : ""}>

src/types.ts

@@ -71,6 +71,11 @@ export interface ItemsApi<T> {
   collectionName?: string
 }
 
+export interface AssetsApi {
+  upload(file: Blob, title: string): any,
+  url: string
+}
+
 export interface UserApi {
   register(email: string, password: string, userName: string): Promise<void>,
 	login(email: string, password: string): Promise<any>,
@@ -92,7 +97,7 @@ export type UserItem = {
 
 export type Permission = {
   id?: string;
-  role: string;
+  role: string;S
   collection: string;
   action: PermissionAction
 }