)
export default SubHeader
diff --git a/src/Components/Profile/Subcomponents/RelationCard.tsx b/src/Components/Profile/Subcomponents/RelationCard.tsx
index ea2c294..277e1ae 100644
--- a/src/Components/Profile/Subcomponents/RelationCard.tsx
+++ b/src/Components/Profile/Subcomponents/RelationCard.tsx
@@ -1,16 +1,16 @@
// eslint-disable-next-line react/prop-types
const RelationCard = ({ title, description, imageSrc }) => (
-
- {imageSrc && (
-
-
-
- )}
-
-
{title}
-
{description}
-
+
+ {imageSrc && (
+
+
+
+ )}
+
+
{title}
+
{description}
+
)
export default RelationCard
diff --git a/src/Components/Profile/Subcomponents/SocialShareBar.tsx b/src/Components/Profile/Subcomponents/SocialShareBar.tsx
index b7fb67e..f1f7656 100644
--- a/src/Components/Profile/Subcomponents/SocialShareBar.tsx
+++ b/src/Components/Profile/Subcomponents/SocialShareBar.tsx
@@ -1,18 +1,19 @@
import SocialShareButton from './SocialShareButton'
-// eslint-disable-next-line react/prop-types
-const SocialShareBar = ({ url, title, platforms = ['facebook', 'twitter', 'linkedin', 'xing', 'email'] }) => {
+const SocialShareBar = ({
+ // eslint-disable-next-line react/prop-types
+ url,
+ // eslint-disable-next-line react/prop-types
+ title,
+ // eslint-disable-next-line react/prop-types
+ platforms = ['facebook', 'twitter', 'linkedin', 'xing', 'email'],
+}) => {
return (
-
- {platforms.map((platform) => (
-
- ))}
-
+
+ {platforms.map((platform) => (
+
+ ))}
+
)
}
diff --git a/src/Components/Profile/Subcomponents/SocialShareButton.tsx b/src/Components/Profile/Subcomponents/SocialShareButton.tsx
index 0b5b2ca..8ccdedb 100644
--- a/src/Components/Profile/Subcomponents/SocialShareButton.tsx
+++ b/src/Components/Profile/Subcomponents/SocialShareButton.tsx
@@ -4,49 +4,49 @@ const platformConfigs = {
facebook: {
shareUrl: 'https://www.facebook.com/sharer/sharer.php?u={url}',
icon: (
-
+
),
- bgColor: '#3b5998'
+ bgColor: '#3b5998',
},
twitter: {
shareUrl: 'https://twitter.com/intent/tweet?text={title}:%20{url}',
icon: (
-
+
),
- bgColor: '#55acee'
+ bgColor: '#55acee',
},
linkedin: {
shareUrl: 'http://www.linkedin.com/shareArticle?mini=true&url={url}&title={title}',
icon: (
-
+
),
- bgColor: '#4875b4'
+ bgColor: '#4875b4',
},
xing: {
shareUrl: 'https://www.xing-share.com/app/user?op=share;sc_p=xing-share;url={url}',
icon: (
-
+
),
- bgColor: '#026466'
+ bgColor: '#026466',
},
email: {
shareUrl: 'mailto:?subject={title}&body={url}',
icon: (
-
+
),
- bgColor: '#444444'
- }
+ bgColor: '#444444',
+ },
}
// eslint-disable-next-line react/prop-types
@@ -63,18 +63,18 @@ const SocialShareButton = ({ platform, url, title }) => {
.replace('{title}', encodeURIComponent(title))
return (
-
- {React.cloneElement(icon, { className: 'tw-w-4 tw-h-4 tw-fill-current' })}
-
+
+ {React.cloneElement(icon, { className: 'tw-w-4 tw-h-4 tw-fill-current' })}
+
)
}
diff --git a/src/Components/Profile/Subcomponents/TagsWidget.tsx b/src/Components/Profile/Subcomponents/TagsWidget.tsx
index 79a71d2..753ac6e 100644
--- a/src/Components/Profile/Subcomponents/TagsWidget.tsx
+++ b/src/Components/Profile/Subcomponents/TagsWidget.tsx
@@ -29,12 +29,20 @@ export const TagsWidget = ({ placeholder, containerStyle, defaultTags, onUpdate
const { key } = e
const trimmedInput = input.trim()
- // eslint-disable-next-line react/prop-types
- if ((key === 'Enter' || key === ',') && trimmedInput.length && !defaultTags.some(tag => tag.name.toLocaleLowerCase() === trimmedInput.toLocaleLowerCase())) {
+ if (
+ (key === 'Enter' || key === ',') &&
+ trimmedInput.length &&
+ // eslint-disable-next-line react/prop-types
+ !defaultTags.some((tag) => tag.name.toLocaleLowerCase() === trimmedInput.toLocaleLowerCase())
+ ) {
e.preventDefault()
- const newTag = tags.find(t => t.name === trimmedInput.toLocaleLowerCase())
+ const newTag = tags.find((t) => t.name === trimmedInput.toLocaleLowerCase())
newTag && onUpdate([...currentTags, newTag])
- !newTag && onUpdate([...currentTags, { id: crypto.randomUUID(), name: encodeTag(trimmedInput), color: randomColor() }])
+ !newTag &&
+ onUpdate([
+ ...currentTags,
+ { id: crypto.randomUUID(), name: encodeTag(trimmedInput), color: randomColor() },
+ ])
setInput('')
setPushFilteredSuggestions([])
}
@@ -61,10 +69,14 @@ export const TagsWidget = ({ placeholder, containerStyle, defaultTags, onUpdate
const onSelected = (tag) => {
// eslint-disable-next-line react/prop-types
- if (!defaultTags.some(t => t.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())) {
- const newTag = tags.find(t => t.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())
+ if (!defaultTags.some((t) => t.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())) {
+ const newTag = tags.find((t) => t.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())
newTag && onUpdate([...currentTags, newTag])
- !newTag && onUpdate([...currentTags, { id: crypto.randomUUID(), name: tag.name.toLocaleLowerCase(), color: randomColor() }])
+ !newTag &&
+ onUpdate([
+ ...currentTags,
+ { id: crypto.randomUUID(), name: tag.name.toLocaleLowerCase(), color: randomColor() },
+ ])
setInput('')
setPushFilteredSuggestions([])
}
@@ -76,27 +88,45 @@ export const TagsWidget = ({ placeholder, containerStyle, defaultTags, onUpdate
onKeyDown,
onKeyUp,
onChange,
- className: 'tw-bg-transparent tw-w-fit tw-mt-5 tw-h-fit'
+ className: 'tw-bg-transparent tw-w-fit tw-mt-5 tw-h-fit',
}
/* eslint-disable react/prop-types */
return (
-
{
- setFocusInput(true)
- setTimeout(() => {
- setFocusInput(false)
- }, 200)
- }} className={`tw-input tw-input-bordered tw-cursor-text ${containerStyle}`}>
+
{
+ setFocusInput(true)
+ setTimeout(() => {
+ setFocusInput(false)
+ }, 200)
+ }}
+ className={`tw-input tw-input-bordered tw-cursor-text ${containerStyle}`}
+ >
- {defaultTags.map((tag) => (
-
-
-
-
{decodeTag(tag.name)}
-
-
- ))}
-
onSelected(tag)}/>
+ {defaultTags.map((tag) => (
+
+
+
+
+
{decodeTag(tag.name)}
+
)
diff --git a/src/Components/Profile/Templates/OnepagerForm.tsx b/src/Components/Profile/Templates/OnepagerForm.tsx
index 0ab2501..cc8e756 100644
--- a/src/Components/Profile/Templates/OnepagerForm.tsx
+++ b/src/Components/Profile/Templates/OnepagerForm.tsx
@@ -4,51 +4,55 @@ import { Item, Tag } from '../../../types'
import { TextAreaInput, TextInput } from '../../Input'
import ComboBoxInput from '../../Input/ComboBoxInput'
-export const OnepagerForm = ({ item, state, setState }: {
- state: {
- color: string;
- id: string;
- groupType: string;
- status: string;
- name: string;
- subname: string;
- text: string;
- contact: string;
- telephone: string;
- nextAppointment: string;
- image: string;
- markerIcon: string;
- offers: Tag[];
- needs: Tag[];
- relations: Item[];
- },
- setState: React.Dispatch
>,
- item: Item
+export const OnepagerForm = ({
+ item,
+ state,
+ setState,
+}: {
+ state: {
+ color: string
+ id: string
+ groupType: string
+ status: string
+ name: string
+ subname: string
+ text: string
+ contact: string
+ telephone: string
+ nextAppointment: string
+ image: string
+ markerIcon: string
+ offers: Tag[]
+ needs: Tag[]
+ relations: Item[]
+ }
+ setState: React.Dispatch>
+ item: Item
}) => {
useEffect(() => {
switch (state.groupType) {
case 'wuerdekompass':
- setState(prevState => ({
+ setState((prevState) => ({
...prevState,
color: item?.layer?.menuColor || '#1A5FB4',
markerIcon: 'group',
- image: '59e6a346-d1ee-4767-9e42-fc720fb535c9'
+ image: '59e6a346-d1ee-4767-9e42-fc720fb535c9',
}))
break
case 'themenkompass':
- setState(prevState => ({
+ setState((prevState) => ({
...prevState,
color: '#26A269',
markerIcon: 'group',
- image: '59e6a346-d1ee-4767-9e42-fc720fb535c9'
+ image: '59e6a346-d1ee-4767-9e42-fc720fb535c9',
}))
break
case 'liebevoll.jetzt':
- setState(prevState => ({
+ setState((prevState) => ({
...prevState,
color: '#E8B620',
markerIcon: 'liebevoll.jetzt',
- image: 'e735b96c-507b-471c-8317-386ece0ca51d'
+ image: 'e735b96c-507b-471c-8317-386ece0ca51d',
}))
break
@@ -61,104 +65,134 @@ export const OnepagerForm = ({ item, state, setState }: {
const typeMapping = [
{ value: 'wuerdekompass', label: 'Regional-Gruppe' },
{ value: 'themenkompass', label: 'Themen-Gruppe' },
- { value: 'liebevoll.jetzt', label: 'liebevoll.jetzt' }
+ { value: 'liebevoll.jetzt', label: 'liebevoll.jetzt' },
]
const statusMapping = [
{ value: 'active', label: 'aktiv' },
{ value: 'in_planning', label: 'in Planung' },
- { value: 'paused', label: 'pausiert' }
+ { value: 'paused', label: 'pausiert' },
]
return (
-
-
-
-
- setState(prevState => ({
- ...prevState,
- groupType: v
- }))}
- />
-
-
-
- setState(prevState => ({
- ...prevState,
- status: v
- }))}
- />
-
-
+
+
+
+
+
+ setState((prevState) => ({
+ ...prevState,
+ groupType: v,
+ }))
+ }
+ />
+
+
+
+
+ setState((prevState) => ({
+ ...prevState,
+ status: v,
+ }))
+ }
+ />
+
+
-
-
- setState(prevState => ({
- ...prevState,
- contact: v
- }))}
- />
-
+
+
+
+ setState((prevState) => ({
+ ...prevState,
+ contact: v,
+ }))
+ }
+ />
+
-
-
- setState(prevState => ({
- ...prevState,
- telephone: v
- }))}
- />
-
+
+
+
+ setState((prevState) => ({
+ ...prevState,
+ telephone: v,
+ }))
+ }
+ />
+
-
-
- setState(prevState => ({
- ...prevState,
- nextAppointment: v
- }))}
- inputStyle="tw-h-24"
- />
-
+
+
+
+ setState((prevState) => ({
+ ...prevState,
+ nextAppointment: v,
+ }))
+ }
+ inputStyle='tw-h-24'
+ />
+
-
-
- setState(prevState => ({
- ...prevState,
- text: v
- }))}
- inputStyle="tw-h-48"
- />
-
-
+
+
+
+ setState((prevState) => ({
+ ...prevState,
+ text: v,
+ }))
+ }
+ inputStyle='tw-h-48'
+ />
+
+
- ()
const items = useItems()
useEffect(() => {
- setProfileOwner(items.find(i => (i.user_created?.id === item.user_created?.id) && i.layer?.itemType.name === userType))
- // eslint-disable-next-line react-hooks/exhaustive-deps
+ setProfileOwner(
+ items.find(
+ (i) => i.user_created?.id === item.user_created?.id && i.layer?.itemType.name === userType,
+ ),
+ )
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [item, items])
const typeMapping = {
wuerdekompass: 'Regional-Gruppe',
themenkompass: 'Themenkompass-Gruppe',
- 'liebevoll.jetzt': 'liebevoll.jetzt'
+ 'liebevoll.jetzt': 'liebevoll.jetzt',
}
const groupType = item.group_type ? item.group_type : 'default'
@@ -25,47 +29,50 @@ export const OnepagerView = ({ item, userType }:{item: Item, userType: string})
return (
-
+
- {item.user_created.first_name && (
-
- )}
-
- {/* Description Section */}
-
+
+ {item.user_created.first_name && (
+
+ )}
+ {/* Description Section */}
+
-
-
- {/* Next Appointment Section */}
- {item.next_appointment && (
-
-
NΓ€chste Termine
-
-
-
+
+ {/* Next Appointment Section */}
+ {item.next_appointment && (
+
- )};
-
- {/* Relations Section */}
- {/* {d.relations && ( */}
- {/*
*/}
- {/*
Projekte
*/}
- {/* {d.relations.map((project, index) => ( */}
- {/* */}
- {/* ))} */}
- {/* */}
- {/* )} */}
-
+ )}
+ ;{/* Relations Section */}
+ {/* {d.relations && ( */}
+ {/*
*/}
+ {/*
Projekte
*/}
+ {/* {d.relations.map((project, index) => ( */}
+ {/* */}
+ {/* ))} */}
+ {/* */}
+ {/* )} */}
+
-
-
+
+
)
}
diff --git a/src/Components/Profile/Templates/TabsForm.tsx b/src/Components/Profile/Templates/TabsForm.tsx
index adcc9de..5b19afb 100644
--- a/src/Components/Profile/Templates/TabsForm.tsx
+++ b/src/Components/Profile/Templates/TabsForm.tsx
@@ -9,22 +9,34 @@ import { useNavigate } from 'react-router-dom'
import { useUpdateItem } from '../../Map/hooks/useItems'
// eslint-disable-next-line react/prop-types
-export const TabsForm = ({ item, state, setState, updatePermission, linkItem, unlinkItem, loading, setUrlParams }) => {
+export const TabsForm = ({
+ item,
+ state,
+ setState,
+ updatePermission,
+ linkItem,
+ unlinkItem,
+ loading,
+ setUrlParams,
+}) => {
const [activeTab, setActiveTab] = useState
(1)
const navigate = useNavigate()
const updateItem = useUpdateItem()
- const updateActiveTab = useCallback((id: number) => {
- setActiveTab(id)
+ const updateActiveTab = useCallback(
+ (id: number) => {
+ setActiveTab(id)
- const params = new URLSearchParams(window.location.search)
+ const params = new URLSearchParams(window.location.search)
- params.set('tab', `${id}`)
- const newUrl = location.pathname + '?' + params.toString()
- window.history.pushState({}, '', newUrl)
- setUrlParams(params)
+ params.set('tab', `${id}`)
+ const newUrl = location.pathname + '?' + params.toString()
+ window.history.pushState({}, '', newUrl)
+ setUrlParams(params)
+ },
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [location.pathname])
+ [location.pathname],
+ )
useEffect(() => {
const params = new URLSearchParams(location.search)
@@ -34,90 +46,168 @@ export const TabsForm = ({ item, state, setState, updatePermission, linkItem, un
}, [location.search])
return (
-
-
updateActiveTab(1)} />
-
-
- {item.layer.itemType.show_start_end_input &&
-
setState(prevState => ({
- ...prevState,
- end: e
- }))}
- updateStartValue={(s) => setState(prevState => ({
- ...prevState,
- start: s
- }))}>
- }
+
+
updateActiveTab(1)}
+ />
+
+
+ {item.layer.itemType.show_start_end_input && (
+
+ setState((prevState) => ({
+ ...prevState,
+ end: e,
+ }))
+ }
+ updateStartValue={(s) =>
+ setState((prevState) => ({
+ ...prevState,
+ start: s,
+ }))
+ }
+ >
+ )}
-
setState(prevState => ({
- ...prevState,
- text: v
- }))}
- containerStyle='tw-grow'
- inputStyle={`tw-h-full ${!item.layer.itemType.show_start_end_input && 'tw-border-t-0 tw-rounded-tl-none'}`} />
-
- setState(prevState => ({
- ...prevState,
- contact: c
- }))}
- inputStyle="tw-h-24"
- containerStyle="tw-pt-4"
- />
-
-
-
- {item.layer?.itemType.offers_and_needs &&
- <>
-
updateActiveTab(3)} />
-
-
-
- setState(prevState => ({
- ...prevState,
- offers: v
- }))} placeholder="enter your offers" containerStyle='tw-bg-transparent tw-w-full tw-h-full tw-mt-3 tw-text-xs tw-h-[calc(100%-1rem)] tw-min-h-[5em] tw-pb-2 tw-overflow-auto' />
-
-
- setState(prevState => ({
- ...prevState,
- needs: v
- }))} placeholder="enter your needs" containerStyle='tw-bg-transparent tw-w-full tw-h-full tw-mt-3 tw-text-xs tw-h-[calc(100%-1rem)] tw-min-h-[5em] tw-pb-2 tw-overflow-auto' />
-
-
-
-
+
+ setState((prevState) => ({
+ ...prevState,
+ text: v,
+ }))
}
- {item.layer?.itemType.relations &&
- <>
- updateActiveTab(7)} />
-
-
-
- {state.relations && state.relations.map(i =>
-
-
navigate('/item/' + i.id)}>
-
unlinkItem(id, item, updateItem)} loading={loading} />
-
-
-
-
- )}
- {updatePermission &&
linkItem(id, item, updateItem)} colorField={item.layer.itemColorField}>}
-
-
-
-
+
+ setState((prevState) => ({
+ ...prevState,
+ contact: c,
+ }))
+ }
+ inputStyle='tw-h-24'
+ containerStyle='tw-pt-4'
+ />
+
+
+ {item.layer?.itemType.offers_and_needs && (
+ <>
+
updateActiveTab(3)}
+ />
+
+
+
+
+ setState((prevState) => ({
+ ...prevState,
+ offers: v,
+ }))
+ }
+ placeholder='enter your offers'
+ containerStyle='tw-bg-transparent tw-w-full tw-h-full tw-mt-3 tw-text-xs tw-h-[calc(100%-1rem)] tw-min-h-[5em] tw-pb-2 tw-overflow-auto'
+ />
+
+
+
+ setState((prevState) => ({
+ ...prevState,
+ needs: v,
+ }))
+ }
+ placeholder='enter your needs'
+ containerStyle='tw-bg-transparent tw-w-full tw-h-full tw-mt-3 tw-text-xs tw-h-[calc(100%-1rem)] tw-min-h-[5em] tw-pb-2 tw-overflow-auto'
+ />
+
+
+
+
+ )}
+ {item.layer?.itemType.relations && (
+ <>
+
updateActiveTab(7)}
+ />
+
+
+
+ {state.relations &&
+ state.relations.map((i) => (
+
navigate('/item/' + i.id)}
+ >
+
unlinkItem(id, item, updateItem)}
+ loading={loading}
+ />
+
+
+
+
+ ))}
+ {updatePermission && (
+
linkItem(id, item, updateItem)}
+ colorField={item.layer.itemColorField}
+ >
+ )}
+
+
+
+
+ )}
+
)
}
diff --git a/src/Components/Profile/Templates/TabsView.tsx b/src/Components/Profile/Templates/TabsView.tsx
index 751d833..d80736f 100644
--- a/src/Components/Profile/Templates/TabsView.tsx
+++ b/src/Components/Profile/Templates/TabsView.tsx
@@ -11,7 +11,29 @@ import { useAssetApi } from '../../AppShell/hooks/useAssets'
import { timeAgo } from '../../../Utils/TimeAgo'
// eslint-disable-next-line no-unused-vars
-export const TabsView = ({ attestations, userType, item, offers, needs, relations, updatePermission, loading, linkItem, unlinkItem }: { attestations: Array
, userType: string, item: Item, offers: Array, needs: Array, relations: Array- , updatePermission: boolean, loading: boolean, linkItem: (id: string) => Promise, unlinkItem: (id: string) => Promise }) => {
+export const TabsView = ({
+ attestations,
+ userType,
+ item,
+ offers,
+ needs,
+ relations,
+ updatePermission,
+ loading,
+ linkItem,
+ unlinkItem,
+}: {
+ attestations: Array
+ userType: string
+ item: Item
+ offers: Array
+ needs: Array
+ relations: Array
-
+ updatePermission: boolean
+ loading: boolean
+ linkItem: (id: string) => Promise
+ unlinkItem: (id: string) => Promise
+}) => {
const addFilterTag = useAddFilterTag()
const [activeTab, setActiveTab] = useState()
const navigate = useNavigate()
@@ -21,88 +43,122 @@ export const TabsView = ({ attestations, userType, item, offers, needs, relation
const items = useItems()
const assetsApi = useAssetApi()
const getUserProfile = (id: string) => {
- return items.find(i => i.user_created.id === id && i.layer?.itemType.name === userType)
+ return items.find((i) => i.user_created.id === id && i.layer?.itemType.name === userType)
}
useEffect(() => {
scroll()
}, [addItemPopupType])
- function scroll () {
+ function scroll() {
tabRef.current?.scrollIntoView()
}
const tabRef = useRef(null)
- const updateActiveTab = useCallback((id: number) => {
- setActiveTab(id)
+ const updateActiveTab = useCallback(
+ (id: number) => {
+ setActiveTab(id)
- const params = new URLSearchParams(window.location.search)
- params.set('tab', `${id}`)
- const newUrl = location.pathname + '?' + params.toString()
- window.history.pushState({}, '', newUrl)
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [location.pathname])
+ const params = new URLSearchParams(window.location.search)
+ params.set('tab', `${id}`)
+ const newUrl = location.pathname + '?' + params.toString()
+ window.history.pushState({}, '', newUrl)
+ },
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ [location.pathname],
+ )
useEffect(() => {
const params = new URLSearchParams(location.search)
const urlTab = params.get('tab')
setActiveTab(urlTab ? Number(urlTab) : 1)
- // eslint-disable-next-line react-hooks/exhaustive-deps
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [location.search])
return (
-
-
updateActiveTab(1)} />
-
- {item.layer?.itemType.show_start_end &&
-
+
+
updateActiveTab(1)}
+ />
+
+ {item.layer?.itemType.show_start_end && (
+
+
+
+ )}
- {item.layer?.itemType.questlog &&
+ {item.layer?.itemType.questlog && (
<>
-
updateActiveTab(2)} />
-
-
+ updateActiveTab(2)}
+ />
+
+
{attestations
- .filter(a => a.to.some(t => t.directus_users_id === item.user_created.id))
- .sort((a, b) => new Date(b.date_created).getTime() - new Date(a.date_created).getTime())
+ .filter((a) => a.to.some((t) => t.directus_users_id === item.user_created.id))
+ .sort(
+ (a, b) =>
+ new Date(b.date_created).getTime() - new Date(a.date_created).getTime(),
+ )
.map((a, i) => (
|
- |
- {a.text}
+
+ {a.text}
+
|
-
-
-
+
+
- {getUserProfile(a.user_created.id)?.name}
- {timeAgo(a.date_created)}
+
+ {getUserProfile(a.user_created.id)?.name}
+
+
+ {timeAgo(a.date_created)}
+
@@ -111,73 +167,111 @@ export const TabsView = ({ attestations, userType, item, offers, needs, relation
))}
|
-
+
updateActiveTab(3)}
+ />
+
- {
- offers.length > 0
- ?
-
Offers
- < div className='tw-flex tw-flex-wrap tw-mb-4'>
- {
- offers.map(o =>
{
+ {offers.length > 0 ? (
+
+
Offers
+
+ {offers.map((o) => (
+ {
addFilterTag(o)
- }} />)
- }
-
+ }}
+ />
+ ))}
-
Needs
- < div className='tw-flex tw-flex-wrap tw-mb-4'>
- {
- needs.map(n => addFilterTag(n)} />)
- }
-
+
+ ) : (
+ ''
+ )}
+ {needs.length > 0 ? (
+
+
Needs
+
+ {needs.map((n) => (
+ addFilterTag(n)} />
+ ))}
- : ''
- }
+
+ ) : (
+ ''
+ )}
+ )}
- }
-
- {item.layer?.itemType.relations &&
+ {item.layer?.itemType.relations && (
<>
-
updateActiveTab(7)} />
-
+
updateActiveTab(7)}
+ />
+
- {relations && relations.map(i =>
-
-
navigate('/item/' + i.id)}>
-
-
-
+ {relations &&
+ relations.map((i) => (
+
navigate('/item/' + i.id)}
+ >
+
+
+
+
-
+ ))}
+ {updatePermission && (
+
)}
- {updatePermission &&
}
-
- }
+ )}
)
}
diff --git a/src/Components/Profile/UserSettings.tsx b/src/Components/Profile/UserSettings.tsx
index a35d998..1784c3c 100644
--- a/src/Components/Profile/UserSettings.tsx
+++ b/src/Components/Profile/UserSettings.tsx
@@ -7,7 +7,7 @@ import { toast } from 'react-toastify'
import { useAuth } from '../Auth'
import { TextInput } from '../Input'
-export function UserSettings () {
+export function UserSettings() {
const { user, updateUser, loading /* token */ } = useAuth()
const [id, setId] = useState
('')
@@ -27,38 +27,59 @@ export function UserSettings () {
const onUpdateUser = () => {
let changedUser = {} as UserItem
- changedUser = { id, email, ...passwordChanged && { password } }
+ changedUser = { id, email, ...(passwordChanged && { password }) }
- toast.promise(
-
- updateUser(changedUser),
- {
+ toast
+ .promise(updateUser(changedUser), {
pending: 'updating Profile ...',
success: 'Profile updated',
error: {
- render ({ data }) {
+ render({ data }) {
return `${data}`
- }
- }
+ },
+ },
})
.then(() => navigate('/'))
}
return (
-
- Settings
-
-
- setEmail(v)} />
- {
- setPassword(v)
- setPasswordChanged(true)
- }} />
- {/* */}
-
+
+ Settings
+
+
+ setEmail(v)}
+ />
+ {
+ setPassword(v)
+ setPasswordChanged(true)
+ }}
+ />
+ {/* */}
+
-
-
-
+
+
+
+
)
}
diff --git a/src/Components/Profile/itemFunctions.ts b/src/Components/Profile/itemFunctions.ts
index 309a0f1..4271a5d 100644
--- a/src/Components/Profile/itemFunctions.ts
+++ b/src/Components/Profile/itemFunctions.ts
@@ -7,7 +7,21 @@ import { toast } from 'react-toastify'
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
-export const submitNewItem = async (evt: any, type: string, item, user, setLoading, tags, addTag, addItem, linkItem, resetFilterTags, layers, addItemPopupType, setAddItemPopupType) => {
+export const submitNewItem = async (
+ evt: any,
+ type: string,
+ item,
+ user,
+ setLoading,
+ tags,
+ addTag,
+ addItem,
+ linkItem,
+ resetFilterTags,
+ layers,
+ addItemPopupType,
+ setAddItemPopupType,
+) => {
evt.preventDefault()
const formItem: Item = {} as Item
Array.from(evt.target).forEach((input: HTMLInputElement) => {
@@ -16,15 +30,21 @@ export const submitNewItem = async (evt: any, type: string, item, user, setLoadi
}
})
setLoading(true)
- formItem.text && formItem.text.toLocaleLowerCase().match(hashTagRegex)?.map(tag => {
- if (!tags.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) {
- addTag({ id: crypto.randomUUID(), name: tag.slice(1), color: randomColor() })
- }
- return null
- })
+ formItem.text &&
+ formItem.text
+ .toLocaleLowerCase()
+ .match(hashTagRegex)
+ ?.map((tag) => {
+ if (!tags.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) {
+ addTag({ id: crypto.randomUUID(), name: tag.slice(1), color: randomColor() })
+ }
+ return null
+ })
const uuid = crypto.randomUUID()
- const layer = layers.find(l => l.name.toLocaleLowerCase().replace('s', '') === addItemPopupType.toLocaleLowerCase())
+ const layer = layers.find(
+ (l) => l.name.toLocaleLowerCase().replace('s', '') === addItemPopupType.toLocaleLowerCase(),
+ )
let success = false
try {
@@ -62,7 +82,7 @@ export const linkItem = async (id: string, item, updateItem) => {
}
export const unlinkItem = async (id: string, item, updateItem) => {
- const newRelations = item.relations?.filter(r => r.related_items_id !== id)
+ const newRelations = item.relations?.filter((r) => r.related_items_id !== id)
const updatedItem = { id: item.id, relations: newRelations }
let success = false
@@ -78,7 +98,14 @@ export const unlinkItem = async (id: string, item, updateItem) => {
}
}
-export const handleDelete = async (event: React.MouseEvent, item, setLoading, removeItem, map, navigate) => {
+export const handleDelete = async (
+ event: React.MouseEvent,
+ item,
+ setLoading,
+ removeItem,
+ map,
+ navigate,
+) => {
event.stopPropagation()
setLoading(true)
let success = false
@@ -99,26 +126,37 @@ export const handleDelete = async (event: React.MouseEvent, item, s
navigate('/')
}
-export const onUpdateItem = async (state, item, tags, addTag, setLoading, navigate, updateItem, addItem, user, params) => {
+export const onUpdateItem = async (
+ state,
+ item,
+ tags,
+ addTag,
+ setLoading,
+ navigate,
+ updateItem,
+ addItem,
+ user,
+ params,
+) => {
let changedItem = {} as Item
const offerUpdates: Array = []
// check for new offers
- await state.offers?.map(o => {
- const existingOffer = item?.offers?.find(t => t.tags_id === o.id)
+ await state.offers?.map((o) => {
+ const existingOffer = item?.offers?.find((t) => t.tags_id === o.id)
existingOffer && offerUpdates.push(existingOffer.id)
- if (!existingOffer && !tags.some(t => t.id === o.id)) addTag({ ...o, offer_or_need: true })
+ if (!existingOffer && !tags.some((t) => t.id === o.id)) addTag({ ...o, offer_or_need: true })
!existingOffer && offerUpdates.push({ items_id: item?.id, tags_id: o.id })
return null
})
const needsUpdates: Array = []
- await state.needs?.map(n => {
- const existingNeed = item?.needs?.find(t => t.tags_id === n.id)
+ await state.needs?.map((n) => {
+ const existingNeed = item?.needs?.find((t) => t.tags_id === n.id)
existingNeed && needsUpdates.push(existingNeed.id)
!existingNeed && needsUpdates.push({ items_id: item?.id, tags_id: n.id })
- !existingNeed && !tags.some(t => t.id === n.id) && addTag({ ...n, offer_or_need: true })
+ !existingNeed && !tags.some((t) => t.id === n.id) && addTag({ ...n, offer_or_need: true })
return null
})
@@ -128,30 +166,30 @@ export const onUpdateItem = async (state, item, tags, addTag, setLoading, naviga
name: state.name,
subname: state.subname,
text: state.text,
- ...state.color && { color: state.color },
+ ...(state.color && { color: state.color }),
position: item.position,
- ...state.groupType && { group_type: state.groupType },
- ...state.status && { status: state.status },
+ ...(state.groupType && { group_type: state.groupType }),
+ ...(state.status && { status: state.status }),
contact: state.contact,
telephone: state.telephone,
- ...state.end && { end: state.end },
- ...state.start && { start: state.start },
- ...state.markerIcon && { markerIcon: state.markerIcon },
+ ...(state.end && { end: state.end }),
+ ...(state.start && { start: state.start }),
+ ...(state.markerIcon && { markerIcon: state.markerIcon }),
next_appointment: state.nextAppointment,
- ...state.image.length > 10 && { image: state.image },
- ...state.offers.length > 0 && { offers: offerUpdates },
- ...state.needs.length > 0 && { needs: needsUpdates }
+ ...(state.image.length > 10 && { image: state.image }),
+ ...(state.offers.length > 0 && { offers: offerUpdates }),
+ ...(state.needs.length > 0 && { needs: needsUpdates }),
}
const offersState: Array = []
const needsState: Array = []
- state.offers.map(o => {
+ state.offers.map((o) => {
offersState.push({ items_id: item?.id, tags_id: o.id })
return null
})
- state.needs.map(n => {
+ state.needs.map((n) => {
needsState.push({ items_id: item?.id, tags_id: n.id })
return null
})
@@ -160,52 +198,69 @@ export const onUpdateItem = async (state, item, tags, addTag, setLoading, naviga
setLoading(true)
- await state.text.toLocaleLowerCase().match(hashTagRegex)?.map(tag => {
- if (!tags.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) {
- addTag({ id: crypto.randomUUID(), name: encodeTag(tag.slice(1).toLocaleLowerCase()), color: randomColor() })
- }
- return null
- })
+ await state.text
+ .toLocaleLowerCase()
+ .match(hashTagRegex)
+ ?.map((tag) => {
+ if (!tags.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) {
+ addTag({
+ id: crypto.randomUUID(),
+ name: encodeTag(tag.slice(1).toLocaleLowerCase()),
+ color: randomColor(),
+ })
+ }
+ return null
+ })
// take care that addTag request comes before item request
await sleep(200)
if (!item.new) {
- item?.layer?.api?.updateItem && toast.promise(
- item?.layer?.api?.updateItem(changedItem),
- {
- pending: 'updating Item ...',
- success: 'Item updated',
- error: {
- render ({ data }) {
- return `${data}`
- }
- }
- })
- .catch(setLoading(false))
- .then(() => item && updateItem({ ...item, ...changedItem }))
- .then(() => {
- setLoading(false)
- navigate(`/item/${item.id}${params && '?' + params}`)
- })
+ item?.layer?.api?.updateItem &&
+ toast
+ .promise(item?.layer?.api?.updateItem(changedItem), {
+ pending: 'updating Item ...',
+ success: 'Item updated',
+ error: {
+ render({ data }) {
+ return `${data}`
+ },
+ },
+ })
+ .catch(setLoading(false))
+ .then(() => item && updateItem({ ...item, ...changedItem }))
+ .then(() => {
+ setLoading(false)
+ navigate(`/item/${item.id}${params && '?' + params}`)
+ })
} else {
item.new = false
- item.layer?.api?.createItem && toast.promise(
- item.layer?.api?.createItem(changedItem),
- {
- pending: 'updating Item ...',
- success: 'Item updated',
- error: {
- render ({ data }) {
- return `${data}`
- }
- }
- })
- .catch(setLoading(false))
- .then(() => item && addItem({ ...item, ...changedItem, layer: item.layer, user_created: user, type: item.layer?.itemType }))
- .then(() => {
- setLoading(false)
- navigate(`/${params && '?' + params}`)
- })
+ item.layer?.api?.createItem &&
+ toast
+ .promise(item.layer?.api?.createItem(changedItem), {
+ pending: 'updating Item ...',
+ success: 'Item updated',
+ error: {
+ render({ data }) {
+ return `${data}`
+ },
+ },
+ })
+ .catch(setLoading(false))
+ .then(
+ () =>
+ item &&
+ addItem({
+ ...item,
+ ...changedItem,
+ layer: item.layer,
+ user_created: user,
+ type: item.layer?.itemType,
+ }),
+ )
+ .then(() => {
+ setLoading(false)
+ navigate(`/${params && '?' + params}`)
+ })
}
}
diff --git a/src/Components/Templates/AttestationForm.tsx b/src/Components/Templates/AttestationForm.tsx
index 0c19604..e99f6b8 100644
--- a/src/Components/Templates/AttestationForm.tsx
+++ b/src/Components/Templates/AttestationForm.tsx
@@ -8,7 +8,7 @@ import { useRef, useState, useEffect } from 'react'
import { Item, ItemsApi } from '../../types'
import { toast } from 'react-toastify'
-export const AttestationForm = ({ api }:{api?:ItemsApi}) => {
+export const AttestationForm = ({ api }: { api?: ItemsApi }) => {
const items = useItems()
const assetsApi = useAssetApi()
const [users, setUsers] = useState>()
@@ -17,7 +17,7 @@ export const AttestationForm = ({ api }:{api?:ItemsApi}) => {
useEffect(() => {
const params = new URLSearchParams(location.search)
const toUserIds = params.get('to')
- setUsers(items.filter(i => toUserIds?.includes(i.id)))
+ setUsers(items.filter((i) => toUserIds?.includes(i.id)))
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [items, location])
@@ -36,27 +36,40 @@ export const AttestationForm = ({ api }:{api?:ItemsApi}) => {
}
const sendAttestation = async () => {
- const to : Array = []
- users?.map(u => to.push({ directus_users_id: u.user_created.id }))
+ const to: Array = []
+ users?.map((u) => to.push({ directus_users_id: u.user_created.id }))
- api?.createItem && toast.promise(
- api.createItem({
- text: inputValue,
- emoji: selectedEmoji,
- color: selectedColor,
- shape: selectedShape,
- to
- }), {
- pending: 'creating attestation ...',
- success: 'Attestation created',
- error: {
- render ({ data }) {
- return `${data}`
- }
- }
- })
- .then(() => navigate('/item/' + items.find(i => i.user_created.id === to[0].directus_users_id && i.layer?.itemType.name === 'player')?.id + '?tab=2')
- )
+ api?.createItem &&
+ toast
+ .promise(
+ api.createItem({
+ text: inputValue,
+ emoji: selectedEmoji,
+ color: selectedColor,
+ shape: selectedShape,
+ to,
+ }),
+ {
+ pending: 'creating attestation ...',
+ success: 'Attestation created',
+ error: {
+ render({ data }) {
+ return `${data}`
+ },
+ },
+ },
+ )
+ .then(() =>
+ navigate(
+ '/item/' +
+ items.find(
+ (i) =>
+ i.user_created.id === to[0].directus_users_id &&
+ i.layer?.itemType.name === 'player',
+ )?.id +
+ '?tab=2',
+ ),
+ )
}
const [selectedEmoji, setSelectedEmoji] = useState('select badge')
@@ -64,42 +77,61 @@ export const AttestationForm = ({ api }:{api?:ItemsApi}) => {
const [selectedColor, setSelectedColor] = useState('#fff0d6')
return (
-
- Gratitude
- to
-
- {users && users.map((u, k) => (
-
- {u.image
- ?
-
-
-
-
- :
}
-
-
- ), ', ')}
-
-
-
-
+
+ Gratitude
+ to
+
+ {users &&
+ users.map(
+ (u, k) => (
+
+ {u.image ? (
+
+
+
+
+ ) : (
+
+ )}
+
-
-
-
-
-
-
+
+
+
+
+
+
+
)
}
diff --git a/src/Components/Templates/CardPage.tsx b/src/Components/Templates/CardPage.tsx
index 7a04d0e..53481ee 100644
--- a/src/Components/Templates/CardPage.tsx
+++ b/src/Components/Templates/CardPage.tsx
@@ -2,23 +2,34 @@ import { Link } from 'react-router-dom'
import * as React from 'react'
import { TitleCard } from './TitleCard'
-export function CardPage ({ title, hideTitle, children, parents } : {
- title: string,
- hideTitle?: boolean,
- children?: React.ReactNode,
- parents?: Array<{name: string, path: string}>
+export function CardPage({
+ title,
+ hideTitle,
+ children,
+ parents,
+}: {
+ title: string
+ hideTitle?: boolean
+ children?: React.ReactNode
+ parents?: Array<{ name: string; path: string }>
}) {
return (
-
+
-
+
- - Home
- {parents?.map((b, i) => - {b.name}
)}
+ -
+ Home
+
+ {parents?.map((b, i) => (
+ -
+ {b.name}
+
+ ))}
- {title}
-
+
{children}
diff --git a/src/Components/Templates/CircleLayout.tsx b/src/Components/Templates/CircleLayout.tsx
index 3bfb2c4..1405eb0 100644
--- a/src/Components/Templates/CircleLayout.tsx
+++ b/src/Components/Templates/CircleLayout.tsx
@@ -1,6 +1,14 @@
import { useEffect, useRef } from 'react'
-export const CircleLayout = ({ items, radius, fontSize } : {items: any, radius: number, fontSize: any}) => {
+export const CircleLayout = ({
+ items,
+ radius,
+ fontSize,
+}: {
+ items: any
+ radius: number
+ fontSize: any
+}) => {
const containerRef = useRef
(null)
useEffect(() => {
@@ -9,7 +17,7 @@ export const CircleLayout = ({ items, radius, fontSize } : {items: any, radius:
if (container) {
for (let i = 0; i < itemCount; i++) {
- const startAngle = (Math.PI) / 2
+ const startAngle = Math.PI / 2
const angle = startAngle + (i / itemCount) * (2 * Math.PI)
const x = radius * Math.cos(angle)
const y = radius * Math.sin(angle)
@@ -17,13 +25,16 @@ export const CircleLayout = ({ items, radius, fontSize } : {items: any, radius:
child.style.transform = `translate(${x}px, ${y}px)`
}
}
- // eslint-disable-next-line react-hooks/exhaustive-deps
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [items])
return (
-
+
{items.map((item: any) => (
-
+
{item}
))}
diff --git a/src/Components/Templates/DateUserInfo.tsx b/src/Components/Templates/DateUserInfo.tsx
index 7415923..b87cc88 100644
--- a/src/Components/Templates/DateUserInfo.tsx
+++ b/src/Components/Templates/DateUserInfo.tsx
@@ -5,14 +5,24 @@ import { Item } from '../../types'
export const DateUserInfo = ({ item }: { item: Item }) => {
const [infoExpanded, setInfoExpanded] = useState
(false)
return (
- e.stopPropagation()}>
-
- {
- infoExpanded
- ?
setInfoExpanded(false)} >{`${item.date_updated && item.date_updated !== item.date_created ? 'updated' : 'posted'} ${item && item.user_created && item.user_created.first_name ? `by ${item.user_created.first_name}` : ''} ${item.date_updated ? timeAgo(item.date_updated) : timeAgo(item.date_created!)}`}
- :
setInfoExpanded(true)}>β
- }
-
-
e.stopPropagation()}
+ >
+ {infoExpanded ? (
+
setInfoExpanded(false)}
+ >{`${item.date_updated && item.date_updated !== item.date_created ? 'updated' : 'posted'} ${item && item.user_created && item.user_created.first_name ? `by ${item.user_created.first_name}` : ''} ${item.date_updated ? timeAgo(item.date_updated) : timeAgo(item.date_created!)}`}
+ ) : (
+
setInfoExpanded(true)}
+ >
+ β
+
+ )}
+
+
{isOpen && (
-
+
{emojis.map((emoji) => (
-
)}
)
diff --git a/src/Components/Templates/ItemCard.tsx b/src/Components/Templates/ItemCard.tsx
index 94eba4d..3eb8e3b 100644
--- a/src/Components/Templates/ItemCard.tsx
+++ b/src/Components/Templates/ItemCard.tsx
@@ -6,24 +6,47 @@ import { useNavigate } from 'react-router-dom'
import { getValue } from '../../Utils/GetValue'
import useWindowDimensions from '../Map/hooks/useWindowDimension'
-export const ItemCard = ({ i, loading, url, parameterField, deleteCallback }: { i: Item, loading: boolean, url: string, parameterField: string, deleteCallback: any }) => {
+export const ItemCard = ({
+ i,
+ loading,
+ url,
+ parameterField,
+ deleteCallback,
+}: {
+ i: Item
+ loading: boolean
+ url: string
+ parameterField: string
+ deleteCallback: any
+}) => {
const navigate = useNavigate()
const windowDimensions = useWindowDimensions()
return (
-
{
- const params = new URLSearchParams(window.location.search)
- if (windowDimensions.width < 786 && i.position) navigate('/' + getValue(i, parameterField) + `${params ? `?${params}` : ''}`)
- else navigate(url + getValue(i, parameterField) + `${params ? `?${params}` : ''}`)
- }}>
-
navigate('/edit-item/' + i.id)} deleteCallback={() => deleteCallback(i)}>
+
{
+ const params = new URLSearchParams(window.location.search)
+ if (windowDimensions.width < 786 && i.position)
+ navigate('/' + getValue(i, parameterField) + `${params ? `?${params}` : ''}`)
+ else navigate(url + getValue(i, parameterField) + `${params ? `?${params}` : ''}`)
+ }}
+ >
+
navigate('/edit-item/' + i.id)}
+ deleteCallback={() => deleteCallback(i)}
+ >
- {i.layer?.itemType.show_start_end &&
-
- }
- {i.layer?.itemType.show_text &&
+ {i.layer?.itemType.show_start_end && }
+ {i.layer?.itemType.show_text && (
- }
+ )}
diff --git a/src/Components/Templates/MapOverlayPage.tsx b/src/Components/Templates/MapOverlayPage.tsx
index f640cb0..265ab7b 100644
--- a/src/Components/Templates/MapOverlayPage.tsx
+++ b/src/Components/Templates/MapOverlayPage.tsx
@@ -2,7 +2,17 @@ import * as L from 'leaflet'
import * as React from 'react'
import { useNavigate } from 'react-router-dom'
-export function MapOverlayPage ({ children, className, backdrop, card = true }: { children: React.ReactNode, className?: string, backdrop?: boolean, card?:boolean }) {
+export function MapOverlayPage({
+ children,
+ className,
+ backdrop,
+ card = true,
+}: {
+ children: React.ReactNode
+ className?: string
+ backdrop?: boolean
+ card?: boolean
+}) {
const closeScreen = () => {
navigate(`/${window.location.search ? window.location.search : ''}`)
}
@@ -25,13 +35,24 @@ export function MapOverlayPage ({ children, className, backdrop, card = true }:
}, [overlayRef, backdropRef])
return (
-
-
-
- {children}
-
-
-
+
+
+
+ {children}
+
+
+
)
}
diff --git a/src/Components/Templates/MarketView.tsx b/src/Components/Templates/MarketView.tsx
index 2606f57..e0af145 100644
--- a/src/Components/Templates/MarketView.tsx
+++ b/src/Components/Templates/MarketView.tsx
@@ -7,9 +7,9 @@ import { MapOverlayPage } from './MapOverlayPage'
import { TagView } from './TagView'
import { useNavigate } from 'react-router-dom'
-function groupAndCount (arr) {
+function groupAndCount(arr) {
const grouped = arr.reduce((acc, obj) => {
- const found = acc.find(item => JSON.stringify(item.object) === JSON.stringify(obj))
+ const found = acc.find((item) => JSON.stringify(item.object) === JSON.stringify(obj))
if (found) {
found.count += 1
@@ -34,45 +34,56 @@ export const MarketView = () => {
useEffect(() => {
setOffers([])
setNeeds([])
- items.map(i => {
- i?.layer?.itemOffersField && getValue(i, i.layer.itemOffersField)?.map(o => {
- const tag = tags.find(t => t.id === o.tags_id)
- tag && setOffers(current => [...current, tag])
- return null
- })
- i?.layer?.itemNeedsField && getValue(i, i.layer.itemNeedsField)?.map(n => {
- const tag = tags.find(t => t.id === n.tags_id)
- tag && setNeeds(current => [...current, tag])
- return null
- })
+ items.map((i) => {
+ i?.layer?.itemOffersField &&
+ getValue(i, i.layer.itemOffersField)?.map((o) => {
+ const tag = tags.find((t) => t.id === o.tags_id)
+ tag && setOffers((current) => [...current, tag])
+ return null
+ })
+ i?.layer?.itemNeedsField &&
+ getValue(i, i.layer.itemNeedsField)?.map((n) => {
+ const tag = tags.find((t) => t.id === n.tags_id)
+ tag && setNeeds((current) => [...current, tag])
+ return null
+ })
return null
})
console.log(offers)
- // eslint-disable-next-line react-hooks/exhaustive-deps
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [items])
return (
-
+
-
Offers
-
- {groupAndCount(offers).map(o => (
- navigate(`/?tags=${o.object.name}`)} key={o.object.id} tag={o.object} count={o.count}>
- ))}
-
+
Offers
+
+ {groupAndCount(offers).map((o) => (
+ navigate(`/?tags=${o.object.name}`)}
+ key={o.object.id}
+ tag={o.object}
+ count={o.count}
+ >
+ ))}
+
-
Needs
-
- {groupAndCount(needs).map(o => (
- navigate(`/?tags=${o.object.name}`)} key={o.object.id} tag={o.object} count={o.count}>
- ))}
-
+
Needs
+
+ {groupAndCount(needs).map((o) => (
+ navigate(`/?tags=${o.object.name}`)}
+ key={o.object.id}
+ tag={o.object}
+ count={o.count}
+ >
+ ))}
+
-
)
}
diff --git a/src/Components/Templates/MoonCalendar.tsx b/src/Components/Templates/MoonCalendar.tsx
index 73baeb4..c43b85f 100644
--- a/src/Components/Templates/MoonCalendar.tsx
+++ b/src/Components/Templates/MoonCalendar.tsx
@@ -1,12 +1,6 @@
import * as React from 'react'
import { useState } from 'react'
-import {
- add,
- format,
- parse,
- startOfToday,
- sub
-} from 'date-fns'
+import { add, format, parse, startOfToday, sub } from 'date-fns'
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline'
import { MapOverlayPage } from './MapOverlayPage'
import { CircleLayout } from './CircleLayout'
@@ -34,27 +28,33 @@ export const MoonCalendar = () => {
Moon Cycle
-
-
-
-
-
-
from {format(getLastNewMoon(), 'dd.MM')} - to {format(getNextNewMoon(), 'dd.MM')}
-
-
+
+
+ from {format(getLastNewMoon(), 'dd.MM')} - to {format(getNextNewMoon(), 'dd.MM')}
+
+
+
)
}
diff --git a/src/Components/Templates/OverlayItemsIndexPage.tsx b/src/Components/Templates/OverlayItemsIndexPage.tsx
index 456068a..63a5cab 100644
--- a/src/Components/Templates/OverlayItemsIndexPage.tsx
+++ b/src/Components/Templates/OverlayItemsIndexPage.tsx
@@ -17,13 +17,23 @@ import { SearchControl } from '../Map/Subcomponents/Controls/SearchControl'
import { TagsControl } from '../Map/Subcomponents/Controls/TagsControl'
import { useFilterTags } from '../Map/hooks/useFilter'
-export const OverlayItemsIndexPage = ({ url, layerName, parameterField, plusButton = true }: { layerName: string, url: string, parameterField: string, plusButton?: boolean }) => {
+export const OverlayItemsIndexPage = ({
+ url,
+ layerName,
+ parameterField,
+ plusButton = true,
+}: {
+ layerName: string
+ url: string
+ parameterField: string
+ plusButton?: boolean
+}) => {
const [loading, setLoading] = useState
(false)
const [addItemPopupType, setAddItemPopupType] = useState('')
const tabRef = useRef(null)
- function scroll () {
+ function scroll() {
tabRef.current?.scrollIntoView()
}
@@ -46,7 +56,7 @@ export const OverlayItemsIndexPage = ({ url, layerName, parameterField, plusButt
const filterTags = useFilterTags()
const getItemTags = useGetItemTags()
- const layer = layers.find(l => l.name === layerName)
+ const layer = layers.find((l) => l.name === layerName)
const submitNewItem = async (evt: any) => {
evt.preventDefault()
@@ -57,12 +67,16 @@ export const OverlayItemsIndexPage = ({ url, layerName, parameterField, plusButt
}
})
setLoading(true)
- formItem.text && formItem.text.toLocaleLowerCase().match(hashTagRegex)?.map(tag => {
- if (!tags.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) {
- addTag({ id: crypto.randomUUID(), name: tag.slice(1), color: randomColor() })
- }
- return null
- })
+ formItem.text &&
+ formItem.text
+ .toLocaleLowerCase()
+ .match(hashTagRegex)
+ ?.map((tag) => {
+ if (!tags.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) {
+ addTag({ id: crypto.randomUUID(), name: tag.slice(1), color: randomColor() })
+ }
+ return null
+ })
const uuid = crypto.randomUUID()
let success = false
try {
@@ -96,57 +110,108 @@ export const OverlayItemsIndexPage = ({ url, layerName, parameterField, plusButt
}
return (
- <>
-
-
-
-
-
-
-
-
-
-
- {
- items?.filter(i => i.layer?.name === layerName)
- .filter(item =>
- filterTags.length === 0 ? item : filterTags.some(tag => getItemTags(item).some(filterTag => filterTag.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())))
- ?.sort((a, b) => {
- // Convert date_created to milliseconds, handle undefined by converting to lowest possible date (0 milliseconds)
- const dateA = a.date_updated ? new Date(a.date_updated).getTime() : a.date_created ? new Date(a.date_created).getTime() : 0
- const dateB = b.date_updated ? new Date(b.date_updated).getTime() : b.date_created ? new Date(b.date_created).getTime() : 0
- return dateB - dateA // Subtracts milliseconds which are numbers
- })
- ?.map((i, k) => (
-
- deleteItem(i)} />
-
- ))
- }
- {addItemPopupType === 'place' && (
-
- )}
-
-
+ <>
+
+
+
+
+
+
+
+
+
+
+ {items
+ ?.filter((i) => i.layer?.name === layerName)
+ .filter((item) =>
+ filterTags.length === 0
+ ? item
+ : filterTags.some((tag) =>
+ getItemTags(item).some(
+ (filterTag) =>
+ filterTag.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase(),
+ ),
+ ),
+ )
+ ?.sort((a, b) => {
+ // Convert date_created to milliseconds, handle undefined by converting to lowest possible date (0 milliseconds)
+ const dateA = a.date_updated
+ ? new Date(a.date_updated).getTime()
+ : a.date_created
+ ? new Date(a.date_created).getTime()
+ : 0
+ const dateB = b.date_updated
+ ? new Date(b.date_updated).getTime()
+ : b.date_created
+ ? new Date(b.date_created).getTime()
+ : 0
+ return dateB - dateA // Subtracts milliseconds which are numbers
+ })
+ ?.map((i, k) => (
+
+ deleteItem(i)}
+ />
+
+ ))}
+ {addItemPopupType === 'place' && (
+
+
+ )}
+
+
+
- {plusButton &&
{ setAddItemPopupType('place'); scroll() }} color={'#777'} collection='items' />}
-
+ {plusButton && (
+ {
+ setAddItemPopupType('place')
+ scroll()
+ }}
+ color={'#777'}
+ collection='items'
+ />
+ )}
+
)
}
diff --git a/src/Components/Templates/SelectUser.tsx b/src/Components/Templates/SelectUser.tsx
index b60336a..9a3b215 100644
--- a/src/Components/Templates/SelectUser.tsx
+++ b/src/Components/Templates/SelectUser.tsx
@@ -6,49 +6,62 @@ import { Link } from 'react-router-dom'
export const SelectUser = ({ userType }: { userType: string }) => {
const items = useItems()
- const users = items.filter(i => i.layer?.itemType.name === userType)
+ const users = items.filter((i) => i.layer?.itemType.name === userType)
const assetsApi = useAssetApi()
const [selectedUsers, setSelectedUsers] = useState>([])
return (
-
+
+ Gratitude to ...
- Gratitude to ...
-
- {/* Team Member list in table format loaded constant */}
-
-