From b238ea99da1ccce4c557f504a8c2e0e58dbfbe6c Mon Sep 17 00:00:00 2001 From: Maximilian Harz Date: Fri, 7 Mar 2025 00:04:09 +0100 Subject: [PATCH] Change folder structure --- .../CardForm.tsx => Item/PopupForm.tsx} | 6 ++--- .../CardView.tsx => Item/PopupView.tsx} | 9 +++---- .../TemplateItemContext.ts | 0 src/Components/Item/index.tsx | 22 ++++++++++++++++ .../Templateify.tsx => Item/templateify.tsx} | 2 +- src/Components/Map/Layer.tsx | 3 +-- .../LayerContext.ts | 8 +++--- src/Components/Profile/index.tsx | 1 - .../TemplatePopupButton.tsx | 21 --------------- .../Profile/templateComponents/index.tsx | 26 ------------------- src/index.tsx | 1 + 11 files changed, 35 insertions(+), 64 deletions(-) rename src/Components/{Profile/templateComponents/CardForm.tsx => Item/PopupForm.tsx} (81%) rename src/Components/{Profile/templateComponents/CardView.tsx => Item/PopupView.tsx} (95%) rename src/Components/{Profile/templateComponents => Item}/TemplateItemContext.ts (100%) create mode 100644 src/Components/Item/index.tsx rename src/Components/{Profile/templateComponents/Templateify.tsx => Item/templateify.tsx} (84%) rename src/Components/{Profile/templateComponents => Map}/LayerContext.ts (78%) delete mode 100644 src/Components/Profile/templateComponents/TemplatePopupButton.tsx delete mode 100644 src/Components/Profile/templateComponents/index.tsx diff --git a/src/Components/Profile/templateComponents/CardForm.tsx b/src/Components/Item/PopupForm.tsx similarity index 81% rename from src/Components/Profile/templateComponents/CardForm.tsx rename to src/Components/Item/PopupForm.tsx index 7c3039b6..2e9045ce 100644 --- a/src/Components/Profile/templateComponents/CardForm.tsx +++ b/src/Components/Item/PopupForm.tsx @@ -1,14 +1,14 @@ import { useContext } from 'react' +import LayerContext from '#components/Map/LayerContext' import { ItemFormPopup } from '#components/Map/Subcomponents/ItemFormPopup' -import LayerContext from './LayerContext' import TemplateItemContext from './TemplateItemContext' /** - * @category Map + * @category Item */ -export const CardForm = ({ children }: { children?: React.ReactNode }) => { +export const PopupForm = ({ children }: { children?: React.ReactNode }) => { const { itemFormPopup, setItemFormPopup } = useContext(LayerContext) return ( diff --git a/src/Components/Profile/templateComponents/CardView.tsx b/src/Components/Item/PopupView.tsx similarity index 95% rename from src/Components/Profile/templateComponents/CardView.tsx rename to src/Components/Item/PopupView.tsx index 9db44706..9b452455 100644 --- a/src/Components/Profile/templateComponents/CardView.tsx +++ b/src/Components/Item/PopupView.tsx @@ -11,25 +11,23 @@ import { useItems, useAllItemsLoaded } from '#components/Map/hooks/useItems' import { useAddMarker, useAddPopup, useLeafletRefs } from '#components/Map/hooks/useLeafletRefs' import { useSetMarkerClicked, useSelectPosition } from '#components/Map/hooks/useSelectPosition' import { useGetItemTags, useAllTagsLoaded, useTags } from '#components/Map/hooks/useTags' +import LayerContext from '#components/Map/LayerContext' import { ItemViewPopup } from '#components/Map/Subcomponents/ItemViewPopup' import { encodeTag } from '#utils/FormatTags' import { hashTagRegex } from '#utils/HashTagRegex' import MarkerIconFactory from '#utils/MarkerIconFactory' import { randomColor } from '#utils/RandomColor' -import LayerContext from './LayerContext' import TemplateItemContext from './TemplateItemContext' import type { Item } from '#types/Item' import type { Tag } from '#types/Tag' import type { Popup } from 'leaflet' -// TODO Think about folder structure. This is not for profile, but for card / popup. Both can use the same template components. - /** - * @category Profile + * @category Item */ -export const CardView = ({ children }: { children?: React.ReactNode }) => { +export const PopupView = ({ children }: { children?: React.ReactNode }) => { const cardViewContext = useContext(LayerContext) const { name, @@ -43,6 +41,7 @@ export const CardView = ({ children }: { children?: React.ReactNode }) => { const filterTags = useFilterTags() const items = useItems() + const getItemTags = useGetItemTags() const addMarker = useAddMarker() const addPopup = useAddPopup() diff --git a/src/Components/Profile/templateComponents/TemplateItemContext.ts b/src/Components/Item/TemplateItemContext.ts similarity index 100% rename from src/Components/Profile/templateComponents/TemplateItemContext.ts rename to src/Components/Item/TemplateItemContext.ts diff --git a/src/Components/Item/index.tsx b/src/Components/Item/index.tsx new file mode 100644 index 00000000..f6483f62 --- /dev/null +++ b/src/Components/Item/index.tsx @@ -0,0 +1,22 @@ +import { + TextView as PlainTextView, + StartEndView as PlainStartEndView, + PopupTextInput as PlainPopupTextInput, + PopupButton as PlainPopupButton, + PopupCheckboxInput as PlainPopupCheckboxInput, + PopupTextAreaInput as PlainPopupTextAreaInput, + PopupStartEndInput as PlainPopupStartEndInput, +} from '#components/Map/Subcomponents/ItemPopupComponents' + +import { templateify } from './templateify' + +export { PopupForm } from './PopupForm' +export { PopupView as CardView } from './PopupView' + +export const TextView = templateify(PlainTextView) +export const StartEndView = templateify(PlainStartEndView) +export const PopupTextInput = templateify(PlainPopupTextInput) +export const PopupButton = templateify(PlainPopupButton) +export const PopupCheckboxInput = templateify(PlainPopupCheckboxInput) +export const PopupTextAreaInput = templateify(PlainPopupTextAreaInput) +export const PopupStartEndInput = templateify(PlainPopupStartEndInput) diff --git a/src/Components/Profile/templateComponents/Templateify.tsx b/src/Components/Item/templateify.tsx similarity index 84% rename from src/Components/Profile/templateComponents/Templateify.tsx rename to src/Components/Item/templateify.tsx index 64acfd95..fc541fcc 100644 --- a/src/Components/Profile/templateComponents/Templateify.tsx +++ b/src/Components/Item/templateify.tsx @@ -4,7 +4,7 @@ import ItemContext from './TemplateItemContext' import type { Item } from '#types/Item' -export function Templateify(Component: React.ComponentType) { +export function templateify(Component: React.ComponentType) { const TemplateComponent = (props: T) => { const item = useContext(ItemContext) diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx index ad3f3556..6ca86600 100644 --- a/src/Components/Map/Layer.tsx +++ b/src/Components/Map/Layer.tsx @@ -1,9 +1,8 @@ import { useEffect, useState } from 'react' -import LayerContext from '#components/Profile/templateComponents/LayerContext' - import { useSetItemsApi, useSetItemsData } from './hooks/useItems' import { useAddTag } from './hooks/useTags' +import LayerContext from './LayerContext' import type { LayerProps } from '#types/LayerProps' import type { Tag } from '#types/Tag' diff --git a/src/Components/Profile/templateComponents/LayerContext.ts b/src/Components/Map/LayerContext.ts similarity index 78% rename from src/Components/Profile/templateComponents/LayerContext.ts rename to src/Components/Map/LayerContext.ts index 3564e298..06727baa 100644 --- a/src/Components/Profile/templateComponents/LayerContext.ts +++ b/src/Components/Map/LayerContext.ts @@ -2,8 +2,6 @@ import { createContext } from 'react' import type { ItemFormPopupProps } from '#types/ItemFormPopupProps' -// Where should we define defaults, here or in Layer.tsx? - interface LayerContextType { name: string markerDefaultColor: string @@ -16,9 +14,9 @@ interface LayerContextType { const LayerContext = createContext({ name: '', - markerDefaultColor: '#777', - markerDefaultColor2: 'RGBA(35, 31, 32, 0.2)', - markerShape: 'circle', + markerDefaultColor: '', + markerDefaultColor2: '', + markerShape: '', markerIcon: '', itemFormPopup: undefined, setItemFormPopup: undefined, diff --git a/src/Components/Profile/index.tsx b/src/Components/Profile/index.tsx index 3ff3f845..595a9c7f 100644 --- a/src/Components/Profile/index.tsx +++ b/src/Components/Profile/index.tsx @@ -2,4 +2,3 @@ export { UserSettings } from './UserSettings' // export { PlusButton } from './Subcomponents/PlusButton' export { ProfileView } from './ProfileView' export { ProfileForm } from './ProfileForm' -export * from './templateComponents' diff --git a/src/Components/Profile/templateComponents/TemplatePopupButton.tsx b/src/Components/Profile/templateComponents/TemplatePopupButton.tsx deleted file mode 100644 index ea6e4b96..00000000 --- a/src/Components/Profile/templateComponents/TemplatePopupButton.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { useContext } from 'react' - -import { PopupButton } from '#components/Map/Subcomponents/ItemPopupComponents' - -import ItemContext from './TemplateItemContext' - -import type { JSXElementConstructor } from 'react' - -type OmitItem> = Omit< - React.ComponentProps, - 'item' -> - -/** - * @category Map - */ -export const TemplatePopupButton = (props: OmitItem) => { - const item = useContext(ItemContext) - - return -} diff --git a/src/Components/Profile/templateComponents/index.tsx b/src/Components/Profile/templateComponents/index.tsx deleted file mode 100644 index 46be2158..00000000 --- a/src/Components/Profile/templateComponents/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { - TextView as PlainTextView, - StartEndView as PlainStartEndView, - PopupTextInput as PlainPopupTextInput, - PopupButton as PlainPopupButton, - PopupCheckboxInput as PlainPopupCheckboxInput, - PopupTextAreaInput as PlainPopupTextAreaInput, - PopupStartEndInput as PlainPopupStartEndInput, -} from '#components/Map/Subcomponents/ItemPopupComponents' - -import { Templateify } from './Templateify' - -export { CardForm } from './CardForm' -export { CardView } from './CardView' - -export const TextView = Templateify(PlainTextView) -export const StartEndView = Templateify(PlainStartEndView) -export const PopupTextInput = Templateify(PlainPopupTextInput) -export const PopupButton = Templateify(PlainPopupButton) -export const PopupCheckboxInput = Templateify(PlainPopupCheckboxInput) -export const PopupTextAreaInput = Templateify(PlainPopupTextAreaInput) -export const PopupStartEndInput = Templateify(PlainPopupStartEndInput) - -export const Test = () => { - return -} diff --git a/src/index.tsx b/src/index.tsx index b84d77a2..07ec6212 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -8,6 +8,7 @@ export * from './Components/Profile' export * from './Components/Gaming' export * from './Components/Templates' export * from './Components/Input' +export * from './Components/Item' declare global { interface Window {