diff --git a/src/Components/Templates/CardPage.tsx b/src/Components/Templates/CardPage.tsx index 75ac8510..56219310 100644 --- a/src/Components/Templates/CardPage.tsx +++ b/src/Components/Templates/CardPage.tsx @@ -3,11 +3,11 @@ import * as React from "react" import {TitleCard} from "./TitleCard" -export function CardPage({title, hideTitle, children, parent} : { +export function CardPage({title, hideTitle, children, parents} : { title: string, hideTitle?: boolean, children?: React.ReactNode, - parent?: {name: string, url: string} + parents?: Array<{name: string, path: string}> }) { @@ -17,7 +17,7 @@ export function CardPage({title, hideTitle, children, parent} : {
diff --git a/src/Components/Templates/ItemViewPage.tsx b/src/Components/Templates/ItemViewPage.tsx new file mode 100644 index 00000000..a4d9df80 --- /dev/null +++ b/src/Components/Templates/ItemViewPage.tsx @@ -0,0 +1,53 @@ +import { useState, useEffect } from "react"; +import { useLocation } from "react-router-dom"; +import { CardPage } from "./CardPage"; +import { ItemsApi } from "../../types"; +import { getValue } from "../../Utils/GetValue"; + + +type breadcrumb = { + name: string, + path: string +} + + +export const ItemViewPage = ({ api, parents, itemNameField, itemTextField, itemImageField, itemSymbolField }: { api: ItemsApi, parents: Array, itemNameField: string, itemTextField: string, itemImageField: string, itemSymbolField: string }) => { + + const [item, setItem] = useState(); + + let location = useLocation(); + + + const loadProject = async () => { + if (api?.getItem) { + const project: unknown = await api?.getItem(location.pathname.split("/")[2]); + setItem(project as any); + } + } + + + + useEffect(() => { + loadProject(); + }, [api]) + + return ( + + {item && + <> + {getValue(item, itemImageField) ? +
+ +
: +
+ {getValue(item, itemSymbolField)} +
+ } +

{getValue(item, itemTextField)}

+ + + } + + + ) +} diff --git a/src/Components/Templates/ItemsIndexPage.tsx b/src/Components/Templates/ItemsIndexPage.tsx index 06401d52..15676e87 100644 --- a/src/Components/Templates/ItemsIndexPage.tsx +++ b/src/Components/Templates/ItemsIndexPage.tsx @@ -11,7 +11,7 @@ type breadcrumb = { } -export const ItemsIndexPage = ({ api, url, parameterField, breadcrumbs, itemNameField, itemTextField, itemImageField }: { api: ItemsApi, url: string, parameterField: string, breadcrumbs: Array, itemNameField: string, itemTextField: string, itemImageField: string }) => { +export const ItemsIndexPage = ({ api, url, parameterField, breadcrumbs, itemNameField, itemTextField, itemImageField, itemSymbolField }: { api: ItemsApi, url: string, parameterField: string, breadcrumbs: Array, itemNameField: string, itemTextField: string, itemImageField: string, itemSymbolField: string }) => { const [items, setItems] = useState(); @@ -32,7 +32,7 @@ export const ItemsIndexPage = ({ api, url, parameterField, breadcrumbs, itemName {breadcrumbs &&
    - {breadcrumbs.map(b =>
  • {b.name}
    • )} + {breadcrumbs.map((b,i) =>
  • {b.name}
    • )}
} {/** @@ -51,12 +51,19 @@ export const ItemsIndexPage = ({ api, url, parameterField, breadcrumbs, itemName items?.map((i, k) => { return ( - - + + {getValue(i,itemImageField) ? +
+ +
: +
+ {getValue(i,itemSymbolField)} +
+ }

{i.subname}

-

{getValue(i,itemTextField)}

+

{getValue(i, itemTextField)}

{/** *
 2
diff --git a/src/Components/Templates/index.tsx b/src/Components/Templates/index.tsx index 74b21097..ff396c16 100644 --- a/src/Components/Templates/index.tsx +++ b/src/Components/Templates/index.tsx @@ -4,3 +4,4 @@ export {MapOverlayPage} from './MapOverlayPage' export {CircleLayout} from './CircleLayout' export {MoonCalendar} from './MoonCalendar' export {ItemsIndexPage} from "./ItemsIndexPage" +export {ItemViewPage} from "./ItemViewPage" \ No newline at end of file diff --git a/src/Utils/GetValue.ts b/src/Utils/GetValue.ts index 6e78c8ff..960d7b30 100644 --- a/src/Utils/GetValue.ts +++ b/src/Utils/GetValue.ts @@ -1,5 +1,5 @@ export function getValue(obj, path) { - if (!obj) return undefined; // Return early if obj is falsy + if (!obj || typeof path !== 'string') return undefined; var pathArray = path.split('.'); // Use a different variable for the split path for (var i = 0, len = pathArray.length; i < len; i++) { diff --git a/src/index.tsx b/src/index.tsx index 7d2933b7..7ccec09d 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,7 +3,7 @@ export {AppShell, Content, SideBar} from "./Components/AppShell" export {AuthProvider, useAuth, LoginPage, SignupPage, RequestPasswordPage, SetNewPasswordPage} from "./Components/Auth" export {UserSettings, ProfileSettings, OverlayProfile, OverlayProfileSettings, OverlayUserSettings} from './Components/Profile' export {Quests, Modal} from './Components/Gaming' -export {TitleCard, CardPage, MapOverlayPage, CircleLayout, MoonCalendar, ItemsIndexPage} from './Components/Templates' +export {TitleCard, CardPage, MapOverlayPage, CircleLayout, MoonCalendar, ItemsIndexPage, ItemViewPage} from './Components/Templates' export {TextInput, TextAreaInput, SelectBox} from './Components/Input' import "./index.css" diff --git a/src/types.ts b/src/types.ts index 1ee9d13b..011f286b 100644 --- a/src/types.ts +++ b/src/types.ts @@ -79,6 +79,7 @@ export interface Tag { export interface ItemsApi { getItems(): Promise, + getItem?(item: T): Promise, createItem?(item : T): Promise, updateItem?(item : T): Promise, deleteItem?(id : string): Promise,