diff --git a/package-lock.json b/package-lock.json index 9f2ce7bb..57faba9d 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 0a9848ac..a8193e8a 100644 --- a/package.json +++ b/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", diff --git a/src/Components/AppShell/AppShell.tsx b/src/Components/AppShell/AppShell.tsx index 809a2d56..1f84edd9 100644 --- a/src/Components/AppShell/AppShell.tsx +++ b/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 ( - - - -
- {children} -
- + + + + + +
+ {children} +
+ + ) } diff --git a/src/Components/AppShell/NavBar.tsx b/src/Components/AppShell/NavBar.tsx index b7204536..3930b1dd 100644 --- a/src/Components/AppShell/NavBar.tsx +++ b/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 }) { diff --git a/src/Components/AppShell/SetAssetsApi.tsx b/src/Components/AppShell/SetAssetsApi.tsx new file mode 100644 index 00000000..976a2e07 --- /dev/null +++ b/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 ( + <> + ) +} diff --git a/src/Components/AppShell/hooks/useAssets.tsx b/src/Components/AppShell/hooks/useAssets.tsx new file mode 100644 index 00000000..623a8681 --- /dev/null +++ b/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; + +const AssetContext = createContext({ + api: {} as AssetsApi, + setAssetsApi: () => { } +}); + +function useAssetsManager(): { + api: AssetsApi; + setAssetsApi: (api: AssetsApi) => void; +} { + const [api, setApi] = useState({} as AssetsApi); + + const setAssetsApi = useCallback((api: AssetsApi) => { + setApi(api); + }, []); + + return { api, setAssetsApi }; +} + +export const AssetsProvider: React.FunctionComponent<{ + children?: React.ReactNode +}> = ({ children }) => ( + + {children} + +); + +export const useAssetApi = (): AssetsApi => { + const { api } = useContext(AssetContext); + return api; +}; + + +export const useSetAssetApi = (): UseAssetManagerResult["setAssetsApi"] => { + const { setAssetsApi } = useContext(AssetContext); + return setAssetsApi; +} diff --git a/src/Components/Gaming/Quests.tsx b/src/Components/Gaming/Quests.tsx index f0a6604d..ba7b8e2d 100644 --- a/src/Components/Gaming/Quests.tsx +++ b/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?
diff --git a/src/Components/Gaming/hooks/useQuests.tsx b/src/Components/Gaming/hooks/useQuests.tsx index 6d845bd4..43b8a8b2 100644 --- a/src/Components/Gaming/hooks/useQuests.tsx +++ b/src/Components/Gaming/hooks/useQuests.tsx @@ -19,8 +19,6 @@ function useQuestsManager(initialOpen: boolean): { } { const [open, setOpen] = useState(initialOpen); - - const setQuestsOpen = useCallback((questOpen: boolean) => { setOpen(questOpen); console.log(open); diff --git a/src/Components/Profile/Settings.tsx b/src/Components/Profile/Settings.tsx index c68a51f9..7456ecca 100644 --- a/src/Components/Profile/Settings.tsx +++ b/src/Components/Profile/Settings.tsx @@ -56,6 +56,7 @@ export function Settings() { .then(() => navigate("/")); } + return (
diff --git a/src/Components/Templates/CardPage.tsx b/src/Components/Templates/CardPage.tsx index 0652d622..c3a9841d 100644 --- a/src/Components/Templates/CardPage.tsx +++ b/src/Components/Templates/CardPage.tsx @@ -20,7 +20,7 @@ export function CardPage({title,children, parent} : {
  • {title}
    • - + {children} diff --git a/src/Components/AppShell/DialogModal.tsx b/src/Components/Templates/DialogModal.tsx similarity index 97% rename from src/Components/AppShell/DialogModal.tsx rename to src/Components/Templates/DialogModal.tsx index 8ec0199e..74e13f5b 100644 --- a/src/Components/AppShell/DialogModal.tsx +++ b/src/Components/Templates/DialogModal.tsx @@ -43,7 +43,7 @@ const DialogModal = ({ return ( - +
    {/* Title for Card */} diff --git a/src/types.ts b/src/types.ts index cec5f371..fb8f588b 100644 --- a/src/types.ts +++ b/src/types.ts @@ -71,6 +71,11 @@ export interface ItemsApi { collectionName?: string } +export interface AssetsApi { + upload(file: Blob, title: string): any, + url: string +} + export interface UserApi { register(email: string, password: string, userName: string): Promise, login(email: string, password: string): Promise, @@ -92,7 +97,7 @@ export type UserItem = { export type Permission = { id?: string; - role: string; + role: string;S collection: string; action: PermissionAction }