- ('')
+ const [userName, setUserName] = useState('')
- const [email, setEmail] = useState("");
- const [userName, setUserName] = useState("");
+ const [password, setPassword] = useState('')
- const [password, setPassword] = useState("");
+ const { register, loading } = useAuth()
- const { register, loading } = useAuth();
+ const navigate = useNavigate()
- const navigate = useNavigate();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ const onRegister = async () => {
+ await toast.promise(
+ register({ email, password }, userName),
+ {
+ success: {
+ render ({ data }) {
+ navigate('/')
+ return `Hi ${data?.first_name}`
+ },
+ // other options
+ icon: 'βοΈ'
+ },
+ error: {
+ render ({ data }) {
+ return `${data}`
+ },
+ autoClose: 10000
+ },
+ pending: 'creating new user ...'
+ })
+ }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- const onRegister = async () => {
- await toast.promise(
- register({ email: email, password: password }, userName),
- {
- success: {
- render({ data }) {
- navigate(`/`);
- return `Hi ${data?.first_name}`
- },
- // other options
- icon: "βοΈ",
- },
- error: {
- render({ data }) {
- return `${data}`
- },
- autoClose: 10000,
- },
- pending: 'creating new user ...'
- });
+ useEffect(() => {
+ const keyDownHandler = event => {
+ if (event.key === 'Enter') {
+ event.preventDefault()
+ onRegister()
+ }
}
+ document.addEventListener('keydown', keyDownHandler)
+ return () => {
+ document.removeEventListener('keydown', keyDownHandler)
+ }
+ }, [onRegister])
- useEffect(() => {
- const keyDownHandler = event => {
- if (event.key === 'Enter') {
- event.preventDefault();
- onRegister();
- }
- };
- document.addEventListener('keydown', keyDownHandler);
- return () => {
- document.removeEventListener('keydown', keyDownHandler);
- };
- }, [onRegister]);
-
-
- return (
+ return (
- )
+ )
}
-
diff --git a/src/Components/Auth/index.tsx b/src/Components/Auth/index.tsx
index 1e3aee63..2a53f98d 100644
--- a/src/Components/Auth/index.tsx
+++ b/src/Components/Auth/index.tsx
@@ -1,5 +1,5 @@
-export {AuthProvider, useAuth} from "./useAuth"
-export {LoginPage} from "./LoginPage"
-export {SignupPage} from './SignupPage'
-export {RequestPasswordPage} from './RequestPasswordPage'
-export {SetNewPasswordPage} from './SetNewPasswordPage'
\ No newline at end of file
+export { AuthProvider, useAuth } from './useAuth'
+export { LoginPage } from './LoginPage'
+export { SignupPage } from './SignupPage'
+export { RequestPasswordPage } from './RequestPasswordPage'
+export { SetNewPasswordPage } from './SetNewPasswordPage'
diff --git a/src/Components/Auth/useAuth.tsx b/src/Components/Auth/useAuth.tsx
index b1817373..6294a575 100644
--- a/src/Components/Auth/useAuth.tsx
+++ b/src/Components/Auth/useAuth.tsx
@@ -1,7 +1,6 @@
-import { createContext, useState, useContext, useEffect } from "react";
-import * as React from "react";
-import { UserApi, UserItem } from "../../types";
-
+import { createContext, useState, useContext, useEffect } from 'react'
+import * as React from 'react'
+import { UserApi, UserItem } from '../../types'
type AuthProviderProps = {
userApi: UserApi,
@@ -14,8 +13,6 @@ type AuthCredentials = {
otp?: string | undefined;
}
-
-
type AuthContextProps = {
isAuthenticated: boolean,
user: UserItem | null;
@@ -42,125 +39,118 @@ const AuthContext = createContext
-
-
-
- {isAuthenticated ?
- {appName}
+
+
{appName}
-
+ {isAuthenticated
+ ? ('')
- const [password, setPassword] = useState("");
+ const { passwordReset, loading } = useAuth()
- const { passwordReset, loading } = useAuth();
+ const navigate = useNavigate()
- const navigate = useNavigate();
+ const onReset = async () => {
+ const token = window.location.search.split('token=')[1]
+ console.log(token)
- const onReset = async () => {
- const token = window.location.search.split("token=")[1];
- console.log(token);
-
- await toast.promise(
- passwordReset(token, password),
- {
- success: {
- render() {
- navigate(`/`);
- return `New password set`
- },
- },
- error: {
- render({ data }) {
- return `${data}`
- },
- },
- pending: 'setting password ...'
- });
- }
+ await toast.promise(
+ passwordReset(token, password),
+ {
+ success: {
+ render () {
+ navigate('/')
+ return 'New password set'
+ }
+ },
+ error: {
+ render ({ data }) {
+ return `${data}`
+ }
+ },
+ pending: 'setting password ...'
+ })
+ }
- return (
+ return (
- )
+ )
}
-
diff --git a/src/Components/Auth/SignupPage.tsx b/src/Components/Auth/SignupPage.tsx
index 810afcef..48ef2a13 100644
--- a/src/Components/Auth/SignupPage.tsx
+++ b/src/Components/Auth/SignupPage.tsx
@@ -5,55 +5,53 @@ import { toast } from 'react-toastify'
import { useAuth } from './useAuth'
import { MapOverlayPage } from '../Templates'
-export function SignupPage() {
+export function SignupPage () {
+ const [email, setEmail] = useState
+
{ userProfile?.image &&
}
-
- :
-
- ![]({"https://api.utopia-lab.org/assets/")
+ 
{userProfile.name||user?.first_name}
+ {userProfile.name || user?.first_name}
-
-
- Profile -
- Settings +
- Profile +
- Settings
- { onLogout() }}>Logout
+ :
(null);
- const [slim, setSlim] = useState(false);
-
+ const location = useLocation()
+ const [instance, setInstance] = useState(null)
+ const [slim, setSlim] = useState(false)
const toggleSlim = () => {
- setSlim(!slim);
- instance.toggleSlim();
+ setSlim(!slim)
+ instance.toggleSlim()
}
-
-
useEffect(() => {
if (!init.current) {
- initTE({ Sidenav });
+ initTE({ Sidenav })
const instance = Sidenav.getInstance(
- document.getElementById("sidenav")
- );
- setInstance(instance);
- instance.toggleSlim();
- init.current = true;
+ document.getElementById('sidenav')
+ )
+ setInstance(instance)
+ instance.toggleSlim()
+ init.current = true
}
}, [])
const [embedded, setEmbedded] = useState(true)
-
useEffect(() => {
- const params = new URLSearchParams(location.search);
- const embedded = params.get("embedded");
- embedded != "true" && setEmbedded(false)
- }, [location]);
+ const params = new URLSearchParams(location.search)
+ const embedded = params.get('embedded')
+ embedded != 'true' && setEmbedded(false)
+ }, [location])
- const params = new URLSearchParams(window.location.search);
+ const params = new URLSearchParams(window.location.search)
return (
- )
+ )
}
-
diff --git a/src/Components/Auth/RequestPasswordPage.tsx b/src/Components/Auth/RequestPasswordPage.tsx
index 6fb4786b..c74c75ff 100644
--- a/src/Components/Auth/RequestPasswordPage.tsx
+++ b/src/Components/Auth/RequestPasswordPage.tsx
@@ -2,39 +2,38 @@ import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { toast } from 'react-toastify'
import { useAuth } from './useAuth'
-import { MapOverlayPage} from '../Templates'
+import { MapOverlayPage } from '../Templates'
// eslint-disable-next-line react/prop-types
-export function RequestPasswordPage({reset_url}) {
+export function RequestPasswordPage ({ reset_url }) {
+ const [email, setEmail] = useState('')
- const [email, setEmail] = useState("");
+ const { requestPasswordReset, loading } = useAuth()
- const { requestPasswordReset, loading } = useAuth();
+ const navigate = useNavigate()
- const navigate = useNavigate();
+ const onReset = async () => {
+ await toast.promise(
+ requestPasswordReset(email, reset_url),
+ {
+ success: {
+ render () {
+ navigate('/')
+ return 'Check your mailbox'
+ },
+ // other options
+ icon: 'π¬'
+ },
+ error: {
+ render ({ data }) {
+ return `${data}`
+ }
+ },
+ pending: 'sending email ...'
+ })
+ }
- const onReset = async () => {
- await toast.promise(
- requestPasswordReset( email, reset_url),
- {
- success: {
- render() {
- navigate(`/`);
- return `Check your mailbox`
- },
- // other options
- icon: "π¬",
- },
- error: {
- render({ data }) {
- return `${data}`
- },
- },
- pending: 'sending email ...'
- });
- }
-
- return (
+ return (
- )
+ )
}
-
diff --git a/src/Components/Auth/SetNewPasswordPage.tsx b/src/Components/Auth/SetNewPasswordPage.tsx
index d746b24b..d62a7006 100644
--- a/src/Components/Auth/SetNewPasswordPage.tsx
+++ b/src/Components/Auth/SetNewPasswordPage.tsx
@@ -3,39 +3,38 @@ import { useNavigate } from 'react-router-dom'
import { toast } from 'react-toastify'
import { useAuth } from './useAuth'
-import { MapOverlayPage} from '../Templates'
+import { MapOverlayPage } from '../Templates'
-export function SetNewPasswordPage() {
+export function SetNewPasswordPage () {
+ const [password, setPassword] = useState
-
- )
- else return (<>)
+ )
+ } else return (<>)
}
diff --git a/src/Components/AppShell/SetAssetsApi.tsx b/src/Components/AppShell/SetAssetsApi.tsx
index 410d3063..e4874d47 100644
--- a/src/Components/AppShell/SetAssetsApi.tsx
+++ b/src/Components/AppShell/SetAssetsApi.tsx
@@ -1,15 +1,14 @@
import { useSetAssetApi } from './hooks/useAssets'
-import { AssetsApi } from '../../types';
-import { useEffect } from 'react';
+import { AssetsApi } from '../../types'
+import { useEffect } from 'react'
-export const SetAssetsApi = ({assetsApi}:{assetsApi: AssetsApi}) => {
- const setAssetsApi = useSetAssetApi();
+export const SetAssetsApi = ({ assetsApi }:{assetsApi: AssetsApi}) => {
+ const setAssetsApi = useSetAssetApi()
- useEffect(() => {
- setAssetsApi(assetsApi)
+ useEffect(() => {
+ setAssetsApi(assetsApi)
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [assetsApi])
-
+ }, [assetsApi])
return (
<>
diff --git a/src/Components/AppShell/SideBar.tsx b/src/Components/AppShell/SideBar.tsx
index 7b1754c5..59a9a2d5 100644
--- a/src/Components/AppShell/SideBar.tsx
+++ b/src/Components/AppShell/SideBar.tsx
@@ -1,13 +1,12 @@
-import { useRef, useState } from 'react'
-import { useEffect } from 'react'
-import { NavLink, useLocation } from 'react-router-dom';
+import { useRef, useState, useEffect } from 'react'
+import { NavLink, useLocation } from 'react-router-dom'
import {
Sidenav,
- initTE,
-} from "tw-elements";
-import SidebarSubmenu from './SidebarSubmenu';
-import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon';
-import * as React from 'react';
+ initTE
+} from 'tw-elements'
+import SidebarSubmenu from './SidebarSubmenu'
+import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon'
+import * as React from 'react'
type route = {
path: string;
@@ -18,53 +17,46 @@ type route = {
blank?: boolean
}
-
-export function SideBar({ routes, bottomRoutes }: { routes: route[], bottomRoutes?: route[] }) {
-
+export function SideBar ({ routes, bottomRoutes }: { routes: route[], bottomRoutes?: route[] }) {
// prevent react18 from calling useEffect twice
const init = useRef(false)
- const location = useLocation();
-
- const [instance, setInstance] = useState
+
@@ -139,6 +127,6 @@ export default function NavBar({ appName, userType}: { appName: string, userType
Login
-
+
@@ -126,11 +115,10 @@ export default function NavBar({ appName, userType}: { appName: string, userType
Sign Up
-
-
- Login -
- Sign Up +
- Login +
- Sign Up
Reset Password
setEmail(e.target.value)} className="tw-input tw-input-bordered tw-w-full tw-max-w-xs" /> @@ -42,6 +41,5 @@ export function RequestPasswordPage({reset_url}) {Set new Password
setPassword(e.target.value)} className="tw-input tw-input-bordered tw-w-full tw-max-w-xs" /> @@ -43,6 +42,5 @@ export function SetNewPasswordPage() {Sign Up
setUserName(e.target.value)} className="tw-input tw-input-bordered tw-w-full tw-max-w-xs" /> @@ -63,6 +61,5 @@ export function SignupPage() {
+ useEffect(() => {
+ setProfie(items.find(i => i.user_created?.id === user?.id && i.layer?.itemType.name == 'user' && i.user_created?.id != null))
+ }, [items, user])
+
+ return (
+ <>{questsOpen
+ ?
- : ""
+ : ''
}
- )
-
-
+ )
}
diff --git a/src/Components/Gaming/hooks/useQuests.tsx b/src/Components/Gaming/hooks/useQuests.tsx
index 475960c2..872e16b4 100644
--- a/src/Components/Gaming/hooks/useQuests.tsx
+++ b/src/Components/Gaming/hooks/useQuests.tsx
@@ -1,28 +1,25 @@
-import { useCallback, useState } from 'react';
-import { createContext, useContext } from "react";
-import * as React from "react";
-
-
+import { useCallback, useState, createContext, useContext } from 'react'
+import * as React from 'react'
type UseQuestManagerResult = ReturnType;
const QuestContext = createContext({
open: false,
setQuestsOpen: () => { }
-});
+})
-function useQuestsManager(initialOpen: boolean): {
+function useQuestsManager (initialOpen: boolean): {
open: boolean;
// eslint-disable-next-line no-unused-vars
setQuestsOpen: (open: boolean) => void;
} {
- const [open, setOpen] = useState(initialOpen);
+ const [open, setOpen] = useState(initialOpen)
const setQuestsOpen = useCallback((questOpen: boolean) => {
- setOpen(questOpen);
- }, []);
+ setOpen(questOpen)
+ }, [])
- return { open, setQuestsOpen };
+ return { open, setQuestsOpen }
}
export const QuestsProvider: React.FunctionComponent<{
@@ -31,15 +28,14 @@ export const QuestsProvider: React.FunctionComponent<{
{children}
-);
+)
export const useQuestsOpen = (): boolean => {
- const { open } = useContext(QuestContext);
- return open;
-};
-
-
-export const useSetQuestOpen = (): UseQuestManagerResult["setQuestsOpen"] => {
- const { setQuestsOpen } = useContext(QuestContext);
- return setQuestsOpen;
+ const { open } = useContext(QuestContext)
+ return open
+}
+
+export const useSetQuestOpen = (): UseQuestManagerResult['setQuestsOpen'] => {
+ const { setQuestsOpen } = useContext(QuestContext)
+ return setQuestsOpen
}
diff --git a/src/Components/Gaming/index.tsx b/src/Components/Gaming/index.tsx
index d88f05cb..78c873a9 100644
--- a/src/Components/Gaming/index.tsx
+++ b/src/Components/Gaming/index.tsx
@@ -1,2 +1,2 @@
-export {Modal} from './Modal'
-export {Quests} from './Quests'
\ No newline at end of file
+export { Modal } from './Modal'
+export { Quests } from './Quests'
diff --git a/src/Components/Input/Autocomplete.tsx b/src/Components/Input/Autocomplete.tsx
index 6209c58c..86e77132 100644
--- a/src/Components/Input/Autocomplete.tsx
+++ b/src/Components/Input/Autocomplete.tsx
@@ -1,76 +1,74 @@
import * as React from 'react'
-import { useEffect } from 'react';
-import { TagView } from '../Templates/TagView';
+import { useEffect } from 'react'
+import { TagView } from '../Templates/TagView'
// eslint-disable-next-line no-unused-vars
export const Autocomplete = ({ inputProps, suggestions, onSelected, pushFilteredSuggestions, setFocus }: { inputProps: any, suggestions: Array, onSelected: (suggestion) => void, pushFilteredSuggestions?: Array, setFocus?: boolean }) => {
-
- const [filteredSuggestions, setFilteredSuggestions] = React.useState>([]);
- const [heighlightedSuggestion, setHeighlightedSuggestion] = React.useState(0);
-
+ const [filteredSuggestions, setFilteredSuggestions] = React.useState>([])
+ const [heighlightedSuggestion, setHeighlightedSuggestion] = React.useState(0)
useEffect(() => {
pushFilteredSuggestions && setFilteredSuggestions(pushFilteredSuggestions)
}, [pushFilteredSuggestions])
useEffect(() => {
- setFocus && inputRef.current?.focus();
+ setFocus && inputRef.current?.focus()
}, [setFocus])
- const inputRef = React.useRef();
-
+ const inputRef = React.useRef()
// eslint-disable-next-line no-unused-vars
- const getSuggestionValue = suggestion => suggestion.name;
+ const getSuggestionValue = suggestion => suggestion.name
const getSuggestions = value => {
- const inputValue = value.trim().toLowerCase();
- const inputLength = inputValue.length;
+ const inputValue = value.trim().toLowerCase()
+ const inputLength = inputValue.length
- return inputLength === 0 ? [] : suggestions.filter(tag =>
- tag.name.toLowerCase().slice(0, inputLength) === inputValue
- );
- };
+ return inputLength === 0
+ ? []
+ : suggestions.filter(tag =>
+ tag.name.toLowerCase().slice(0, inputLength) === inputValue
+ )
+ }
const handleChange = (e) => {
setFilteredSuggestions(getSuggestions(e.target.value))
// Call the parent's onChange handler, if it exists
if (inputProps.onChange) {
- inputProps.onChange(e);
+ inputProps.onChange(e)
}
- };
+ }
-
- function handleSuggestionClick(suggestion) {
+ function handleSuggestionClick (suggestion) {
onSelected(suggestion)
}
- const handleKeyDown = (event) => {
+ const handleKeyDown = (event) => {
switch (event.key) {
case 'ArrowDown':
- heighlightedSuggestion < filteredSuggestions.length-1 && setHeighlightedSuggestion(current => current +1)
- break;
+ heighlightedSuggestion < filteredSuggestions.length - 1 && setHeighlightedSuggestion(current => current + 1)
+ break
case 'ArrowUp':
- heighlightedSuggestion>0 && setHeighlightedSuggestion(current => current -1)
- break;
+ heighlightedSuggestion > 0 && setHeighlightedSuggestion(current => current - 1)
+ break
case 'Enter':
- if(filteredSuggestions.length > 0) {
- onSelected(filteredSuggestions[heighlightedSuggestion]);
- setHeighlightedSuggestion(0);
+ if (filteredSuggestions.length > 0) {
+ onSelected(filteredSuggestions[heighlightedSuggestion])
+ setHeighlightedSuggestion(0)
}
- filteredSuggestions.length == 0 && inputProps.onKeyDown(event);
- break;
+ filteredSuggestions.length == 0 && inputProps.onKeyDown(event)
+ break
default:
- inputProps.onKeyDown(event);
- break;
+ inputProps.onKeyDown(event)
+ break
}
}
return (
@@ -39,17 +37,15 @@ export function Quests() {
-
-
-
-
+
+
+
handleChange(e)} tabIndex="-1" onKeyDown={handleKeyDown}/>
-
- 0 && 'tw-bg-base-100 tw-rounded-xl tw-p-2'}`}>
+
- handleSuggestionClick(suggestion)}>
-
- item.layer?.customEditLink ? navigate(`${item.layer.customEditLink}${item.layer.customEditParameter ? `/${getValue(item, item.layer.customEditParameter)}${params && "?"+params}` : ""} `) : editCallback(e)}>
+ {((api?.updateItem && hasUserPermission(api.collectionName!, 'update', item))) && editCallback &&
- + item.layer?.customEditLink ? navigate(`${item.layer.customEditLink}${item.layer.customEditParameter ? `/${getValue(item, item.layer.customEditParameter)}${params && '?' + params}` : ''} `) : editCallback(e)}>
} - {((api?.updateItem && hasUserPermission(api.collectionName!, "update", item))) && setPositionCallback &&- + {((api?.updateItem && hasUserPermission(api.collectionName!, 'update', item))) && setPositionCallback &&
- + {api?.deleteItem && hasUserPermission(api.collectionName!, 'delete', item) && deleteCallback &&
- - {loading ? - : - @@ -119,7 +114,7 @@ export function HeaderView({ item, api, editCallback, deleteCallback, setPositio Do you want to delete {item.name}?
) - }; + } /* eslint-enable react/prop-types */ // eslint-disable-next-line react/display-name @@ -128,40 +126,39 @@ export const TextView = ({ item, truncate = false, itemTextField, rawText }: { i allow="fullscreen; picture-in-picture" allowFullScreen /> - )); + )) return ( -diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx index b01fa608..aaed0a96 100644 --- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx +++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx @@ -1,19 +1,14 @@ import { Link } from 'react-router-dom' import { getValue } from '../../../../Utils/GetValue' import { Item } from '../../../../types' -import { useGetItemTags } from '../../hooks/useTags'; +import { useGetItemTags } from '../../hooks/useTags' +export const PopupButton = ({ url, parameterField, text, colorField, item } : {url: string, parameterField?: string, text: string, colorField?: string, item? : Item}) => { + const params = new URLSearchParams(window.location.search) + const getItemTags = useGetItemTags() -export const PopupButton = ({url, parameterField, text, colorField, item} : {url: string, parameterField?: string, text: string, colorField?: string, item? : Item}) => { + return ( + - const params = new URLSearchParams(window.location.search); - const getItemTags = useGetItemTags(); - - - - - return ( - - - ) + ) } diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx index c38f55ad..b2b4af71 100644 --- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx +++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx @@ -6,8 +6,7 @@ export const PopupCheckboxInput = ({ dataField, label, item }: label: string, item?: Item }) => { - - return ( + return ( - ) + ) } diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx index 17290448..0744237a 100644 --- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx +++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx @@ -6,16 +6,16 @@ type StartEndInputProps = { item?:Item, showLabels?: boolean // eslint-disable-next-line no-unused-vars - updateStartValue?: (value: string ) => void; + updateStartValue?: (value: string) => void; // eslint-disable-next-line no-unused-vars - updateEndValue?: (value: string ) => void; + updateEndValue?: (value: string) => void; } -export const PopupStartEndInput = ({item, showLabels = true, updateStartValue, updateEndValue}:StartEndInputProps) => { - return ( +export const PopupStartEndInput = ({ item, showLabels = true, updateStartValue, updateEndValue }:StartEndInputProps) => { + return (- +-- ) + ) } diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx index 693220cc..b52b0d91 100644 --- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx +++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx @@ -9,8 +9,7 @@ export const PopupTextAreaInput = ({ dataField, placeholder, style, item }: style?: string, item?: Item }) => { - - return ( -- + + - ) + return ( + + ) } diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx index 10f15a8f..ede1a2a9 100644 --- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx +++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx @@ -9,8 +9,7 @@ export const PopupTextInput = ({ dataField, placeholder, style, item }: style?: string, item?: Item }) => { - - return ( - - ) + return ( + + ) } diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx index c834d1d8..4e5d7315 100644 --- a/src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx +++ b/src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx @@ -1,14 +1,14 @@ import * as React from 'react' import { Item } from '../../../../types' -export const StartEndView = ({item} : {item?:Item}) => { +export const StartEndView = ({ item } : {item?:Item}) => { return ( ) } - diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx index 89a5363f..dd699818 100644 --- a/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx +++ b/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx @@ -1,95 +1,93 @@ -import { Item } from '../../../../types'; -import { useTags } from '../../hooks/useTags'; -import { useAddFilterTag } from '../../hooks/useFilter'; -import { hashTagRegex } from '../../../../Utils/HashTagRegex'; -import { fixUrls, mailRegex } from '../../../../Utils/ReplaceURLs'; -import Markdown from 'react-markdown'; -import { getValue } from '../../../../Utils/GetValue'; -import remarkBreaks from 'remark-breaks'; -import { decodeTag } from '../../../../Utils/FormatTags'; -import { memo } from 'react'; +import { Item } from '../../../../types' +import { useTags } from '../../hooks/useTags' +import { useAddFilterTag } from '../../hooks/useFilter' +import { hashTagRegex } from '../../../../Utils/HashTagRegex' +import { fixUrls, mailRegex } from '../../../../Utils/ReplaceURLs' +import Markdown from 'react-markdown' +import { getValue } from '../../../../Utils/GetValue' +import remarkBreaks from 'remark-breaks' +import { decodeTag } from '../../../../Utils/FormatTags' +import { memo } from 'react' export const TextView = ({ item, truncate = false, itemTextField, rawText }: { item?: Item, truncate?: boolean, itemTextField?: string, rawText?: string }) => { - const tags = useTags(); - const addFilterTag = useAddFilterTag(); + const tags = useTags() + const addFilterTag = useAddFilterTag() - let text = ""; - let replacedText = ""; + let text = '' + let replacedText = '' - if (rawText) - text = replacedText = rawText; - else if (itemTextField && item) - text = getValue(item, itemTextField); - else - text = item?.layer?.itemTextField && item ? getValue(item, item.layer?.itemTextField) : ""; + if (rawText) { text = replacedText = rawText } else if (itemTextField && item) { text = getValue(item, itemTextField) } else { text = item?.layer?.itemTextField && item ? getValue(item, item.layer?.itemTextField) : '' } - if (item && text && truncate) text = truncateText(removeMarkdownKeepLinksAndParagraphs(text), 100); + if (item && text && truncate) text = truncateText(removeMarkdownKeepLinksAndParagraphs(text), 100) - - item && text ? replacedText = fixUrls(text) : ""; + item && text ? replacedText = fixUrls(text) : '' // eslint-disable-next-line no-useless-escape replacedText ? replacedText = replacedText.replace(/(? { - let shortUrl = url; + let shortUrl = url // eslint-disable-next-line no-useless-escape if (url.match('^https:\/\/')) { - shortUrl = url.split('https://')[1]; + shortUrl = url.split('https://')[1] } // eslint-disable-next-line no-useless-escape if (url.match('^http:\/\/')) { - shortUrl = url.split('http://')[1]; + shortUrl = url.split('http://')[1] } - return `[${shortUrl}](${url})`; - }) : ""; + return `[${shortUrl}](${url})` + }) : '' - replacedText ? replacedText = replacedText.replace(mailRegex, (url) => { - return `[${url}](mailto:${url})`; - }) : ""; + replacedText + ? replacedText = replacedText.replace(mailRegex, (url) => { + return `[${url}](mailto:${url})` + }) + : '' - replacedText ? replacedText = replacedText.replace(hashTagRegex, (match) => { - return `[${match}](${match})`; - }) : ""; + replacedText + ? replacedText = replacedText.replace(hashTagRegex, (match) => { + return `[${match}](${match})` + }) + : '' // eslint-disable-next-line react/prop-types const CustomH1 = ({ children }) => (- +- @@ -17,9 +17,8 @@ export const StartEndView = ({item} : {item?:Item}) => { - +{children}
- ); + ) // eslint-disable-next-line react/prop-types const CustomH2 = ({ children }) => ({children}
- ); + ) // eslint-disable-next-line react/prop-types const CustomH3 = ({ children }) => ({children}
- ); + ) // eslint-disable-next-line react/prop-types const CustomH4 = ({ children }) => ({children}
- ); + ) // eslint-disable-next-line react/prop-types const CustomH5 = ({ children }) => ({children}
- ); + ) // eslint-disable-next-line react/prop-types const CustomH6 = ({ children }) => ({children}
- ); + ) // eslint-disable-next-line react/prop-types const CustomParagraph = ({ children }) => ({children}
- ); + ) // eslint-disable-next-line react/prop-types const CustomUnorderdList = ({ children }) => (- {children}
- {children}
{children} - ); + ) // eslint-disable-next-line react/prop-types const CustomImage = ({ alt, src, title }) => (- ); + ) // eslint-disable-next-line react/prop-types const CustomExternalLink = ({ href, children }) => ( {children} - ); + ) /* eslint-disable react/prop-types */ const CustomHashTagLink = ({ children, tag, item }) => { return ( @@ -113,11 +111,11 @@ export const TextView = ({ item, truncate = false, itemTextField, rawText }: { i style={{ color: tag ? tag.color : '#faa', fontWeight: 'bold', cursor: 'pointer' }} key={tag ? tag.name + item!.id : item.id} onClick={(e) => { - e.stopPropagation(); - addFilterTag(tag!); + e.stopPropagation() + addFilterTag(tag!) }}>{decodeTag(children)}
{ // eslint-disable-next-line react/prop-types - const isYouTubeVideo = href?.startsWith('https://www.youtube.com/watch?v='); + const isYouTubeVideo = href?.startsWith('https://www.youtube.com/watch?v=') // eslint-disable-next-line react/prop-types - const isRumbleVideo = href?.startsWith('https://rumble.com/embed/'); - + const isRumbleVideo = href?.startsWith('https://rumble.com/embed/') if (isYouTubeVideo) { // eslint-disable-next-line react/prop-types - const videoId = href?.split('v=')[1].split('&')[0]; - const youtubeEmbedUrl = `https://www.youtube-nocookie.com/embed/${videoId}`; + const videoId = href?.split('v=')[1].split('&')[0] + const youtubeEmbedUrl = `https://www.youtube-nocookie.com/embed/${videoId}` return ( - ); -}; + ) +} -function removeMarkdownKeepLinksAndParagraphs(text) { +function removeMarkdownKeepLinksAndParagraphs (text) { // Remove Markdown syntax using regular expressions but keep links and paragraphs return text .replace(/!\[.*?\]\(.*?\)/g, '') // Remove images @@ -189,29 +186,29 @@ function removeMarkdownKeepLinksAndParagraphs(text) { .replace(/(#+)\s+(.*)/g, '$2') // Remove headers .replace(/>\s+(.*)/g, '$1') // Remove blockquotes .replace(/^\s*\n/gm, '\n') // Preserve empty lines - .replace(/(\r\n|\n|\r)/gm, '\n'); // Preserve line breaks + .replace(/(\r\n|\n|\r)/gm, '\n') // Preserve line breaks } -function truncateText(text, limit) { +function truncateText (text, limit) { if (text.length <= limit) { - return text; + return text } - let truncated = ""; - let length = 0; + let truncated = '' + let length = 0 // Split the text by paragraphs - const paragraphs = text.split('\n'); + const paragraphs = text.split('\n') for (const paragraph of paragraphs) { if (length + paragraph.length > limit) { - truncated += paragraph.slice(0, limit - length) + '...'; - break; + truncated += paragraph.slice(0, limit - length) + '...' + break } else { - truncated += paragraph + '\n'; - length += paragraph.length; + truncated += paragraph + '\n' + length += paragraph.length } } - return truncated.trim(); + return truncated.trim() } diff --git a/src/Components/Map/Subcomponents/ItemViewPopup.tsx b/src/Components/Map/Subcomponents/ItemViewPopup.tsx index b7566ec4..c095edf2 100644 --- a/src/Components/Map/Subcomponents/ItemViewPopup.tsx +++ b/src/Components/Map/Subcomponents/ItemViewPopup.tsx @@ -12,92 +12,82 @@ import { useRemoveItem, useUpdateItem } from '../hooks/useItems' import { toast } from 'react-toastify' import { useSetSelectPosition } from '../hooks/useSelectPosition' - export interface ItemViewPopupProps { item: Item, children?: React.ReactNode; setItemFormPopup?: React.Dispatch- ); + ) } if (isRumbleVideo) { return ( - ); + ) } // eslint-disable-next-line react/prop-types - if (href?.startsWith("#")) { - const tag = tags.find(t => t.name.toLowerCase() === decodeURI(href).slice(1).toLowerCase()); - return {children} ; + if (href?.startsWith('#')) { + const tag = tags.find(t => t.name.toLowerCase() === decodeURI(href).slice(1).toLowerCase()) + return{children} } else { return ({children} - ); + ) } }, ul: CustomUnorderdList, @@ -173,14 +170,14 @@ export const TextView = ({ item, truncate = false, itemTextField, rawText }: { i h3: CustomH3, h4: CustomH4, h5: CustomH5, - h6: CustomH6, + h6: CustomH6 }}> {replacedText}(false); - const removeItem = useRemoveItem(); - const updadateItem = useUpdateItem(); - const navigate = useNavigate(); - const setSelectPosition = useSetSelectPosition(); + const map = useMap() + const [loading, setLoading] = React.useState (false) + const removeItem = useRemoveItem() + const updadateItem = useUpdateItem() + const navigate = useNavigate() + const setSelectPosition = useSetSelectPosition() - - const [infoExpanded, setInfoExpanded] = useState (false); + const [infoExpanded, setInfoExpanded] = useState (false) const handleEdit = (event: React.MouseEvent ) => { - event.stopPropagation(); - map.closePopup(); + event.stopPropagation() + map.closePopup() props.setItemFormPopup && props.setItemFormPopup({ position: new LatLng(props.item.position?.coordinates[1]!, props.item.position?.coordinates[0]!), layer: props.item.layer!, item: props.item, setItemFormPopup: props.setItemFormPopup }) } const handleDelete = async (event: React.MouseEvent ) => { - event.stopPropagation(); - setLoading(true); - let success = false; + event.stopPropagation() + setLoading(true) + let success = false try { - !props.item.layer?.onlyOnePerOwner && await props.item.layer?.api?.deleteItem!(props.item.id); - props.item.layer?.onlyOnePerOwner && await props.item.layer.api?.updateItem!({id: props.item.id, position: null}) - success = true; + !props.item.layer?.onlyOnePerOwner && await props.item.layer?.api?.deleteItem!(props.item.id) + props.item.layer?.onlyOnePerOwner && await props.item.layer.api?.updateItem!({ id: props.item.id, position: null }) + success = true } catch (error) { - toast.error(error.toString()); + toast.error(error.toString()) } if (success) { - !props.item.layer?.onlyOnePerOwner && removeItem(props.item); - props.item.layer?.onlyOnePerOwner && updadateItem({...props.item, position: undefined}); - toast.success("Item deleted"); + !props.item.layer?.onlyOnePerOwner && removeItem(props.item) + props.item.layer?.onlyOnePerOwner && updadateItem({ ...props.item, position: undefined }) + toast.success('Item deleted') } - setLoading(false); - map.closePopup(); - const params = new URLSearchParams(window.location.search); - window.history.pushState({}, "", "/" + `${params ? `?${params}` : ""}`); - navigate("/"); + setLoading(false) + map.closePopup() + const params = new URLSearchParams(window.location.search) + window.history.pushState({}, '', '/' + `${params ? `?${params}` : ''}`) + navigate('/') } - return ( {map.closePopup();setSelectPosition(props.item); navigate("/")}} loading={loading}/> + { map.closePopup(); setSelectPosition(props.item); navigate('/') }} loading={loading}/> - {props.children ? + {props.children - React.Children.toArray(props.children).map((child) => - React.isValidElement<{ item: Item, test: string }>(child) ? - React.cloneElement(child, { item: props.item }) : "" + ? React.Children.toArray(props.children).map((child) => + React.isValidElement<{ item: Item, test: string }>(child) + ? React.cloneElement(child, { item: props.item }) + : '' ) - : - -+ : } - { - infoExpanded ? -{`${props.item.date_updated && props.item.date_updated != props.item.date_created ? "updated" : "posted" } ${props.item && props.item.user_created && props.item.user_created.first_name ? `by ${props.item.user_created.first_name}` : ""} ${props.item.date_updated ? timeAgo(props.item.date_updated) : timeAgo(props.item.date_created!)}`}
- : -setInfoExpanded(true)}>β
+ infoExpanded + ?{`${props.item.date_updated && props.item.date_updated != props.item.date_created ? 'updated' : 'posted'} ${props.item && props.item.user_created && props.item.user_created.first_name ? `by ${props.item.user_created.first_name}` : ''} ${props.item.date_updated ? timeAgo(props.item.date_updated) : timeAgo(props.item.date_created!)}`}
+ :setInfoExpanded(true)}>β
} - { //** */ + { //* * */ }@@ -12,5 +11,5 @@ export const SelectPosition = ({ setSelectNewItemPosition }: { setSelectNewItem - ();
- const [mapClicked, setMapClicked] = useState
(); - const updateItem = useUpdateItem(); - const hasUserPermission = useHasUserPermission(); + } { + const [selectPosition, setSelectPosition] = useState (null) + const [markerClicked, setMarkerClicked] = useState - () + const [mapClicked, setMapClicked] = useState
() + const updateItem = useUpdateItem() + const hasUserPermission = useHasUserPermission() - - - useEffect(() => { - if (selectPosition && markerClicked && 'text' in selectPosition && markerClicked.id !==selectPosition.id) { - itemUpdateParent({ ...selectPosition, parent: markerClicked.id }) - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [markerClicked]) - - useEffect(() => { - if (selectPosition != null) { - if ('menuIcon' in selectPosition) { - mapClicked && mapClicked.setItemFormPopup({ layer: selectPosition as LayerProps, position: mapClicked?.position }) - setSelectPosition(null) - } - if ('text' in selectPosition) { - const position = mapClicked?.position.lng && new Geometry(mapClicked?.position.lng, mapClicked?.position.lat); - position && itemUpdatePosition({ ...selectPosition as Item, position: position }) - setSelectPosition(null); - } + useEffect(() => { + if (selectPosition && markerClicked && 'text' in selectPosition && markerClicked.id !== selectPosition.id) { + itemUpdateParent({ ...selectPosition, parent: markerClicked.id }) } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [mapClicked]) - - - const itemUpdateParent = async (updatedItem: Item) => { - if (markerClicked?.layer?.api?.collectionName && hasUserPermission(markerClicked?.layer?.api?.collectionName, "update", markerClicked)) { - let success = false; - try { - await updatedItem?.layer?.api?.updateItem!({ id: updatedItem.id, parent: updatedItem.parent, position: null }) - success = true; - } catch (error) { - toast.error(error.toString()); - } - if (success) { - await updateItem({ ...updatedItem, parent: updatedItem.parent, position: undefined }) - await linkItem(updatedItem.id); - toast.success("Item position updated"); - setSelectPosition(null); - setMarkerClicked(null); - } - } - else { - setSelectPosition(null); - toast.error("you don't have permission to add items to " + markerClicked?.name); - } + }, [markerClicked]) + useEffect(() => { + if (selectPosition != null) { + if ('menuIcon' in selectPosition) { + mapClicked && mapClicked.setItemFormPopup({ layer: selectPosition as LayerProps, position: mapClicked?.position }) + setSelectPosition(null) + } + if ('text' in selectPosition) { + const position = mapClicked?.position.lng && new Geometry(mapClicked?.position.lng, mapClicked?.position.lat) + position && itemUpdatePosition({ ...selectPosition as Item, position }) + setSelectPosition(null) + } } - const itemUpdatePosition = async (updatedItem: Item) => { - let success = false; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [mapClicked]) + + const itemUpdateParent = async (updatedItem: Item) => { + if (markerClicked?.layer?.api?.collectionName && hasUserPermission(markerClicked?.layer?.api?.collectionName, 'update', markerClicked)) { + let success = false + try { + await updatedItem?.layer?.api?.updateItem!({ id: updatedItem.id, parent: updatedItem.parent, position: null }) + success = true + } catch (error) { + toast.error(error.toString()) + } + if (success) { + await updateItem({ ...updatedItem, parent: updatedItem.parent, position: undefined }) + await linkItem(updatedItem.id) + toast.success('Item position updated') + setSelectPosition(null) + setMarkerClicked(null) + } + } else { + setSelectPosition(null) + toast.error("you don't have permission to add items to " + markerClicked?.name) + } + } + + const itemUpdatePosition = async (updatedItem: Item) => { + let success = false + try { + await updatedItem?.layer?.api?.updateItem!({ id: updatedItem.id, position: updatedItem.position }) + success = true + } catch (error) { + toast.error(error.toString()) + } + if (success) { + updateItem(updatedItem) + toast.success('Item position updated') + } + } + + const linkItem = async (id: string) => { + if (markerClicked) { + const new_relations = markerClicked.relations || [] + + if (!new_relations.some(r => r.related_items_id == id)) { + new_relations?.push({ items_id: markerClicked.id, related_items_id: id }) + const updatedItem = { id: markerClicked.id, relations: new_relations } + + let success = false try { - await updatedItem?.layer?.api?.updateItem!({ id: updatedItem.id, position: updatedItem.position }) - success = true; + await markerClicked?.layer?.api?.updateItem!(updatedItem) + success = true } catch (error) { - toast.error(error.toString()); + toast.error(error.toString()) } if (success) { - updateItem(updatedItem) - toast.success("Item position updated"); + updateItem({ ...markerClicked, relations: new_relations }) + toast.success('Item linked') } + } } - - const linkItem = async (id: string) => { - if (markerClicked) { - const new_relations = markerClicked.relations || []; - - if (!new_relations.some(r => r.related_items_id == id)) { - new_relations?.push({ items_id: markerClicked.id, related_items_id: id }) - const updatedItem = { id: markerClicked.id, relations: new_relations } - - let success = false; - try { - await markerClicked?.layer?.api?.updateItem!(updatedItem) - success = true; - } catch (error) { - toast.error(error.toString()); - } - if (success) { - updateItem({ ...markerClicked, relations: new_relations }) - toast.success("Item linked"); - } - } - } - } - return { selectPosition, setSelectPosition, setMarkerClicked, setMapClicked }; + } + return { selectPosition, setSelectPosition, setMarkerClicked, setMapClicked } } export const SelectPositionProvider: React.FunctionComponent<{ @@ -128,24 +123,24 @@ export const SelectPositionProvider: React.FunctionComponent<{ {children} -); +) export const useSelectPosition = (): Item | LayerProps | null => { - const { selectPosition } = useContext(SelectPositionContext); - return selectPosition; -}; - -export const useSetSelectPosition = (): UseSelectPositionManagerResult["setSelectPosition"] => { - const { setSelectPosition } = useContext(SelectPositionContext); - return setSelectPosition; + const { selectPosition } = useContext(SelectPositionContext) + return selectPosition } -export const useSetMarkerClicked = (): UseSelectPositionManagerResult["setMarkerClicked"] => { - const { setMarkerClicked } = useContext(SelectPositionContext); - return setMarkerClicked; +export const useSetSelectPosition = (): UseSelectPositionManagerResult['setSelectPosition'] => { + const { setSelectPosition } = useContext(SelectPositionContext) + return setSelectPosition } -export const useSetMapClicked = (): UseSelectPositionManagerResult["setMapClicked"] => { - const { setMapClicked } = useContext(SelectPositionContext); - return setMapClicked; -} \ No newline at end of file +export const useSetMarkerClicked = (): UseSelectPositionManagerResult['setMarkerClicked'] => { + const { setMarkerClicked } = useContext(SelectPositionContext) + return setMarkerClicked +} + +export const useSetMapClicked = (): UseSelectPositionManagerResult['setMapClicked'] => { + const { setMapClicked } = useContext(SelectPositionContext) + return setMapClicked +} diff --git a/src/Components/Map/hooks/useTags.tsx b/src/Components/Map/hooks/useTags.tsx index 33104afc..4efeef68 100644 --- a/src/Components/Map/hooks/useTags.tsx +++ b/src/Components/Map/hooks/useTags.tsx @@ -1,13 +1,13 @@ /* eslint-disable no-unused-vars */ -import { useCallback, useReducer, createContext, useContext, useState } from "react"; -import * as React from "react"; -import { Item, ItemsApi, Tag } from "../../../types"; -import { hashTagRegex } from "../../../Utils/HashTagRegex"; -import { getValue } from "../../../Utils/GetValue"; +import { useCallback, useReducer, createContext, useContext, useState } from 'react' +import * as React from 'react' +import { Item, ItemsApi, Tag } from '../../../types' +import { hashTagRegex } from '../../../Utils/HashTagRegex' +import { getValue } from '../../../Utils/GetValue' type ActionType = - | { type: "ADD"; tag: Tag } - | { type: "REMOVE"; id: string }; + | { type: 'ADD'; tag: Tag } + | { type: 'REMOVE'; id: string }; type UseTagManagerResult = ReturnType; @@ -18,9 +18,9 @@ const TagContext = createContext ({ setTagData: () => { }, getItemTags: () => [], allTagsLoaded: false -}); +}) -function useTagsManager(initialTags: Tag[]): { +function useTagsManager (initialTags: Tag[]): { tags: Tag[]; addTag: (tag: Tag) => void; setTagApi: (api: ItemsApi ) => void; @@ -28,92 +28,85 @@ function useTagsManager(initialTags: Tag[]): { getItemTags: (item: Item) => Tag[]; allTagsLoaded: boolean } { - - const [allTagsLoaded, setallTagsLoaded] = useState (false); - const [tagCount, setTagCount] = useState (0); + const [allTagsLoaded, setallTagsLoaded] = useState (false) + const [tagCount, setTagCount] = useState (0) const [tags, dispatch] = useReducer((state: Tag[], action: ActionType) => { switch (action.type) { - case "ADD": + case 'ADD': // eslint-disable-next-line no-case-declarations const exist = state.find((tag) => - tag.name.toLocaleLowerCase() === action.tag.name.toLocaleLowerCase() ? true : false - ); + tag.name.toLocaleLowerCase() === action.tag.name.toLocaleLowerCase() + ) if (!exist) { const newState = [ ...state, - { ...action.tag} - ]; - if(tagCount == newState.length) setallTagsLoaded(true); - return newState; - } - else return state; + { ...action.tag } + ] + if (tagCount == newState.length) setallTagsLoaded(true) + return newState + } else return state default: - throw new Error(); + throw new Error() } - }, initialTags); + }, initialTags) const [api, setApi] = React.useState ) - const setTagApi = useCallback(async (api: ItemsApi ) => { - setApi(api); - const result = await api.getItems(); - setTagCount(result.length); - if(tagCount == 0) setallTagsLoaded(true); + setApi(api) + const result = await api.getItems() + setTagCount(result.length) + if (tagCount == 0) setallTagsLoaded(true) if (result) { result.map(tag => { - //tag.name = tag.name.toLocaleLowerCase(); - dispatch({ type: "ADD", tag }); + // tag.name = tag.name.toLocaleLowerCase(); + dispatch({ type: 'ADD', tag }) }) } - // eslint-disable-next-line react-hooks/exhaustive-deps }, []) const setTagData = useCallback((data: Tag[]) => { data.map(tag => { - //tag.name = tag.name.toLocaleLowerCase(); - dispatch({ type: "ADD", tag }) + // tag.name = tag.name.toLocaleLowerCase(); + dispatch({ type: 'ADD', tag }) }) - }, []); - - const addTag = (tag: Tag) => { - dispatch({ - type: "ADD", - tag, - }); - if (!tags.some((t) => t.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())) { - api?.createItem && api.createItem(tag); - } - - }; + }, []) + const addTag = (tag: Tag) => { + dispatch({ + type: 'ADD', + tag + }) + if (!tags.some((t) => t.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())) { + api?.createItem && api.createItem(tag) + } + } const getItemTags = useCallback((item: Item) => { - const text = item?.layer?.itemTextField && item ? getValue(item, item.layer?.itemTextField) : undefined; - const itemTagStrings = text?.match(hashTagRegex); - const itemTags: Tag[] = []; + const text = item?.layer?.itemTextField && item ? getValue(item, item.layer?.itemTextField) : undefined + const itemTagStrings = text?.match(hashTagRegex) + const itemTags: Tag[] = [] itemTagStrings?.map(tag => { if (tags.find(t => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) { itemTags.push(tags.find(t => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())!) } - }) + }) item.layer?.itemOffersField && getValue(item, item.layer.itemOffersField)?.map(o => { - const offer = tags.find(t=> t.id === o.tags_id) + const offer = tags.find(t => t.id === o.tags_id) offer && itemTags.push(offer) - }); + }) item.layer?.itemNeedsField && getValue(item, item.layer.itemNeedsField)?.map(n => { - const need = tags.find(t=>t.id === n.tags_id); - need && itemTags.push(need); - }); + const need = tags.find(t => t.id === n.tags_id) + need && itemTags.push(need) + }) return itemTags - }, [tags]); + }, [tags]) - - return { tags, addTag, setTagApi, setTagData, getItemTags, allTagsLoaded }; + return { tags, addTag, setTagApi, setTagData, getItemTags, allTagsLoaded } } export const TagsProvider: React.FunctionComponent<{ @@ -122,35 +115,34 @@ export const TagsProvider: React.FunctionComponent<{ {children} -); +) export const useTags = (): Tag[] => { - const { tags } = useContext(TagContext); - return tags; -}; - -export const useAddTag = (): UseTagManagerResult["addTag"] => { - const { addTag } = useContext(TagContext); - return addTag; -}; - -export const useSetTagApi = (): UseTagManagerResult["setTagApi"] => { - const { setTagApi } = useContext(TagContext); - return setTagApi; + const { tags } = useContext(TagContext) + return tags } -export const useSetTagData = (): UseTagManagerResult["setTagData"] => { - const { setTagData } = useContext(TagContext); - return setTagData; +export const useAddTag = (): UseTagManagerResult['addTag'] => { + const { addTag } = useContext(TagContext) + return addTag } - -export const useGetItemTags = (): UseTagManagerResult["getItemTags"] => { - const { getItemTags } = useContext(TagContext); - return getItemTags; +export const useSetTagApi = (): UseTagManagerResult['setTagApi'] => { + const { setTagApi } = useContext(TagContext) + return setTagApi } -export const useAllTagsLoaded = (): UseTagManagerResult["allTagsLoaded"] => { - const { allTagsLoaded } = useContext(TagContext); - return allTagsLoaded; -} \ No newline at end of file +export const useSetTagData = (): UseTagManagerResult['setTagData'] => { + const { setTagData } = useContext(TagContext) + return setTagData +} + +export const useGetItemTags = (): UseTagManagerResult['getItemTags'] => { + const { getItemTags } = useContext(TagContext) + return getItemTags +} + +export const useAllTagsLoaded = (): UseTagManagerResult['allTagsLoaded'] => { + const { allTagsLoaded } = useContext(TagContext) + return allTagsLoaded +} diff --git a/src/Components/Map/hooks/useTimeout.tsx b/src/Components/Map/hooks/useTimeout.tsx index ae31835c..db8aa43e 100644 --- a/src/Components/Map/hooks/useTimeout.tsx +++ b/src/Components/Map/hooks/useTimeout.tsx @@ -1,30 +1,30 @@ -import { useCallback, useEffect, useRef } from 'react'; +import { useCallback, useEffect, useRef } from 'react' export const useTimeout = (callback, delay) => { - const callbackRef = useRef(callback); - const timeoutRef = useRef(); + const callbackRef = useRef(callback) + const timeoutRef = useRef () useEffect(() => { - callbackRef.current = callback; - }, [callback]); + callbackRef.current = callback + }, [callback]) const set = useCallback(() => { - timeoutRef.current = setTimeout(() => callbackRef.current(), delay); - }, [delay]); + timeoutRef.current = setTimeout(() => callbackRef.current(), delay) + }, [delay]) const clear = useCallback(() => { - timeoutRef.current && clearTimeout(timeoutRef.current); - }, []); + timeoutRef.current && clearTimeout(timeoutRef.current) + }, []) useEffect(() => { - set(); - return clear; - }, [delay, set, clear]); + set() + return clear + }, [delay, set, clear]) const reset = useCallback(() => { - clear(); - set(); - }, [clear, set]); + clear() + set() + }, [clear, set]) - return { reset, clear }; -} \ No newline at end of file + return { reset, clear } +} diff --git a/src/Components/Map/hooks/useWindowDimension.tsx b/src/Components/Map/hooks/useWindowDimension.tsx index 89f0f7bd..ac276148 100644 --- a/src/Components/Map/hooks/useWindowDimension.tsx +++ b/src/Components/Map/hooks/useWindowDimension.tsx @@ -1,24 +1,24 @@ -import { useState, useEffect } from 'react'; +import { useState, useEffect } from 'react' -function getWindowDimensions() { - const { innerWidth: width, innerHeight: height } = window; +function getWindowDimensions () { + const { innerWidth: width, innerHeight: height } = window return { width, height - }; + } } -export default function useWindowDimensions() { - const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions()); +export default function useWindowDimensions () { + const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions()) useEffect(() => { - function handleResize() { - setWindowDimensions(getWindowDimensions()); + function handleResize () { + setWindowDimensions(getWindowDimensions()) } - window.addEventListener('resize', handleResize); - return () => window.removeEventListener('resize', handleResize); - }, []); + window.addEventListener('resize', handleResize) + return () => window.removeEventListener('resize', handleResize) + }, []) - return windowDimensions; + return windowDimensions } diff --git a/src/Components/Map/index.tsx b/src/Components/Map/index.tsx index fcf5fb36..df970712 100644 --- a/src/Components/Map/index.tsx +++ b/src/Components/Map/index.tsx @@ -1,13 +1,13 @@ -export { UtopiaMap } from './UtopiaMap'; -export { Layer } from './Layer'; -export { Tags } from "./Tags"; -export { Permissions } from "./Permissions"; -export {ItemForm} from './ItemForm'; -export {ItemView} from './ItemView'; -export {PopupTextAreaInput} from './Subcomponents/ItemPopupComponents/PopupTextAreaInput'; -export {PopupStartEndInput} from './Subcomponents/ItemPopupComponents/PopupStartEndInput'; -export {PopupTextInput} from './Subcomponents/ItemPopupComponents/PopupTextInput'; -export {PopupCheckboxInput} from './Subcomponents/ItemPopupComponents/PopupCheckboxInput' -export {TextView} from './Subcomponents/ItemPopupComponents/TextView'; -export {StartEndView} from './Subcomponents/ItemPopupComponents/StartEndView' -export {PopupButton} from './Subcomponents/ItemPopupComponents/PopupButton' \ No newline at end of file +export { UtopiaMap } from './UtopiaMap' +export { Layer } from './Layer' +export { Tags } from './Tags' +export { Permissions } from './Permissions' +export { ItemForm } from './ItemForm' +export { ItemView } from './ItemView' +export { PopupTextAreaInput } from './Subcomponents/ItemPopupComponents/PopupTextAreaInput' +export { PopupStartEndInput } from './Subcomponents/ItemPopupComponents/PopupStartEndInput' +export { PopupTextInput } from './Subcomponents/ItemPopupComponents/PopupTextInput' +export { PopupCheckboxInput } from './Subcomponents/ItemPopupComponents/PopupCheckboxInput' +export { TextView } from './Subcomponents/ItemPopupComponents/TextView' +export { StartEndView } from './Subcomponents/ItemPopupComponents/StartEndView' +export { PopupButton } from './Subcomponents/ItemPopupComponents/PopupButton' diff --git a/src/Components/Map/setItemLocation.tsx b/src/Components/Map/setItemLocation.tsx index f7761fac..dae30e78 100644 --- a/src/Components/Map/setItemLocation.tsx +++ b/src/Components/Map/setItemLocation.tsx @@ -1,9 +1,8 @@ -import { useMap } from "react-leaflet" +import { useMap } from 'react-leaflet' export const setItemLocation = () => { - // eslint-disable-next-line no-unused-vars, react-hooks/rules-of-hooks - const map = useMap(); + const map = useMap() return ( diff --git a/src/Components/Profile/ProfileForm.tsx b/src/Components/Profile/ProfileForm.tsx index fb0ae3fd..b658ebad 100644 --- a/src/Components/Profile/ProfileForm.tsx +++ b/src/Components/Profile/ProfileForm.tsx @@ -1,158 +1,156 @@ /* eslint-disable no-constant-condition */ import { useItems, useUpdateItem, useAddItem } from '../Map/hooks/useItems' -import { useEffect, useState } from 'react'; -import { getValue } from '../../Utils/GetValue'; -import { useAuth } from '../Auth'; -import { useAddTag, useGetItemTags, useTags } from '../Map/hooks/useTags'; -import { useLocation, useNavigate } from 'react-router-dom'; -import { Item, Tag } from '../../types'; -import { MapOverlayPage } from '../Templates'; -import { useLayers } from '../Map/hooks/useLayers'; -import { useHasUserPermission } from '../Map/hooks/usePermissions'; -import { OnepagerForm } from './Templates/OnepagerForm'; -import { linkItem, onUpdateItem, unlinkItem } from './itemFunctions'; -import { SimpleForm } from './Templates/SimpleForm'; -import { TabsForm } from './Templates/TabsForm'; -import { FormHeader } from './Subcomponents/FormHeader'; +import { useEffect, useState } from 'react' +import { getValue } from '../../Utils/GetValue' +import { useAuth } from '../Auth' +import { useAddTag, useGetItemTags, useTags } from '../Map/hooks/useTags' +import { useLocation, useNavigate } from 'react-router-dom' +import { Item, Tag } from '../../types' +import { MapOverlayPage } from '../Templates' +import { useLayers } from '../Map/hooks/useLayers' +import { useHasUserPermission } from '../Map/hooks/usePermissions' +import { OnepagerForm } from './Templates/OnepagerForm' +import { linkItem, onUpdateItem, unlinkItem } from './itemFunctions' +import { SimpleForm } from './Templates/SimpleForm' +import { TabsForm } from './Templates/TabsForm' +import { FormHeader } from './Subcomponents/FormHeader' -export function ProfileForm({ userType }: { userType: string }) { +export function ProfileForm ({ userType }: { userType: string }) { + const [state, setState] = useState({ + color: '', + id: '', + groupType: 'wuerdekompass', + status: 'active', + name: '', + subname: '', + text: '', + contact: '', + telephone: '', + nextAppointment: '', + image: '', + markerIcon: '', + offers: [] as Tag[], + needs: [] as Tag[], + relations: [] as Item[], + start: '', + end: '' + }) - const [state, setState] = useState({ - color: "", - id: "", - groupType: "wuerdekompass", - status: "active", - name: "", - subname: "", - text: "", - contact: "", - telephone: "", - nextAppointment: "", - image: "", - markerIcon: "", - offers: [] as Tag[], - needs: [] as Tag[], - relations: [] as Item[], - start: "", - end: "" - }); + const [updatePermission, setUpdatePermission] = useState (false) + const [loading, setLoading] = useState (false) + const [item, setItem] = useState - ({} as Item) + const { user } = useAuth() + const updateItem = useUpdateItem() + const addItem = useAddItem() + const layers = useLayers() + const location = useLocation() + const tags = useTags() + const addTag = useAddTag() + const navigate = useNavigate() + const hasUserPermission = useHasUserPermission() + const getItemTags = useGetItemTags() + const items = useItems() - const [updatePermission, setUpdatePermission] = useState
(false); - const [loading, setLoading] = useState (false); - const [item, setItem] = useState - ({} as Item) - const { user } = useAuth(); - const updateItem = useUpdateItem(); - const addItem = useAddItem(); - const layers = useLayers(); - const location = useLocation(); - const tags = useTags(); - const addTag = useAddTag(); - const navigate = useNavigate(); - const hasUserPermission = useHasUserPermission(); - const getItemTags = useGetItemTags(); - const items = useItems(); + const [urlParams, setUrlParams] = useState(new URLSearchParams(location.search)) - const [urlParams, setUrlParams] = useState(new URLSearchParams(location.search)); - - - useEffect(() => { - item && hasUserPermission("items", "update", item) && setUpdatePermission(true); + useEffect(() => { + item && hasUserPermission('items', 'update', item) && setUpdatePermission(true) // eslint-disable-next-line react-hooks/exhaustive-deps - }, [item]) + }, [item]) - useEffect(() => { - const itemId = location.pathname.split("/")[2]; + useEffect(() => { + const itemId = location.pathname.split('/')[2] - const item = items.find(i => i.id === itemId); - item && setItem(item); + const item = items.find(i => i.id === itemId) + item && setItem(item) - const layer = layers.find(l => l.itemType.name == userType) + const layer = layers.find(l => l.itemType.name == userType) - !item && setItem({ id: crypto.randomUUID(), name: user ? user.first_name : "", text: "", layer: layer, new: true }) + !item && setItem({ id: crypto.randomUUID(), name: user ? user.first_name : '', text: '', layer, new: true }) // eslint-disable-next-line react-hooks/exhaustive-deps - }, [items]) + }, [items]) - useEffect(() => { - const newColor = item.layer?.itemColorField && getValue(item, item.layer?.itemColorField) - ? getValue(item, item.layer?.itemColorField) - : (getItemTags(item) && getItemTags(item)[0]?.color) - ? getItemTags(item)[0].color - : item?.layer?.markerDefaultColor; + useEffect(() => { + const newColor = item.layer?.itemColorField && getValue(item, item.layer?.itemColorField) + ? getValue(item, item.layer?.itemColorField) + : (getItemTags(item) && getItemTags(item)[0]?.color) + ? getItemTags(item)[0].color + : item?.layer?.markerDefaultColor - const offers = (item?.offers ?? []).reduce((acc: Tag[], o) => { - const offer = tags.find(t => t.id === o.tags_id); - if (offer) acc.push(offer); - return acc; - }, []); + const offers = (item?.offers ?? []).reduce((acc: Tag[], o) => { + const offer = tags.find(t => t.id === o.tags_id) + if (offer) acc.push(offer) + return acc + }, []) - const needs = (item?.needs ?? []).reduce((acc: Tag[], o) => { - const need = tags.find(t => t.id === o.tags_id); - if (need) acc.push(need); - return acc; - }, []); + const needs = (item?.needs ?? []).reduce((acc: Tag[], o) => { + const need = tags.find(t => t.id === o.tags_id) + if (need) acc.push(need) + return acc + }, []) - const relations = (item?.relations ?? []).reduce((acc: Item[], r) => { - const relatedItem = items.find(i => i.id === r.related_items_id); - if (relatedItem) acc.push(relatedItem); - return acc; - }, []); + const relations = (item?.relations ?? []).reduce((acc: Item[], r) => { + const relatedItem = items.find(i => i.id === r.related_items_id) + if (relatedItem) acc.push(relatedItem) + return acc + }, []) - setState({ - color: newColor, - id: item?.id ?? "", - groupType: item?.group_type ?? "wuerdekompass", - status: item?.status ?? "active", - name: item?.name ?? "", - subname: item?.subname ?? "", - text: item?.text ?? "", - contact: item?.contact ?? "", - telephone: item?.telephone ?? "", - nextAppointment: item?.next_appointment ?? "", - image: item?.image ?? "", - markerIcon: item?.marker_icon ?? "", - offers: offers, - needs: needs, - relations: relations, - start: item?.start ?? "", - end: item?.end ?? "" - }); + setState({ + color: newColor, + id: item?.id ?? '', + groupType: item?.group_type ?? 'wuerdekompass', + status: item?.status ?? 'active', + name: item?.name ?? '', + subname: item?.subname ?? '', + text: item?.text ?? '', + contact: item?.contact ?? '', + telephone: item?.telephone ?? '', + nextAppointment: item?.next_appointment ?? '', + image: item?.image ?? '', + markerIcon: item?.marker_icon ?? '', + offers, + needs, + relations, + start: item?.start ?? '', + end: item?.end ?? '' + }) // eslint-disable-next-line react-hooks/exhaustive-deps - }, [item, tags, items]); + }, [item, tags, items]) - const [template, setTemplate] = useState
("") + const [template, setTemplate] = useState ('') - useEffect(() => { - setTemplate(item.layer?.itemType.template || userType); - }, [userType, item]) + useEffect(() => { + setTemplate(item.layer?.itemType.template || userType) + }, [userType, item]) - return ( + return ( <> - + - ) -} \ No newline at end of file + ) +} diff --git a/src/Components/Profile/ProfileView.tsx b/src/Components/Profile/ProfileView.tsx index 8ce0efba..4ad6733a 100644 --- a/src/Components/Profile/ProfileView.tsx +++ b/src/Components/Profile/ProfileView.tsx @@ -1,166 +1,160 @@ import { MapOverlayPage } from '../Templates' import { useItems, useRemoveItem, useUpdateItem } from '../Map/hooks/useItems' import { useLocation, useNavigate } from 'react-router-dom' -import { useEffect, useState } from 'react'; -import { Item, ItemsApi, Tag } from '../../types'; -import { useMap } from 'react-leaflet'; -import { LatLng } from 'leaflet'; -import { useHasUserPermission } from '../Map/hooks/usePermissions'; -import { HeaderView } from '../Map/Subcomponents/ItemPopupComponents/HeaderView'; -import { useSelectPosition, useSetSelectPosition } from '../Map/hooks/useSelectPosition'; -import { useClusterRef } from '../Map/hooks/useClusterRef'; -import { useLeafletRefs } from '../Map/hooks/useLeafletRefs'; -import { getValue } from '../../Utils/GetValue'; -import { TabsView } from './Templates/TabsView'; -import { OnepagerView } from './Templates/OnepagerView'; -import { SimpleView } from './Templates/SimpleView'; -import { handleDelete, linkItem, unlinkItem } from './itemFunctions'; -import { useTags } from '../Map/hooks/useTags'; +import { useEffect, useState } from 'react' +import { Item, ItemsApi, Tag } from '../../types' +import { useMap } from 'react-leaflet' +import { LatLng } from 'leaflet' +import { useHasUserPermission } from '../Map/hooks/usePermissions' +import { HeaderView } from '../Map/Subcomponents/ItemPopupComponents/HeaderView' +import { useSelectPosition, useSetSelectPosition } from '../Map/hooks/useSelectPosition' +import { useClusterRef } from '../Map/hooks/useClusterRef' +import { useLeafletRefs } from '../Map/hooks/useLeafletRefs' +import { getValue } from '../../Utils/GetValue' +import { TabsView } from './Templates/TabsView' +import { OnepagerView } from './Templates/OnepagerView' +import { SimpleView } from './Templates/SimpleView' +import { handleDelete, linkItem, unlinkItem } from './itemFunctions' +import { useTags } from '../Map/hooks/useTags' -export function ProfileView({ userType, attestationApi }: { userType: string , attestationApi?: ItemsApi- {template == "onepager" && ( + {template == 'onepager' && ( )} - {template == "simple" && + {template == 'simple' && } - {template == "tabs" && + {template == 'tabs' && linkItem(id, item, updateItem)} unlinkItem={(id) => unlinkItem(id, item, updateItem)} setUrlParams={setUrlParams}> }- +}) { +export function ProfileView ({ userType, attestationApi }: { userType: string, attestationApi?: ItemsApi }) { + const [item, setItem] = useState - () + const [updatePermission, setUpdatePermission] = useState
(false) + const [relations, setRelations] = useState (false) + const [template, setTemplate] = useState ('') - const [item, setItem] = useState - () - const [updatePermission, setUpdatePermission] = useState
(false); - const [relations, setRelations] = useState (false); - const [template, setTemplate] = useState (""); + const location = useLocation() + const items = useItems() + const updateItem = useUpdateItem() + const map = useMap() + const selectPosition = useSelectPosition() + const removeItem = useRemoveItem() + const tags = useTags() + const navigate = useNavigate() + const hasUserPermission = useHasUserPermission() + const setSelectPosition = useSetSelectPosition() + const clusterRef = useClusterRef() + const leafletRefs = useLeafletRefs() - const location = useLocation(); - const items = useItems(); - const updateItem = useUpdateItem(); - const map = useMap(); - const selectPosition = useSelectPosition(); - const removeItem = useRemoveItem(); - const tags = useTags(); - const navigate = useNavigate(); - const hasUserPermission = useHasUserPermission(); - const setSelectPosition = useSetSelectPosition(); - const clusterRef = useClusterRef(); - const leafletRefs = useLeafletRefs(); + const [attestations, setAttestations] = useState <> - -handleDelete(e, item, setLoading, removeItem, map, navigate)} editCallback={() => navigate("/edit-item/" + item.id)} setPositionCallback={() => { map.closePopup(); setSelectPosition(item); navigate("/") }} big truncateSubname={false} /> + +- {template == "onepager" && + {template == 'onepager' &&handleDelete(e, item, setLoading, removeItem, map, navigate)} editCallback={() => navigate('/edit-item/' + item.id)} setPositionCallback={() => { map.closePopup(); setSelectPosition(item); navigate('/') }} big truncateSubname={false} /> } - {template == "simple" && + {template == 'simple' && } - {template == "tabs" && + {template == 'tabs' && linkItem(id, item, updateItem)} unlinkItem={(id) => unlinkItem(id, item, updateItem)}/> } @@ -168,5 +162,5 @@ export function ProfileView({ userType, attestationApi }: { userType: string , a } - ) -} \ No newline at end of file + ) +} diff --git a/src/Components/Profile/Subcomponents/ActionsButton.tsx b/src/Components/Profile/Subcomponents/ActionsButton.tsx index d2a701ad..8b4b493e 100644 --- a/src/Components/Profile/Subcomponents/ActionsButton.tsx +++ b/src/Components/Profile/Subcomponents/ActionsButton.tsx @@ -1,14 +1,14 @@ -import { useState } from "react"; -import { useHasUserPermission } from "../../Map/hooks/usePermissions"; -import DialogModal from "../../Templates/DialogModal"; -import { useItems } from "../../Map/hooks/useItems"; -import { HeaderView } from "../../Map/Subcomponents/ItemPopupComponents/HeaderView"; -import { Item } from "../../../types"; -import { TextInput } from "../../Input"; -import { getValue } from "../../../Utils/GetValue"; -import { useGetItemTags } from "../../Map/hooks/useTags"; +import { useState } from 'react' +import { useHasUserPermission } from '../../Map/hooks/usePermissions' +import DialogModal from '../../Templates/DialogModal' +import { useItems } from '../../Map/hooks/useItems' +import { HeaderView } from '../../Map/Subcomponents/ItemPopupComponents/HeaderView' +import { Item } from '../../../types' +import { TextInput } from '../../Input' +import { getValue } from '../../../Utils/GetValue' +import { useGetItemTags } from '../../Map/hooks/useTags' -export function ActionButton({ item, triggerAddButton, triggerItemSelected, existingRelations, itemType, colorField, collection = "items", customStyle }: { +export function ActionButton ({ item, triggerAddButton, triggerItemSelected, existingRelations, itemType, colorField, collection = 'items', customStyle }: { triggerAddButton?: any, triggerItemSelected?: any, existingRelations: Item[], @@ -18,39 +18,36 @@ export function ActionButton({ item, triggerAddButton, triggerItemSelected, exis customStyle?:string, item: Item }) { - const hasUserPermission = useHasUserPermission(); - const [modalOpen, setModalOpen] = useState (false); - const [search, setSearch] = useState (""); - const getItemTags = useGetItemTags(); + const hasUserPermission = useHasUserPermission() + const [modalOpen, setModalOpen] = useState (false) + const [search, setSearch] = useState ('') + const getItemTags = useGetItemTags() + const items = useItems() - const items = useItems(); + const filterdItems = items.filter(i => !itemType || i.layer?.itemType.name == itemType).filter(i => !existingRelations.some(s => s.id == i.id)).filter(i => i.id != item.id) - const filterdItems = items.filter(i => !itemType || i.layer?.itemType.name == itemType).filter(i => !existingRelations.some(s => s.id == i.id)).filter(i => i.id != item.id) - - - - return ( - <>{hasUserPermission(collection, "update", item) && + return ( + <>{hasUserPermission(collection, 'update', item) && <> - {triggerItemSelected &&-(setModalOpen(false))} className="tw-w-xl sm:tw-w-2xl tw-min-h-80 tw-bg-base-200"> - { setSearch(val) }}> +(setModalOpen(false))} className="tw-w-xl sm:tw-w-2xl tw-min-h-80 tw-bg-base-200"> + { setSearch(val) }}> {filterdItems.filter(item => { - return search === '' - ? item : - item.name.toLowerCase().includes(search.toLowerCase()); + return search === '' + ? item + : item.name.toLowerCase().includes(search.toLowerCase()) }).map(i =>{ triggerItemSelected(i.id); setModalOpen(false) }}>)} @@ -60,5 +57,5 @@ export function ActionButton({ item, triggerAddButton, triggerItemSelected, exis } - ) + ) } diff --git a/src/Components/Profile/Subcomponents/AvatarWidget.tsx b/src/Components/Profile/Subcomponents/AvatarWidget.tsx index caf40121..cb60f008 100644 --- a/src/Components/Profile/Subcomponents/AvatarWidget.tsx +++ b/src/Components/Profile/Subcomponents/AvatarWidget.tsx @@ -1,9 +1,9 @@ -import * as React from "react"; -import { useState, useCallback, useRef } from "react"; -import ReactCrop, { Crop, centerCrop, makeAspectCrop } from 'react-image-crop'; -import { useAssetApi } from '../../AppShell/hooks/useAssets'; -import 'react-image-crop/dist/ReactCrop.css'; -import DialogModal from "../../Templates/DialogModal"; +import * as React from 'react' +import { useState, useCallback, useRef } from 'react' +import ReactCrop, { Crop, centerCrop, makeAspectCrop } from 'react-image-crop' +import { useAssetApi } from '../../AppShell/hooks/useAssets' +import 'react-image-crop/dist/ReactCrop.css' +import DialogModal from '../../Templates/DialogModal' interface AvatarWidgetProps { avatar: string; @@ -11,167 +11,166 @@ interface AvatarWidgetProps { } export const AvatarWidget: React.FC= ({ avatar, setAvatar }) => { - const [crop, setCrop] = useState (); - const [image, setImage] = useState (""); - const [cropModalOpen, setCropModalOpen] = useState (false); - const [cropping, setCropping] = useState (false); + const [crop, setCrop] = useState () + const [image, setImage] = useState ('') + const [cropModalOpen, setCropModalOpen] = useState (false) + const [cropping, setCropping] = useState (false) - const assetsApi = useAssetApi(); + const assetsApi = useAssetApi() - const imgRef = useRef (null); + const imgRef = useRef (null) - const onImageChange = useCallback((event: React.ChangeEvent ) => { - const file = event.target.files && event.target.files[0]; - if (file) { - const validFormats = ["image/jpeg", "image/png"]; - const maxSizeMB = 10; - const maxSizeBytes = maxSizeMB * 1024 * 1024; + const onImageChange = useCallback((event: React.ChangeEvent ) => { + const file = event.target.files && event.target.files[0] + if (file) { + const validFormats = ['image/jpeg', 'image/png'] + const maxSizeMB = 10 + const maxSizeBytes = maxSizeMB * 1024 * 1024 - if (!validFormats.includes(file.type)) { - alert("Unsupported file format. Please upload a JPEG or PNG image."); - return; - } + if (!validFormats.includes(file.type)) { + alert('Unsupported file format. Please upload a JPEG or PNG image.') + return + } - if (file.size > maxSizeBytes) { - alert(`File size exceeds ${maxSizeMB}MB. Please upload a smaller image.`); - return; - } + if (file.size > maxSizeBytes) { + alert(`File size exceeds ${maxSizeMB}MB. Please upload a smaller image.`) + return + } - setImage(URL.createObjectURL(file)); - setCropModalOpen(true); - } else { - alert("No file selected or an error occurred while selecting the file."); - } - }, []); + setImage(URL.createObjectURL(file)) + setCropModalOpen(true) + } else { + alert('No file selected or an error occurred while selecting the file.') + } + }, []) - const onImageLoad = useCallback((e: React.SyntheticEvent ) => { - const { width, height } = e.currentTarget; - setCrop(centerAspectCrop(width, height, 1)); - }, []); + const onImageLoad = useCallback((e: React.SyntheticEvent ) => { + const { width, height } = e.currentTarget + setCrop(centerAspectCrop(width, height, 1)) + }, []) - const centerAspectCrop = (mediaWidth: number, mediaHeight: number, aspect: number) => { - return centerCrop( - makeAspectCrop( - { - unit: 'px', - width: mediaWidth / 2, - }, - aspect, - mediaWidth, - mediaHeight, - ), - mediaWidth, - mediaHeight, - ); - }; + const centerAspectCrop = (mediaWidth: number, mediaHeight: number, aspect: number) => { + return centerCrop( + makeAspectCrop( + { + unit: 'px', + width: mediaWidth / 2 + }, + aspect, + mediaWidth, + mediaHeight + ), + mediaWidth, + mediaHeight + ) + } - async function resizeImage(image: HTMLImageElement, maxWidth: number, maxHeight: number): Promise { - const canvas = document.createElement('canvas'); - const ctx = canvas.getContext('2d'); + async function resizeImage (image: HTMLImageElement, maxWidth: number, maxHeight: number): Promise { + const canvas = document.createElement('canvas') + const ctx = canvas.getContext('2d') - let width = image.width; - let height = image.height; + let width = image.width + let height = image.height - if (width > maxWidth) { - height *= maxWidth / width; - width = maxWidth; - } - if (height > maxHeight) { - width *= maxHeight / height; - height = maxHeight; - } - - canvas.width = width; - canvas.height = height; - - if (ctx) { - ctx.drawImage(image, 0, 0, width, height); - } - - const resizedImage = new Image(); - resizedImage.src = canvas.toDataURL(); - - await resizedImage.decode(); - return resizedImage; + if (width > maxWidth) { + height *= maxWidth / width + width = maxWidth + } + if (height > maxHeight) { + width *= maxHeight / height + height = maxHeight } - const renderCrop = useCallback(async () => { - const image = imgRef.current; - if (crop && image) { - const resizedImage = await resizeImage(image, 1024, 1024); // BildgrΓΆΓe vor dem Zuschneiden reduzieren - const scaleX = resizedImage.naturalWidth / resizedImage.width; - const scaleY = resizedImage.naturalHeight / resizedImage.height; + canvas.width = width + canvas.height = height - const canvas = new OffscreenCanvas( - crop.width * scaleX, - crop.height * scaleY - ); - const ctx = canvas.getContext("2d"); - const pixelRatio = window.devicePixelRatio; - canvas.width = crop.width * pixelRatio * scaleX; - canvas.height = crop.height * pixelRatio * scaleY; + if (ctx) { + ctx.drawImage(image, 0, 0, width, height) + } - if (ctx) { - ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0); - ctx.drawImage( - resizedImage, - crop.x * scaleX, - crop.y * scaleY, - crop.width * scaleX, - crop.height * scaleY, - 0, - 0, - crop.width * scaleX, - crop.height * scaleY - ); - } + const resizedImage = new Image() + resizedImage.src = canvas.toDataURL() - const blob = await canvas.convertToBlob(); - await resizeBlob(blob); - setCropping(false); - setImage(""); - } + await resizedImage.decode() + return resizedImage + } + + const renderCrop = useCallback(async () => { + const image = imgRef.current + if (crop && image) { + const resizedImage = await resizeImage(image, 1024, 1024) // BildgrΓΆΓe vor dem Zuschneiden reduzieren + const scaleX = resizedImage.naturalWidth / resizedImage.width + const scaleY = resizedImage.naturalHeight / resizedImage.height + + const canvas = new OffscreenCanvas( + crop.width * scaleX, + crop.height * scaleY + ) + const ctx = canvas.getContext('2d') + const pixelRatio = window.devicePixelRatio + canvas.width = crop.width * pixelRatio * scaleX + canvas.height = crop.height * pixelRatio * scaleY + + if (ctx) { + ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0) + ctx.drawImage( + resizedImage, + crop.x * scaleX, + crop.y * scaleY, + crop.width * scaleX, + crop.height * scaleY, + 0, + 0, + crop.width * scaleX, + crop.height * scaleY + ) + } + + const blob = await canvas.convertToBlob() + await resizeBlob(blob) + setCropping(false) + setImage('') + } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [crop]); + }, [crop]) - const resizeBlob = useCallback(async (blob: Blob) => { - const img = new Image(); - img.src = URL.createObjectURL(blob); - await img.decode(); + const resizeBlob = useCallback(async (blob: Blob) => { + const img = new Image() + img.src = URL.createObjectURL(blob) + await img.decode() - const canvas = new OffscreenCanvas(400, 400); - const ctx = canvas.getContext("2d"); - ctx?.drawImage(img, 0, 0, 400, 400); + const canvas = new OffscreenCanvas(400, 400) + const ctx = canvas.getContext('2d') + ctx?.drawImage(img, 0, 0, 400, 400) - const resizedBlob = await canvas.convertToBlob(); - const asset = await assetsApi.upload(resizedBlob, "avatar"); - setAvatar(asset.id); - }, [assetsApi, setAvatar]); + const resizedBlob = await canvas.convertToBlob() + const asset = await assetsApi.upload(resizedBlob, 'avatar') + setAvatar(asset.id) + }, [assetsApi, setAvatar]) - return ( + return ( <> - {!cropping ? - - () + const [mapClicked, setMapClicked] = useState
- 0 && 'tw-bg-base-100 tw-rounded-xl tw-p-2'}`}>
{filteredSuggestions.map((suggestion, index) => (
- {labelTitle?
-
- )
-}
\ No newline at end of file
+ )
+}
diff --git a/src/Components/Input/TextAreaInput.tsx b/src/Components/Input/TextAreaInput.tsx
index 528b883b..638af6e7 100644
--- a/src/Components/Input/TextAreaInput.tsx
+++ b/src/Components/Input/TextAreaInput.tsx
@@ -1,7 +1,7 @@
-import * as React from "react";
-import { useEffect, useRef, useState } from "react";
-import Tribute from "tributejs";
-import { useTags } from "../Map/hooks/useTags";
+import * as React from 'react'
+import { useEffect, useRef, useState } from 'react'
+import Tribute from 'tributejs'
+import { useTags } from '../Map/hooks/useTags'
type TextAreaProps = {
labelTitle?: string;
@@ -19,73 +19,75 @@ interface KeyValue {
[key: string]: string;
}
-export function TextAreaInput({ labelTitle, dataField, labelStyle, containerStyle, inputStyle, defaultValue, placeholder, updateFormValue }: TextAreaProps) {
- const ref = useRef
- {labelTitle ? (
+ return (
+ (defaultValue || '')
-export function TextInput({ labelTitle, labelStyle, type, dataField, containerStyle, inputStyle, defaultValue, placeholder, autocomplete, updateFormValue }: InputTextProps) {
- const [inputValue, setInputValue] = useState(defaultValue || "");
+ useEffect(() => {
+ setInputValue(defaultValue || '')
+ }, [defaultValue])
- useEffect(() => {
- setInputValue(defaultValue || "");
- }, [defaultValue]);
+ const handleChange = (e: React.ChangeEvent) => {
+ const newValue = e.target.value
+ setInputValue(newValue)
+ if (updateFormValue) {
+ updateFormValue(newValue)
+ }
+ }
- const handleChange = (e: React.ChangeEvent) => {
- const newValue = e.target.value;
- setInputValue(newValue);
- if (updateFormValue) {
- updateFormValue(newValue);
- }
- };
-
- return (
+ return (
> }) => {
- useEffect(() => {
- setPopupTitle&& title && setPopupTitle(title);
+ useEffect(() => {
+ setPopupTitle && title && setPopupTitle(title)
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [title])
-
- return (
+ }, [title])
+
+ return (
([])
+ const [tagsReady, setTagsReady] = useState(false)
- const tags = useTags();
- const addTag = useAddTag();
- const [newTagsToAdd, setNewTagsToAdd] = useState([]);
- const [tagsReady, setTagsReady] = useState(false);
+ const map = useMap()
+ const isLayerVisible = useIsLayerVisible()
- const map = useMap();
+ const isGroupTypeVisible = useIsGroupTypeVisible()
- const isLayerVisible = useIsLayerVisible();
+ const visibleGroupTypes = useVisibleGroupType()
- const isGroupTypeVisible = useIsGroupTypeVisible();
-
- const visibleGroupTypes = useVisibleGroupType();
-
-
-
- useEffect(() => {
- data && setItemsData({ data, children, name, menuIcon, menuText, menuColor, markerIcon, markerShape, markerDefaultColor, markerDefaultColor2, api, itemType, itemNameField, itemSubnameField, itemTextField, itemAvatarField, itemColorField, itemOwnerField, itemTagsField, itemOffersField, itemNeedsField, onlyOnePerOwner, customEditLink, customEditParameter, public_edit_items, listed, setItemFormPopup, itemFormPopup, clusterRef });
- api && setItemsApi({ data, children, name, menuIcon, menuText, menuColor, markerIcon, markerShape, markerDefaultColor, markerDefaultColor2, api, itemType, itemNameField, itemSubnameField, itemTextField, itemAvatarField, itemColorField, itemOwnerField, itemTagsField, itemOffersField, itemNeedsField, onlyOnePerOwner, customEditLink, customEditParameter, public_edit_items, listed, setItemFormPopup, itemFormPopup, clusterRef });
+ useEffect(() => {
+ data && setItemsData({ data, children, name, menuIcon, menuText, menuColor, markerIcon, markerShape, markerDefaultColor, markerDefaultColor2, api, itemType, itemNameField, itemSubnameField, itemTextField, itemAvatarField, itemColorField, itemOwnerField, itemTagsField, itemOffersField, itemNeedsField, onlyOnePerOwner, customEditLink, customEditParameter, public_edit_items, listed, setItemFormPopup, itemFormPopup, clusterRef })
+ api && setItemsApi({ data, children, name, menuIcon, menuText, menuColor, markerIcon, markerShape, markerDefaultColor, markerDefaultColor2, api, itemType, itemNameField, itemSubnameField, itemTextField, itemAvatarField, itemColorField, itemOwnerField, itemTagsField, itemOffersField, itemNeedsField, onlyOnePerOwner, customEditLink, customEditParameter, public_edit_items, listed, setItemFormPopup, itemFormPopup, clusterRef })
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [data, api])
+ }, [data, api])
- useMapEvents({
- popupopen: (e) => {
- const item = Object.entries(leafletRefs).find(r => r[1].popup == e.popup)?.[1].item;
- if (item?.layer?.name == name && window.location.pathname.split("/")[1] != item.id) {
- const params = new URLSearchParams(window.location.search);
- if (!location.pathname.includes("/item/")) {
- window.history.pushState({}, "", `/${item.id}` + `${params.toString() !== "" ? `?${params}` : ""}`)
- }
- let title = "";
- if (item.name) title = item.name;
- else if (item.layer?.itemNameField) title = getValue(item, item.layer.itemNameField);
- document.title = `${document.title.split("-")[0]} - ${title}`;
- }
- },
- })
-
- const openPopup = () => {
- if (window.location.pathname.split("/").length <= 1 || window.location.pathname.split("/")[1] === "") {
- map.closePopup();
- }
- else {
- if (window.location.pathname.split("/")[1]) {
- const id = window.location.pathname.split("/")[1]
- const ref = leafletRefs[id];
- if (ref?.marker && ref.item.layer?.name === name) {
- ref.marker && clusterRef.hasLayer(ref.marker) && clusterRef?.zoomToShowLayer(ref.marker, () => {
- ref.marker.openPopup();
- });
- let title = "";
- if (ref.item.name) title = ref.item.name;
- else if (ref.item.layer?.itemNameField) title = getValue(ref.item.name, ref.item.layer.itemNameField);
- document.title = `${document.title.split("-")[0]} - ${title}`;
- document.querySelector('meta[property="og:title"]')?.setAttribute("content", ref.item.name);
- document.querySelector('meta[property="og:description"]')?.setAttribute("content", ref.item.text);
- }
- }
+ useMapEvents({
+ popupopen: (e) => {
+ const item = Object.entries(leafletRefs).find(r => r[1].popup == e.popup)?.[1].item
+ if (item?.layer?.name == name && window.location.pathname.split('/')[1] != item.id) {
+ const params = new URLSearchParams(window.location.search)
+ if (!location.pathname.includes('/item/')) {
+ window.history.pushState({}, '', `/${item.id}` + `${params.toString() !== '' ? `?${params}` : ''}`)
}
+ let title = ''
+ if (item.name) title = item.name
+ else if (item.layer?.itemNameField) title = getValue(item, item.layer.itemNameField)
+ document.title = `${document.title.split('-')[0]} - ${title}`
+ }
}
+ })
- useEffect(() => {
- openPopup();
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [leafletRefs, location])
-
- useEffect(() => {
- if (tagsReady) {
- const processedTags = {};
- newTagsToAdd.map(newtag => {
- if (!processedTags[newtag.name]) {
- processedTags[newtag.name] = true;
- addTag(newtag);
- }
- })
+ const openPopup = () => {
+ if (window.location.pathname.split('/').length <= 1 || window.location.pathname.split('/')[1] === '') {
+ map.closePopup()
+ } else {
+ if (window.location.pathname.split('/')[1]) {
+ const id = window.location.pathname.split('/')[1]
+ const ref = leafletRefs[id]
+ if (ref?.marker && ref.item.layer?.name === name) {
+ ref.marker && clusterRef.hasLayer(ref.marker) && clusterRef?.zoomToShowLayer(ref.marker, () => {
+ ref.marker.openPopup()
+ })
+ let title = ''
+ if (ref.item.name) title = ref.item.name
+ else if (ref.item.layer?.itemNameField) title = getValue(ref.item.name, ref.item.layer.itemNameField)
+ document.title = `${document.title.split('-')[0]} - ${title}`
+ document.querySelector('meta[property="og:title"]')?.setAttribute('content', ref.item.name)
+ document.querySelector('meta[property="og:description"]')?.setAttribute('content', ref.item.text)
}
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [tagsReady])
+ }
+ }
+ }
- return (
+ useEffect(() => {
+ openPopup()
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [leafletRefs, location])
+
+ useEffect(() => {
+ if (tagsReady) {
+ const processedTags = {}
+ newTagsToAdd.map(newtag => {
+ if (!processedTags[newtag.name]) {
+ processedTags[newtag.name] = true
+ addTag(newtag)
+ }
+ })
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [tagsReady])
+
+ return (
<>
{items &&
- items.
- filter(item => item.layer?.name === name)?.
- filter(item =>
- filterTags.length == 0 ? item : filterTags.some(tag => getItemTags(item).some(filterTag => filterTag.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())))?.
- filter(item => item.layer && isLayerVisible(item.layer)).
- filter(item => item.group_type && isGroupTypeVisible(item.group_type) || visibleGroupTypes.length == 0).
- map((item: Item) => {
- if (getValue(item, itemLongitudeField) && getValue(item, itemLatitudeField)) {
+ items
+ .filter(item => item.layer?.name === name)
+ ?.filter(item =>
+ filterTags.length == 0 ? item : filterTags.some(tag => getItemTags(item).some(filterTag => filterTag.name.toLocaleLowerCase() === tag.name.toLocaleLowerCase())))
+ ?.filter(item => item.layer && isLayerVisible(item.layer))
+ .filter(item => item.group_type && isGroupTypeVisible(item.group_type) || visibleGroupTypes.length == 0)
+ .map((item: Item) => {
+ if (getValue(item, itemLongitudeField) && getValue(item, itemLatitudeField)) {
+ if (getValue(item, itemTextField)) item[itemTextField] = getValue(item, itemTextField)
+ else item[itemTextField] = ''
- if (getValue(item, itemTextField)) item[itemTextField] = getValue(item, itemTextField);
- else item[itemTextField] = "";
+ if (item?.tags) {
+ item[itemTextField] = item[itemTextField] + '\n\n'
+ item.tags.map(tag => {
+ if (!item[itemTextField].includes(`#${encodeTag(tag)}`)) { return (item[itemTextField] = item[itemTextField] + `#${encodeTag(tag)} `) }
+ return item[itemTextField]
+ })
+ }
- if (item?.tags) {
- item[itemTextField] = item[itemTextField] + '\n\n';
- item.tags.map(tag => {
- if (!item[itemTextField].includes(`#${encodeTag(tag)}`))
- return (item[itemTextField] = item[itemTextField] + `#${encodeTag(tag)} `)
- return item[itemTextField]
+ if (allTagsLoaded && allItemsLoaded) {
+ item[itemTextField].match(hashTagRegex)?.map(tag => {
+ if ((!tags.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) && !newTagsToAdd.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) {
+ const newTag = { id: crypto.randomUUID(), name: tag.slice(1), color: randomColor() }
+ setNewTagsToAdd(current => [...current, newTag])
+ }
+ })
+ !tagsReady && setTagsReady(true)
+ }
- });
- }
+ const itemTags = getItemTags(item)
+ const latitude = itemLatitudeField && item ? getValue(item, itemLatitudeField) : undefined
+ const longitude = itemLongitudeField && item ? getValue(item, itemLongitudeField) : undefined
- if (allTagsLoaded && allItemsLoaded) {
- item[itemTextField].match(hashTagRegex)?.map(tag => {
- if ((!tags.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) && !newTagsToAdd.find((t) => t.name.toLocaleLowerCase() === tag.slice(1).toLocaleLowerCase())) {
- const newTag = { id: crypto.randomUUID(), name: tag.slice(1), color: randomColor() };
- setNewTagsToAdd(current => [...current, newTag]);
- }
- });
- !tagsReady && setTagsReady(true);
- }
-
-
- const itemTags = getItemTags(item);
-
- const latitude = itemLatitudeField && item ? getValue(item, itemLatitudeField) : undefined;
- const longitude = itemLongitudeField && item ? getValue(item, itemLongitudeField) : undefined;
-
- let color1 = markerDefaultColor;
- let color2 = markerDefaultColor2;
- if (itemColorField && getValue(item, itemColorField) != null) color1 = getValue(item, itemColorField);
- else if (itemTags && itemTags[0]) {
- color1 = itemTags[0].color;
- }
- if (itemTags && itemTags[0] && itemColorField) color2 = itemTags[0].color;
- else if (itemTags && itemTags[1]) {
- color2 = itemTags[1].color;
- }
- return (
+ let color1 = markerDefaultColor
+ let color2 = markerDefaultColor2
+ if (itemColorField && getValue(item, itemColorField) != null) color1 = getValue(item, itemColorField)
+ else if (itemTags && itemTags[0]) {
+ color1 = itemTags[0].color
+ }
+ if (itemTags && itemTags[0] && itemColorField) color2 = itemTags[0].color
+ else if (itemTags && itemTags[1]) {
+ color2 = itemTags[1].color
+ }
+ return (
{
- if (!(item.id in leafletRefs && leafletRefs[item.id].marker == r))
- r && addMarker(item, r);
+ if (!(item.id in leafletRefs && leafletRefs[item.id].marker == r)) { r && addMarker(item, r) }
}}
eventHandlers={{
- click: () => {
- selectPosition && setMarkerClicked(item)
- },
+ click: () => {
+ selectPosition && setMarkerClicked(item)
+ }
}}
icon={MarkerIconFactory(markerShape, color1, color2, item.markerIcon ? item.markerIcon : markerIcon)} key={item.id} position={[latitude, longitude]}>
{
- (children && React.Children.toArray(children).some(child => React.isValidElement(child) && child.props.__TYPE === "ItemView") ?
- React.Children.toArray(children).map((child) =>
- React.isValidElement(child) && child.props.__TYPE === "ItemView" ?
- {
- if (!(item.id in leafletRefs && leafletRefs[item.id].popup == r))
- r && addPopup(item, r as Popup);
- }} key={item.id + item.name}
+ (children && React.Children.toArray(children).some(child => React.isValidElement(child) && child.props.__TYPE === 'ItemView')
+ ? React.Children.toArray(children).map((child) =>
+ React.isValidElement(child) && child.props.__TYPE === 'ItemView'
+ ? {
+ if (!(item.id in leafletRefs && leafletRefs[item.id].popup == r)) { r && addPopup(item, r as Popup) }
+ }} key={item.id + item.name}
item={item}
setItemFormPopup={setItemFormPopup}>
{child}
- : ""
- )
- :
- <>
+ : ''
+ )
+ : <>
{
- if (!(item.id in leafletRefs && leafletRefs[item.id].popup == r))
- r && addPopup(item, r as Popup);
+ if (!(item.id in leafletRefs && leafletRefs[item.id].popup == r)) { r && addPopup(item, r as Popup) }
}}
item={item}
setItemFormPopup={setItemFormPopup} />
@@ -237,25 +223,23 @@ export const Layer = ({
}
{item.name ? item.name : getValue(item, itemNameField)}
- );
- }
- else return null;
- })
+ )
+ } else return null
+ })
}
- {//{children}}
+ {// {children}}
}
{itemFormPopup && itemFormPopup.layer!.name == name &&
- (children && React.Children.toArray(children).some(child => React.isValidElement(child) && child.props.__TYPE === "ItemForm") ?
- React.Children.toArray(children).map((child) =>
- React.isValidElement(child) && child.props.__TYPE === "ItemForm" ?
- {child}
- : ""
- )
- :
- <>
+ (children && React.Children.toArray(children).some(child => React.isValidElement(child) && child.props.__TYPE === 'ItemForm')
+ ? React.Children.toArray(children).map((child) =>
+ React.isValidElement(child) && child.props.__TYPE === 'ItemForm'
+ ? {child}
+ : ''
+ )
+ : <>
, adminRole?: string}) {
-const setPermissionData = useSetPermissionData();
-const setPermissionApi = useSetPermissionApi();
-const setAdminRole = useSetAdminRole();
-const {user} = useAuth();
+export function Permissions ({ data, api, adminRole } : {data?: Permission[], api?: ItemsApi, adminRole?: string}) {
+ const setPermissionData = useSetPermissionData()
+ const setPermissionApi = useSetPermissionApi()
+ const setAdminRole = useSetAdminRole()
+ const { user } = useAuth()
-useEffect(() => {
- adminRole && setAdminRole(adminRole);
- data && setPermissionData(data);
- api && setPermissionApi(api);
-// eslint-disable-next-line react-hooks/exhaustive-deps
-}, [api, data, adminRole, user])
+ useEffect(() => {
+ adminRole && setAdminRole(adminRole)
+ data && setPermissionData(data)
+ api && setPermissionApi(api)
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [api, data, adminRole, user])
return (
<>
diff --git a/src/Components/Map/Subcomponents/AddButton.tsx b/src/Components/Map/Subcomponents/AddButton.tsx
index f5d6c7ff..0ffc6efd 100644
--- a/src/Components/Map/Subcomponents/AddButton.tsx
+++ b/src/Components/Map/Subcomponents/AddButton.tsx
@@ -1,26 +1,23 @@
import * as React from 'react'
import { useLayers } from '../hooks/useLayers'
-import { useHasUserPermission } from '../hooks/usePermissions';
+import { useHasUserPermission } from '../hooks/usePermissions'
+export default function AddButton ({ triggerAction }: { triggerAction: React.Dispatch> }) {
+ const layers = useLayers()
+ const hasUserPermission = useHasUserPermission()
-export default function AddButton({ triggerAction }: { triggerAction: React.Dispatch> }) {
+ const canAddItems = () => {
+ let canAdd = false
+ layers.map(layer => {
+ if (layer.api?.createItem && hasUserPermission(layer.api.collectionName!, 'create', undefined, layer) && layer.listed) canAdd = true
+ })
+ return canAdd
+ }
- const layers = useLayers();
- const hasUserPermission = useHasUserPermission();
-
- const canAddItems = () => {
- let canAdd = false;
- layers.map(layer => {
- if (layer.api?.createItem && hasUserPermission(layer.api.collectionName!, "create", undefined, layer) && layer.listed) canAdd = true;
- })
- return canAdd;
- }
-
-
- return (
+ return (
<>{
- canAddItems() ?
- ()
-
React.useEffect(() => {
if (controlContainerRef.current !== null) {
L.DomEvent.disableClickPropagation(controlContainerRef.current)
@@ -17,7 +12,7 @@ export const Control = ({ position, children, zIndex, absolute }: { position: "t
}, [controlContainerRef])
return (
-
+ {labelTitle
+ ? (
- ) : null}
+ )
+ : null}
- );
+ )
}
diff --git a/src/Components/Input/TextInput.tsx b/src/Components/Input/TextInput.tsx
index 3ac0a21f..fd95ef36 100644
--- a/src/Components/Input/TextInput.tsx
+++ b/src/Components/Input/TextInput.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useState } from "react"
-import * as React from "react"
+import { useEffect, useState } from 'react'
+import * as React from 'react'
type InputTextProps = {
labelTitle?: string;
@@ -12,42 +12,43 @@ type InputTextProps = {
placeholder?: string;
autocomplete?: string
// eslint-disable-next-line no-unused-vars
- updateFormValue?: (value: string ) => void;
+ updateFormValue?: (value: string) => void;
}
+export function TextInput ({ labelTitle, labelStyle, type, dataField, containerStyle, inputStyle, defaultValue, placeholder, autocomplete, updateFormValue }: InputTextProps) {
+ const [inputValue, setInputValue] = useState
- {labelTitle ? (
+ {labelTitle
+ ? (
- ) : null}
+ )
+ : null}
- );
-}
\ No newline at end of file
+ )
+}
diff --git a/src/Components/Input/index.tsx b/src/Components/Input/index.tsx
index 5bcdbe5f..ecce2b80 100644
--- a/src/Components/Input/index.tsx
+++ b/src/Components/Input/index.tsx
@@ -1,3 +1,3 @@
-export {TextAreaInput} from "./TextAreaInput"
-export {TextInput} from "./TextInput"
-export {SelectBox} from "./SelectBox"
\ No newline at end of file
+export { TextAreaInput } from './TextAreaInput'
+export { TextInput } from './TextInput'
+export { SelectBox } from './SelectBox'
diff --git a/src/Components/Map/ItemForm.tsx b/src/Components/Map/ItemForm.tsx
index 2ec519c4..521909fb 100644
--- a/src/Components/Map/ItemForm.tsx
+++ b/src/Components/Map/ItemForm.tsx
@@ -3,30 +3,31 @@ import { Item } from '../../types'
import * as PropTypes from 'prop-types'
import { useEffect } from 'react'
-
export const ItemForm = ({ children, item, title, setPopupTitle }: { children?: React.ReactNode, item?: Item, title?: string, setPopupTitle?: React.Dispatch{
- children ?
- React.Children.toArray(children).map((child) =>
- React.isValidElement<{ item: Item, test: string }>(child) ?
- React.cloneElement(child, { item: item, test: "test" }) : ""
- ) : ""
+ children
+ ? React.Children.toArray(children).map((child) =>
+ React.isValidElement<{ item: Item, test: string }>(child)
+ ? React.cloneElement(child, { item, test: 'test' })
+ : ''
+ )
+ : ''
}
- )
+ )
}
ItemForm.propTypes = {
- children: PropTypes.node,
- __TYPE: PropTypes.string,
-};
+ children: PropTypes.node,
+ __TYPE: PropTypes.string
+}
ItemForm.defaultProps = {
- __TYPE: 'ItemForm',
-};
+ __TYPE: 'ItemForm'
+}
diff --git a/src/Components/Map/ItemView.tsx b/src/Components/Map/ItemView.tsx
index 50eba914..0af26121 100644
--- a/src/Components/Map/ItemView.tsx
+++ b/src/Components/Map/ItemView.tsx
@@ -2,24 +2,25 @@ import * as React from 'react'
import { Item } from '../../types'
import * as PropTypes from 'prop-types'
-
export const ItemView = ({ children, item }: { children?: React.ReactNode, item?: Item }) => {
return (
- {children ?
- React.Children.toArray(children).map((child) =>
- React.isValidElement<{ item: Item }>(child) ?
- React.cloneElement(child, { item: item }) : ""
- ) : ""}
+ {children
+ ? React.Children.toArray(children).map((child) =>
+ React.isValidElement<{ item: Item }>(child)
+ ? React.cloneElement(child, { item })
+ : ''
+ )
+ : ''}
)
}
ItemView.propTypes = {
children: PropTypes.node,
- __TYPE: PropTypes.string,
-};
+ __TYPE: PropTypes.string
+}
ItemView.defaultProps = {
- __TYPE: 'ItemView',
-};
+ __TYPE: 'ItemView'
+}
diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx
index 4afb915b..084e57c1 100644
--- a/src/Components/Map/Layer.tsx
+++ b/src/Components/Map/Layer.tsx
@@ -10,7 +10,7 @@ import { useFilterTags, useIsGroupTypeVisible, useIsLayerVisible, useVisibleGrou
import { useAddTag, useAllTagsLoaded, useGetItemTags, useTags } from './hooks/useTags'
import { useAddMarker, useAddPopup, useLeafletRefs } from './hooks/useLeafletRefs'
import { Popup } from 'leaflet'
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router-dom'
import { getValue } from '../../Utils/GetValue'
import { hashTagRegex } from '../../Utils/HashTagRegex'
import { randomColor } from '../../Utils/RandomColor'
@@ -18,218 +18,204 @@ import { encodeTag } from '../../Utils/FormatTags'
import { useSelectPosition, useSetMarkerClicked } from './hooks/useSelectPosition'
export const Layer = ({
- data,
- children,
- name = 'places',
- menuIcon = 'MapPinIcon',
- menuText = 'add new place',
- menuColor = '#2E7D32',
- markerIcon = 'circle-solid',
- markerShape = 'circle',
- markerDefaultColor = '#777',
- markerDefaultColor2 = "RGBA(35, 31, 32, 0.2)",
- api,
- itemType,
- itemNameField = 'name',
- itemSubnameField,
- itemTextField = 'text',
- itemAvatarField,
- itemColorField,
- itemOwnerField,
- itemLatitudeField = 'position.coordinates.1',
- itemLongitudeField = 'position.coordinates.0',
- itemTagsField,
- itemOffersField,
- itemNeedsField,
- onlyOnePerOwner = false,
- customEditLink,
- customEditParameter,
- public_edit_items,
- listed = true,
- setItemFormPopup,
- itemFormPopup,
- clusterRef
+ data,
+ children,
+ name = 'places',
+ menuIcon = 'MapPinIcon',
+ menuText = 'add new place',
+ menuColor = '#2E7D32',
+ markerIcon = 'circle-solid',
+ markerShape = 'circle',
+ markerDefaultColor = '#777',
+ markerDefaultColor2 = 'RGBA(35, 31, 32, 0.2)',
+ api,
+ itemType,
+ itemNameField = 'name',
+ itemSubnameField,
+ itemTextField = 'text',
+ itemAvatarField,
+ itemColorField,
+ itemOwnerField,
+ itemLatitudeField = 'position.coordinates.1',
+ itemLongitudeField = 'position.coordinates.0',
+ itemTagsField,
+ itemOffersField,
+ itemNeedsField,
+ onlyOnePerOwner = false,
+ customEditLink,
+ customEditParameter,
+ public_edit_items,
+ listed = true,
+ setItemFormPopup,
+ itemFormPopup,
+ clusterRef
}: LayerProps) => {
+ const filterTags = useFilterTags()
- const filterTags = useFilterTags();
+ const items = useItems()
+ const setItemsApi = useSetItemsApi()
+ const setItemsData = useSetItemsData()
+ const getItemTags = useGetItemTags()
+ const addMarker = useAddMarker()
+ const addPopup = useAddPopup()
+ const leafletRefs = useLeafletRefs()
- const items = useItems();
- const setItemsApi = useSetItemsApi();
- const setItemsData = useSetItemsData();
- const getItemTags = useGetItemTags();
- const addMarker = useAddMarker();
- const addPopup = useAddPopup();
- const leafletRefs = useLeafletRefs();
+ const location = useLocation()
- const location = useLocation();
+ const allTagsLoaded = useAllTagsLoaded()
+ const allItemsLoaded = useAllItemsLoaded()
- const allTagsLoaded = useAllTagsLoaded();
- const allItemsLoaded = useAllItemsLoaded();
+ const setMarkerClicked = useSetMarkerClicked()
+ const selectPosition = useSelectPosition()
- const setMarkerClicked = useSetMarkerClicked();
- const selectPosition = useSelectPosition();
+ const tags = useTags()
+ const addTag = useAddTag()
+ const [newTagsToAdd, setNewTagsToAdd] = useState
+ canAddItems()
+ ? : ""
+
+ : ''
}
- )
+ )
}
diff --git a/src/Components/Map/Subcomponents/Controls/Control.tsx b/src/Components/Map/Subcomponents/Controls/Control.tsx
index a7bf2707..bfb6edaf 100644
--- a/src/Components/Map/Subcomponents/Controls/Control.tsx
+++ b/src/Components/Map/Subcomponents/Controls/Control.tsx
@@ -1,14 +1,9 @@
import * as L from 'leaflet'
import * as React from 'react'
-
-
-export const Control = ({ position, children, zIndex, absolute }: { position: "topLeft" | "topRight" | "bottomLeft" | "bottomRight", children: React.ReactNode, zIndex: string, absolute: boolean }) => {
-
-
+export const Control = ({ position, children, zIndex, absolute }: { position: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight', children: React.ReactNode, zIndex: string, absolute: boolean }) => {
const controlContainerRef = React.createRef
+
{children}
diff --git a/src/Components/Map/Subcomponents/Controls/FilterControl.tsx b/src/Components/Map/Subcomponents/Controls/FilterControl.tsx
index 4281df01..66bfff54 100644
--- a/src/Components/Map/Subcomponents/Controls/FilterControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/FilterControl.tsx
@@ -1,34 +1,31 @@
import * as React from 'react'
-import { useAddVisibleGroupType, useIsGroupTypeVisible, useToggleVisibleGroupType, useVisibleGroupType } from '../../hooks/useFilter';
-import { useEffect } from 'react';
+import { useAddVisibleGroupType, useIsGroupTypeVisible, useToggleVisibleGroupType, useVisibleGroupType } from '../../hooks/useFilter'
+import { useEffect } from 'react'
-export function FilterControl() {
+export function FilterControl () {
+ const [open, setOpen] = React.useState(false)
- const [open, setOpen] = React.useState(false);
+ const groupTypes = [{ text: 'Regional Gruppe', value: 'wuerdekompass' }, { text: 'Themen Gruppe', value: 'themenkompass' }, { text: 'liebevoll.jetzt', value: 'liebevoll.jetzt' }]
- const groupTypes = [{ text: "Regional Gruppe", value: "wuerdekompass" }, { text: "Themen Gruppe", value: "themenkompass" }, { text: "liebevoll.jetzt", value: "liebevoll.jetzt" }]
-
-
- useEffect(() => {
- groupTypes.map(layer =>
- addVisibleGroupType(layer.value)
- )
+ useEffect(() => {
+ groupTypes.map(layer =>
+ addVisibleGroupType(layer.value)
+ )
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [])
+ }, [])
+ const isGroupTypeVisible = useIsGroupTypeVisible()
+ const toggleVisibleGroupType = useToggleVisibleGroupType()
+ const addVisibleGroupType = useAddVisibleGroupType()
+ const visibleGroupTypes = useVisibleGroupType()
- const isGroupTypeVisible = useIsGroupTypeVisible();
- const toggleVisibleGroupType = useToggleVisibleGroupType();
- const addVisibleGroupType = useAddVisibleGroupType();
- const visibleGroupTypes = useVisibleGroupType();
-
- return (
+ return (
{
- open ?
-
+ open
+ ?
- :
-
-
@@ -39,11 +36,10 @@ export function FilterControl() {
}
+ :
{visibleGroupTypes.length < groupTypes.length && }
{
- setOpen(true)
+ setOpen(true)
}}>
- )
+ )
}
diff --git a/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx b/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx
index a8f7109b..49eb8ca3 100644
--- a/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx
@@ -1,29 +1,27 @@
-import { useNavigate } from "react-router-dom"
-import { useAuth } from "../../../Auth";
+import { useNavigate } from 'react-router-dom'
+import { useAuth } from '../../../Auth'
export const GratitudeControl = () => {
- const navigate = useNavigate();
- const {isAuthenticated} = useAuth();
-
- if(isAuthenticated) return (
+ const navigate = useNavigate()
+ const { isAuthenticated } = useAuth()
+
+ if (isAuthenticated) {
+ return (
{
-
)
- else return (<>);
+ } else return (<>)
}
diff --git a/src/Components/Map/Subcomponents/Controls/LayerControl.tsx b/src/Components/Map/Subcomponents/Controls/LayerControl.tsx
index 6a5df980..131c89b6 100644
--- a/src/Components/Map/Subcomponents/Controls/LayerControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/LayerControl.tsx
@@ -1,49 +1,44 @@
import * as React from 'react'
-import { useLayers } from '../../hooks/useLayers';
-import { useIsLayerVisible, useToggleVisibleLayer } from '../../hooks/useFilter';
+import { useLayers } from '../../hooks/useLayers'
+import { useIsLayerVisible, useToggleVisibleLayer } from '../../hooks/useFilter'
-export function LayerControl() {
+export function LayerControl () {
+ const [open, setOpen] = React.useState(false)
- const [open, setOpen] = React.useState(false);
+ const layers = useLayers()
- const layers = useLayers();
+ const isLayerVisible = useIsLayerVisible()
+ const toggleVisibleLayer = useToggleVisibleLayer()
-
-
- const isLayerVisible = useIsLayerVisible();
- const toggleVisibleLayer = useToggleVisibleLayer();
-
- return (
+ return (
{
- navigate("/select-user")
+ navigate('/select-user')
}}>
-
-
}
{
- open ?
-
+ open
+ ?
- :
- (null)
+ const [active, setActive] = useState(false)
+ const [loading, setLoading] = useState(false)
-
- const [lc, setLc] = useState(null);
- const [active, setActive] = useState(false);
- const [loading, setLoading] = useState(false);
-
-
- useEffect(() => {
- if (!init.current) {
- //@ts-ignore
- setLc(L.control.locate().addTo(map));
- init.current = true;
- }
+ useEffect(() => {
+ if (!init.current) {
+ // @ts-ignore
+ setLc(L.control.locate().addTo(map))
+ init.current = true
+ }
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [])
+ }, [])
- useMapEvents({
- locationfound: () => {
- setLoading(false);
- setActive(true);
- },
- })
+ useMapEvents({
+ locationfound: () => {
+ setLoading(false)
+ setActive(true)
+ }
+ })
- return (<>
+ return (<>
)
-
}
-
-
diff --git a/src/Components/Map/Subcomponents/Controls/QuestControl.tsx b/src/Components/Map/Subcomponents/Controls/QuestControl.tsx
index c6b8ba98..1147509b 100644
--- a/src/Components/Map/Subcomponents/Controls/QuestControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/QuestControl.tsx
@@ -1,17 +1,16 @@
import * as React from 'react'
-import { useQuestsOpen, useSetQuestOpen } from '../../../Gaming/hooks/useQuests';
+import { useQuestsOpen, useSetQuestOpen } from '../../../Gaming/hooks/useQuests'
+export function QuestControl () {
+ const questsOpen = useQuestsOpen()
+ const setQuestsOpen = useSetQuestOpen()
-export function QuestControl() {
-
- const questsOpen = useQuestsOpen();
- const setQuestsOpen = useSetQuestOpen();
-
- return (
+ return (
<>
- {questsOpen ? "" :
-
-
{
layers.map(layer =>
- (layer.listed && )
+ (layer.listed && )
)
}
{
- setOpen(true)
- }}>
+ :
- )
+ )
}
diff --git a/src/Components/Map/Subcomponents/Controls/LocateControl.tsx b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx
index 16cc2f14..d3eb458c 100644
--- a/src/Components/Map/Subcomponents/Controls/LocateControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx
@@ -7,55 +7,48 @@ import { useEffect, useRef, useState } from 'react'
// Converts leaflet.locatecontrol to a React Component
export const LocateControl = () => {
+ const map = useMap()
- const map = useMap();
+ // prevent react18 from calling useEffect twice
+ const init = useRef(false)
- // prevent react18 from calling useEffect twice
- const init = useRef(false)
+ const [lc, setLc] = useState {
+ setOpen(true)
+ }}>
-
}
{
- if (active) {
- lc.stop();
- setActive(false);
- }
- else {
- lc.start();
- setLoading(true);
- }
-
- }}>{loading ? :
-
e.stopPropagation()}>
-
+ {questsOpen
+ ? ''
+ : >([])
+ const [tagsResults, setTagsResults] = useState>([])
+ const [itemsResults, setItemsResults] = useState>([])
+ const [hideSuggestions, setHideSuggestions] = useState(true)
- const [value, setValue] = useState('');
- const [geoResults, setGeoResults] = useState>([]);
- const [tagsResults, setTagsResults] = useState>([]);
- const [itemsResults, setItemsResults] = useState>([]);
- const [hideSuggestions, setHideSuggestions] = useState(true);
+ const map = useMap()
+ const tags = useTags()
+ const items = useItems()
+ const leafletRefs = useLeafletRefs()
+ const addFilterTag = useAddFilterTag()
- const map = useMap();
- const tags = useTags();
- const items = useItems();
- const leafletRefs = useLeafletRefs();
- const addFilterTag = useAddFilterTag();
-
-
- useMapEvents({
- popupopen: () => {
- setPopupOpen(true);
- },
- popupclose: () => {
- setPopupOpen(false);
- }
- })
-
- const navigate = useNavigate();
-
- useDebounce(() => {
- const searchGeo = async () => {
- try {
- const { data } = await axios.get(
- `https://photon.komoot.io/api/?q=${value}&limit=5`
- );
- setGeoResults(data.features);
- } catch (error) {
- console.log(error);
- }
- };
- searchGeo();
- setItemsResults(items.filter(item => {
- if (item.layer?.itemNameField) item.name = getValue(item, item.layer.itemNameField)
- if (item.layer?.itemTextField) item.text = getValue(item, item.layer.itemTextField)
- return value.length > 2 && ((item.layer?.listed && item.name?.toLowerCase().includes(value.toLowerCase()) || item.text?.toLowerCase().includes(value.toLowerCase())))
- }))
- let phrase = value;
- if (value.startsWith("#")) phrase = value.substring(1);
- setTagsResults(tags.filter(tag => tag.name?.toLowerCase().includes(phrase.toLowerCase())))
-
- }, 500, [value]);
-
- const hide = async () => {
- setTimeout(() => {
- setHideSuggestions(true);
- }, 200);
+ useMapEvents({
+ popupopen: () => {
+ setPopupOpen(true)
+ },
+ popupclose: () => {
+ setPopupOpen(false)
}
+ })
- const searchInput = useRef(null);
- const [embedded, setEmbedded] = useState(true)
+ const navigate = useNavigate()
+ useDebounce(() => {
+ const searchGeo = async () => {
+ try {
+ const { data } = await axios.get(
+ `https://photon.komoot.io/api/?q=${value}&limit=5`
+ )
+ setGeoResults(data.features)
+ } catch (error) {
+ console.log(error)
+ }
+ }
+ searchGeo()
+ setItemsResults(items.filter(item => {
+ if (item.layer?.itemNameField) item.name = getValue(item, item.layer.itemNameField)
+ if (item.layer?.itemTextField) item.text = getValue(item, item.layer.itemTextField)
+ return value.length > 2 && ((item.layer?.listed && item.name?.toLowerCase().includes(value.toLowerCase()) || item.text?.toLowerCase().includes(value.toLowerCase())))
+ }))
+ let phrase = value
+ if (value.startsWith('#')) phrase = value.substring(1)
+ setTagsResults(tags.filter(tag => tag.name?.toLowerCase().includes(phrase.toLowerCase())))
+ }, 500, [value])
+ const hide = async () => {
+ setTimeout(() => {
+ setHideSuggestions(true)
+ }, 200)
+ }
- const location = useLocation();
- useEffect(() => {
- const params = new URLSearchParams(location.search);
- const embedded = params.get("embedded");
- embedded != "true" && setEmbedded(false)
- }, [location]);
+ const searchInput = useRef(null)
+ const [embedded, setEmbedded] = useState(true)
+ const location = useLocation()
+ useEffect(() => {
+ const params = new URLSearchParams(location.search)
+ const embedded = params.get('embedded')
+ embedded != 'true' && setEmbedded(false)
+ }, [location])
- return (<>
+ return (<>
{!(windowDimensions.height < 500 && popupOpen && hideSuggestions) &&
e.stopPropagation()}>
+
}
- )
+ )
}
diff --git a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
index 56159758..5ac2a494 100644
--- a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
@@ -1,97 +1,89 @@
import * as React from 'react'
import { useAddFilterTag } from '../../hooks/useFilter'
-import useWindowDimensions from '../../hooks/useWindowDimension';
-import axios from 'axios';
-import { useEffect, useRef, useState } from 'react';
-import { useMap, useMapEvents } from 'react-leaflet';
-import { LatLng, LatLngBounds } from 'leaflet';
-import { useDebounce } from '../../hooks/useDebounce';
-import { useTags } from '../../hooks/useTags';
-import { useItems } from '../../hooks/useItems';
-import { useLeafletRefs } from '../../hooks/useLeafletRefs';
-import { getValue } from '../../../../Utils/GetValue';
-import { LocateControl } from './LocateControl';
-import * as L from 'leaflet';
-import MarkerIconFactory from '../../../../Utils/MarkerIconFactory';
-import { decodeTag } from '../../../../Utils/FormatTags';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { Item } from '../../../../types';
-import { SidebarControl } from './SidebarControl';
-
-
+import useWindowDimensions from '../../hooks/useWindowDimension'
+import axios from 'axios'
+import { useEffect, useRef, useState } from 'react'
+import { useMap, useMapEvents } from 'react-leaflet'
+import { LatLng, LatLngBounds } from 'leaflet'
+import { useDebounce } from '../../hooks/useDebounce'
+import { useTags } from '../../hooks/useTags'
+import { useItems } from '../../hooks/useItems'
+import { useLeafletRefs } from '../../hooks/useLeafletRefs'
+import { getValue } from '../../../../Utils/GetValue'
+import { LocateControl } from './LocateControl'
+import * as L from 'leaflet'
+import MarkerIconFactory from '../../../../Utils/MarkerIconFactory'
+import { decodeTag } from '../../../../Utils/FormatTags'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { Item } from '../../../../types'
+import { SidebarControl } from './SidebarControl'
export const SearchControl = () => {
+ const windowDimensions = useWindowDimensions()
+ const [popupOpen, setPopupOpen] = useState(false)
- const windowDimensions = useWindowDimensions();
- const [popupOpen, setPopupOpen] = useState(false);
+ const [value, setValue] = useState('')
+ const [geoResults, setGeoResults] = useState setQuestsOpen(true)}>
@@ -19,5 +18,5 @@ export function QuestControl() {
@@ -101,21 +93,22 @@ export const SearchControl = () => {
ref={searchInput}
onChange={(e) => setValue(e.target.value)}
onFocus={() => {
- setHideSuggestions(false);
- if (windowDimensions.width < 500) map.closePopup();
+ setHideSuggestions(false)
+ if (windowDimensions.width < 500) map.closePopup()
}}
onBlur={() => hide()} />
- {value.length > 0 && }
+ {value.length > 0 && }
+ {hideSuggestions || Array.from(geoResults).length == 0 && itemsResults.length == 0 && tagsResults.length == 0 && !isGeoCoordinate(value) || value.length == 0
+ ? ''
+ :
{tagsResults.length > 0 &&
{tagsResults.slice(0, 3).map(tag => (
} {itemsResults.slice(0, 5).map(item => (
{
- addFilterTag(tag)
+ addFilterTag(tag)
}}>
#{decodeTag(tag.name)}
@@ -126,14 +119,12 @@ export const SearchControl = () => {
{itemsResults.length > 0 && tagsResults.length > 0 && } {itemsResults.slice(0, 5).map(item => (
{
- const marker = Object.entries(leafletRefs).find(r => r[1].item == item)?.[1].marker;
- if (marker) {
- navigate(`/${item.id}?${new URLSearchParams(window.location.search)}`)
- }
- else {
- navigate("item/" + item.id + "?" + new URLSearchParams(window.location.search))
- }
-
+ const marker = Object.entries(leafletRefs).find(r => r[1].item == item)?.[1].marker
+ if (marker) {
+ navigate(`/${item.id}?${new URLSearchParams(window.location.search)}`)
+ } else {
+ navigate('item/' + item.id + '?' + new URLSearchParams(window.location.search))
+ }
}
}>
@@ -147,11 +138,11 @@ export const SearchControl = () => {
{Array.from(geoResults).length > 0 && (itemsResults.length > 0 || tagsResults.length > 0) &&
} {Array.from(geoResults).map((geo) => (
)
-
}
-
-
diff --git a/src/Components/Map/Subcomponents/Controls/TagsControl.tsx b/src/Components/Map/Subcomponents/Controls/TagsControl.tsx
index df4c53b7..48075bd1 100644
--- a/src/Components/Map/Subcomponents/Controls/TagsControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/TagsControl.tsx
@@ -1,11 +1,10 @@
import * as React from 'react'
-import { useFilterTags, useRemoveFilterTag } from '../../hooks/useFilter';
-import { decodeTag } from '../../../../Utils/FormatTags';
+import { useFilterTags, useRemoveFilterTag } from '../../hooks/useFilter'
+import { decodeTag } from '../../../../Utils/FormatTags'
export const TagsControl = () => {
-
- const filterTags = useFilterTags();
- const removeFilterTag = useRemoveFilterTag();
+ const filterTags = useFilterTags()
+ const removeFilterTag = useRemoveFilterTag()
return (
>
}
-export function ItemFormPopup(props: ItemFormPopupProps) {
+export function ItemFormPopup (props: ItemFormPopupProps) {
+ const [spinner, setSpinner] = useState(false)
- const [spinner, setSpinner] = useState(false);
+ // eslint-disable-next-line no-unused-vars
+ const [popupTitle, setPopupTitle] = useState('')
- // eslint-disable-next-line no-unused-vars
- const [popupTitle, setPopupTitle] = useState("");
+ const formRef = useRef(null)
- const formRef = useRef(null);
+ const map = useMap()
- const map = useMap();
+ const addItem = useAddItem()
+ const updateItem = useUpdateItem()
+ const items = useItems()
+ // eslint-disable-next-line no-unused-vars
+ const removeItem = useRemoveItem()
- const addItem = useAddItem();
- const updateItem = useUpdateItem();
- const items = useItems();
- // eslint-disable-next-line no-unused-vars
- const removeItem = useRemoveItem();
+ const tags = useTags()
+ const addTag = useAddTag()
+ const resetFilterTags = useResetFilterTags()
- const tags = useTags();
- const addTag = useAddTag();
+ const { user } = useAuth()
- const resetFilterTags = useResetFilterTags();
+ const handleSubmit = async (evt: any) => {
+ const formItem: Item = {} as Item
+ Array.from(evt.target).forEach((input: HTMLInputElement) => {
+ if (input.name) {
+ formItem[input.name] = input.value
+ }
+ })
+ formItem.position = new Geometry(props.position.lng, props.position.lat)
+ evt.preventDefault()
+ setSpinner(true)
- const { user } = useAuth();
+ 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() })
+ }
+ })
+ if (props.item) {
+ let success = false
+ try {
+ await props.layer.api?.updateItem!({ ...formItem, id: props.item.id })
+ success = true
+ } catch (error) {
+ toast.error(error.toString())
+ }
+ if (success) {
+ console.log(props.item)
- const handleSubmit = async (evt: any) => {
- const formItem: Item = {} as Item;
- Array.from(evt.target).forEach((input: HTMLInputElement) => {
- if (input.name) {
- formItem[input.name] = input.value;
- }
- });
- formItem['position'] = new Geometry(props.position.lng, props.position.lat);
- evt.preventDefault();
- setSpinner(true);
+ updateItem({ ...props.item, ...formItem })
+ toast.success('Item updated')
+ }
+ setSpinner(false)
+ map.closePopup()
+ } else {
+ const item = items.find(i => i.user_created?.id === user?.id && i.layer?.itemType.name === props.layer.itemType.name)
- 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()})
- }
- });
-
-
-
- if(props.item) {
- let success = false;
- try {
- await props.layer.api?.updateItem!({...formItem, id: props.item.id});
- success = true;
- } catch (error) {
- toast.error(error.toString());
- }
- if(success) {
- console.log(props.item);
-
- updateItem({...props.item, ...formItem});
- toast.success("Item updated");
- }
- setSpinner(false);
- map.closePopup();
- }
- else {
- const item = items.find(i => i.user_created?.id === user?.id && i.layer?.itemType.name === props.layer.itemType.name);
-
- const uuid = crypto.randomUUID();
- let success = false;
- try {
- props.layer.onlyOnePerOwner && item && await props.layer.api?.updateItem!({...formItem, id: item?.id });
- (!props.layer.onlyOnePerOwner || !item) && await props.layer.api?.createItem!({...formItem, id: uuid, name: formItem.name ? formItem.name : user?.first_name });
- success = true;
- } catch (error) {
- toast.error(error.toString());
- }
- if(success) {
- props.layer.onlyOnePerOwner && item && updateItem({...item, ...formItem});
- (!props.layer.onlyOnePerOwner || !item) && addItem({...formItem, name: formItem.name ? formItem.name : user?.first_name , user_created: user, type: props.layer.itemType, id: uuid, layer: props.layer, public_edit: !user ? true : false});
- toast.success("New item created");
- resetFilterTags();
- }
- setSpinner(false);
- map.closePopup();
- }
- props.setItemFormPopup!(null);
+ const uuid = crypto.randomUUID()
+ let success = false
+ try {
+ props.layer.onlyOnePerOwner && item && await props.layer.api?.updateItem!({ ...formItem, id: item?.id });
+ (!props.layer.onlyOnePerOwner || !item) && await props.layer.api?.createItem!({ ...formItem, id: uuid, name: formItem.name ? formItem.name : user?.first_name })
+ success = true
+ } catch (error) {
+ toast.error(error.toString())
+ }
+ if (success) {
+ props.layer.onlyOnePerOwner && item && updateItem({ ...item, ...formItem });
+ (!props.layer.onlyOnePerOwner || !item) && addItem({ ...formItem, name: formItem.name ? formItem.name : user?.first_name, user_created: user, type: props.layer.itemType, id: uuid, layer: props.layer, public_edit: !user })
+ toast.success('New item created')
+ resetFilterTags()
+ }
+ setSpinner(false)
+ map.closePopup()
}
+ props.setItemFormPopup!(null)
+ }
-
- const resetPopup = () => {
- if (formRef.current) {
- formRef.current.reset();
- }
+ const resetPopup = () => {
+ if (formRef.current) {
+ formRef.current.reset()
}
+ }
- useEffect(() => {
- resetPopup();
- }, [props.position])
+ useEffect(() => {
+ resetPopup()
+ }, [props.position])
- return (
+ return (
{
- setTimeout(function () {
- resetPopup()
- }, 100);
- }
+ remove: () => {
+ setTimeout(function () {
+ resetPopup()
+ }, 100)
+ }
}}
position={props.position}>
- )
+ )
}
-
-
-
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
index e38d1919..277e1a8c 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
@@ -1,12 +1,12 @@
-import * as React from "react"
-import { Item, ItemsApi } from "../../../../types";
-import { useHasUserPermission } from "../../hooks/usePermissions";
-import { getValue } from "../../../../Utils/GetValue";
+import * as React from 'react'
+import { Item, ItemsApi } from '../../../../types'
+import { useHasUserPermission } from '../../hooks/usePermissions'
+import { getValue } from '../../../../Utils/GetValue'
import { useAssetApi } from '../../../AppShell/hooks/useAssets'
-import DialogModal from "../../../Templates/DialogModal";
-import { useNavigate } from "react-router-dom";
+import DialogModal from '../../../Templates/DialogModal'
+import { useNavigate } from 'react-router-dom'
-export function HeaderView({ item, api, editCallback, deleteCallback, setPositionCallback, itemNameField, itemSubnameField, itemAvatarField, loading, hideMenu = false, big = false, truncateSubname = true, hideSubname = false, showAddress = false }: {
+export function HeaderView ({ item, api, editCallback, deleteCallback, setPositionCallback, itemNameField, itemSubnameField, itemAvatarField, loading, hideMenu = false, big = false, truncateSubname = true, hideSubname = false, showAddress = false }: {
item: Item,
api?: ItemsApi,
editCallback?: any,
@@ -22,63 +22,58 @@ export function HeaderView({ item, api, editCallback, deleteCallback, setPositio
truncateSubname?: boolean,
showAddress?: boolean
}) {
+ const [modalOpen, setModalOpen] = React.useState(false)
+ const hasUserPermission = useHasUserPermission()
+ const navigate = useNavigate()
+ const assetsApi = useAssetApi()
- const [modalOpen, setModalOpen] = React.useState(false);
+ const avatar = itemAvatarField && getValue(item, itemAvatarField) ? assetsApi.url + getValue(item, itemAvatarField) + `${big ? '?width=160&heigth=160' : '?width=80&heigth=80'}` : item.layer?.itemAvatarField && item && getValue(item, item.layer?.itemAvatarField) && assetsApi.url + getValue(item, item.layer?.itemAvatarField) + `${big ? '?width=160&heigth=160' : '?width=80&heigth=80'}`
+ const title = itemNameField ? getValue(item, itemNameField) : item.layer?.itemNameField && item && getValue(item, item.layer?.itemNameField)
+ const subtitle = itemSubnameField ? getValue(item, itemSubnameField) : item.layer?.itemSubnameField && item && getValue(item, item.layer?.itemSubnameField)
- const hasUserPermission = useHasUserPermission();
- const navigate = useNavigate();
- const assetsApi = useAssetApi();
-
- const avatar = itemAvatarField && getValue(item, itemAvatarField) ? assetsApi.url + getValue(item, itemAvatarField) + `${big ? "?width=160&heigth=160" : "?width=80&heigth=80"}` : item.layer?.itemAvatarField && item && getValue(item, item.layer?.itemAvatarField) && assetsApi.url + getValue(item, item.layer?.itemAvatarField) + `${big ? "?width=160&heigth=160" : "?width=80&heigth=80"}`;
- const title = itemNameField ? getValue(item, itemNameField) : item.layer?.itemNameField && item && getValue(item, item.layer?.itemNameField);
- const subtitle = itemSubnameField ? getValue(item, itemSubnameField) : item.layer?.itemSubnameField && item && getValue(item, item.layer?.itemSubnameField);
-
- const [address, /* setAdress*/] = React.useState("");
-
- const params = new URLSearchParams(window.location.search);
+ const [address] = React.useState('')
+ const params = new URLSearchParams(window.location.search)
const openDeleteModal = async (event: React.MouseEvent) => {
- setModalOpen(true);
- event.stopPropagation();
+ setModalOpen(true)
+ event.stopPropagation()
}
-
-
return (
<>
} {Array.from(geoResults).map((geo) => (
{
- searchInput.current?.blur();
- L.marker(new LatLng(geo.geometry.coordinates[1], geo.geometry.coordinates[0]), { icon: MarkerIconFactory("circle", "#777", "RGBA(35, 31, 32, 0.2)", "point") }).addTo(map).bindPopup(`${geo?.properties.name ? geo?.properties.name : value}
))}
{isGeoCoordinate(value) &&
${geo?.properties.name ? geo?.properties.name : value}${capitalizeFirstLetter(geo?.properties?.osm_value)}`).openPopup().addEventListener("popupclose", (e) => { console.log(e.target.remove()) });
- if (geo.properties.extent) map.fitBounds(new LatLngBounds(new LatLng(geo.properties.extent[1], geo.properties.extent[0]), new LatLng(geo.properties.extent[3], geo.properties.extent[2])));
- else map.setView(new LatLng(geo.geometry.coordinates[1], geo.geometry.coordinates[0]), 15, { duration: 1 });
- hide();
+ searchInput.current?.blur()
+ L.marker(new LatLng(geo.geometry.coordinates[1], geo.geometry.coordinates[0]), { icon: MarkerIconFactory('circle', '#777', 'RGBA(35, 31, 32, 0.2)', 'point') }).addTo(map).bindPopup(`${geo?.properties.name ? geo?.properties.name : value}${capitalizeFirstLetter(geo?.properties?.osm_value)}`).openPopup().addEventListener('popupclose', (e) => { console.log(e.target.remove()) })
+ if (geo.properties.extent) map.fitBounds(new LatLngBounds(new LatLng(geo.properties.extent[1], geo.properties.extent[0]), new LatLng(geo.properties.extent[3], geo.properties.extent[2])))
+ else map.setView(new LatLng(geo.geometry.coordinates[1], geo.geometry.coordinates[0]), 15, { duration: 1 })
+ hide()
}}>
${geo?.properties.name ? geo?.properties.name : value}${capitalizeFirstLetter(geo?.properties?.osm_value)}`).openPopup().addEventListener('popupclose', (e) => { console.log(e.target.remove()) })
+ if (geo.properties.extent) map.fitBounds(new LatLngBounds(new LatLng(geo.properties.extent[1], geo.properties.extent[0]), new LatLng(geo.properties.extent[3], geo.properties.extent[2])))
+ else map.setView(new LatLng(geo.geometry.coordinates[1], geo.geometry.coordinates[0]), 15, { duration: 1 })
+ hide()
}}>
{
- L.marker(new LatLng(extractCoordinates(value)![0], extractCoordinates(value)![1]), { icon: MarkerIconFactory("circle", "#777", "RGBA(35, 31, 32, 0.2)", "point") }).addTo(map).bindPopup(`
}
@@ -184,26 +175,26 @@ export const SearchControl = () => {
}
- )
+ )
}
-function isGeoCoordinate(input) {
- const geokoordinatenRegex = /^[-+]?([1-8]?\d(\.\d+)?|90(\.0+)?),\s*[-+]?(180(\.0+)?|((1[0-7]\d)|([1-9]?\d))(\.\d+)?)$/;
- return geokoordinatenRegex.test(input);
+function isGeoCoordinate (input) {
+ const geokoordinatenRegex = /^[-+]?([1-8]?\d(\.\d+)?|90(\.0+)?),\s*[-+]?(180(\.0+)?|((1[0-7]\d)|([1-9]?\d))(\.\d+)?)$/
+ return geokoordinatenRegex.test(input)
}
-function extractCoordinates(input): number[] | null {
- const result = input.split(",")
- if (result) {
- const latitude = parseFloat(result[0]);
- const longitude = parseFloat(result[1]);
- if (!isNaN(latitude) && !isNaN(longitude)) {
- return [latitude, longitude];
- }
+function extractCoordinates (input): number[] | null {
+ const result = input.split(',')
+ if (result) {
+ const latitude = parseFloat(result[0])
+ const longitude = parseFloat(result[1])
+ if (!isNaN(latitude) && !isNaN(longitude)) {
+ return [latitude, longitude]
}
- return null; // Invalid input or error
+ }
+ return null // Invalid input or error
}
-function capitalizeFirstLetter(string) {
- return string.charAt(0).toUpperCase() + string.slice(1);
-}
\ No newline at end of file
+function capitalizeFirstLetter (string) {
+ return string.charAt(0).toUpperCase() + string.slice(1)
+}
diff --git a/src/Components/Map/Subcomponents/Controls/SidebarControl.tsx b/src/Components/Map/Subcomponents/Controls/SidebarControl.tsx
index b342a7f1..8657e7ed 100644
--- a/src/Components/Map/Subcomponents/Controls/SidebarControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/SidebarControl.tsx
@@ -1,11 +1,6 @@
-
-
// Converts leaflet.locatecontrol to a React Component
export const SidebarControl = () => {
-
-
-
- return (<>
+ return (<>
${extractCoordinates(value)![0]}, ${extractCoordinates(value)![1]}
`).openPopup().addEventListener("popupclose", (e) => { console.log(e.target.remove()) }); - map.setView(new LatLng(extractCoordinates(value)![0], extractCoordinates(value)![1]), 15, { duration: 1 }) + L.marker(new LatLng(extractCoordinates(value)![0], extractCoordinates(value)![1]), { icon: MarkerIconFactory('circle', '#777', 'RGBA(35, 31, 32, 0.2)', 'point') }).addTo(map).bindPopup(`${extractCoordinates(value)![0]}, ${extractCoordinates(value)![1]}
`).openPopup().addEventListener('popupclose', (e) => { console.log(e.target.remove()) }) + map.setView(new LatLng(extractCoordinates(value)![0], extractCoordinates(value)![1]), 15, { duration: 1 }) }}>
@@ -19,7 +14,4 @@ export const SidebarControl = () => {
@@ -20,5 +19,3 @@ export const TagsControl = () => {
}
)
}
-
-
diff --git a/src/Components/Map/Subcomponents/ItemFormPopup.tsx b/src/Components/Map/Subcomponents/ItemFormPopup.tsx
index bde1a8cb..8694f282 100644
--- a/src/Components/Map/Subcomponents/ItemFormPopup.tsx
+++ b/src/Components/Map/Subcomponents/ItemFormPopup.tsx
@@ -21,130 +21,123 @@ export interface ItemFormPopupProps {
setItemFormPopup?: React.Dispatch
-
+
{avatar && (
-
+
)}
-
-
+
+
-
{title}
- {showAddress && address && !hideSubname &&
+ {showAddress && address && !hideSubname &&
{address}
}
- {subtitle && !hideSubname &&
+ {subtitle && !hideSubname &&
{subtitle}
}
e.stopPropagation()} className={`${big ? "tw-mt-5" : "tw-mt-1"}`}>
- {(api?.deleteItem || item.layer?.api?.updateItem)
- && (hasUserPermission(api?.collectionName!, "delete", item) || hasUserPermission(api?.collectionName!, "update", item))
- && !hideMenu &&
+
e.stopPropagation()} className={`${big ? 'tw-mt-5' : 'tw-mt-1'}`}>
+ {(api?.deleteItem || item.layer?.api?.updateItem) &&
+ (hasUserPermission(api?.collectionName!, 'delete', item) || hasUserPermission(api?.collectionName!, 'update', item)) &&
+ !hideMenu &&
- )
+ )
}
diff --git a/src/Components/Map/Tags.tsx b/src/Components/Map/Tags.tsx
index c52f3461..32238030 100644
--- a/src/Components/Map/Tags.tsx
+++ b/src/Components/Map/Tags.tsx
@@ -1,43 +1,41 @@
import * as React from 'react'
-import { useEffect } from 'react';
-import { ItemsApi, Tag } from '../../types';
+import { useEffect } from 'react'
+import { ItemsApi, Tag } from '../../types'
import { useSetTagData, useSetTagApi, useTags } from './hooks/useTags'
-import { useLocation } from 'react-router-dom';
-import { useAddFilterTag, useFilterTags, useResetFilterTags } from './hooks/useFilter';
+import { useLocation } from 'react-router-dom'
+import { useAddFilterTag, useFilterTags, useResetFilterTags } from './hooks/useFilter'
-export function Tags({data, api} : {data?: Tag[], api?: ItemsApi}) {
-const setTagData = useSetTagData();
-const setTagApi = useSetTagApi();
+export function Tags ({ data, api } : {data?: Tag[], api?: ItemsApi}) {
+ const setTagData = useSetTagData()
+ const setTagApi = useSetTagApi()
-useEffect(() => {
- data && setTagData(data);
- api && setTagApi(api);
-// eslint-disable-next-line react-hooks/exhaustive-deps
-}, [api, data])
+ useEffect(() => {
+ data && setTagData(data)
+ api && setTagApi(api)
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [api, data])
+ const location = useLocation()
+ const addFilterTag = useAddFilterTag()
+ const resetFilterTags = useResetFilterTags()
+ const tags = useTags()
+ const filterTags = useFilterTags()
-const location = useLocation();
-const addFilterTag = useAddFilterTag();
-const resetFilterTags = useResetFilterTags();
-const tags = useTags();
-const filterTags = useFilterTags()
-
-
-useEffect(() => {
- const params = new URLSearchParams(location.search);
- const urlTags = params.get("tags")
- const decodedTags = urlTags ? decodeURIComponent(urlTags) : "";
- const decodedTagsArray = decodedTags.split(";");
- if(decodedTagsArray?.some(ut => !filterTags.find(ft => ut.toLocaleLowerCase() === ft.name.toLocaleLowerCase()))||filterTags?.some(ft => !decodedTagsArray?.find(ut => ut.toLocaleLowerCase() === ft.name.toLocaleLowerCase())))
- {resetFilterTags()
- decodedTagsArray?.map(urlTag => {
- const tag = tags.find(t => t.name.toLocaleLowerCase() === urlTag.toLocaleLowerCase())
- tag && addFilterTag(tag)
- });}
-
-// eslint-disable-next-line react-hooks/exhaustive-deps
-}, [location, tags]);
+ useEffect(() => {
+ const params = new URLSearchParams(location.search)
+ const urlTags = params.get('tags')
+ const decodedTags = urlTags ? decodeURIComponent(urlTags) : ''
+ const decodedTagsArray = decodedTags.split(';')
+ if (decodedTagsArray?.some(ut => !filterTags.find(ft => ut.toLocaleLowerCase() === ft.name.toLocaleLowerCase())) || filterTags?.some(ft => !decodedTagsArray?.find(ut => ut.toLocaleLowerCase() === ft.name.toLocaleLowerCase()))) {
+ resetFilterTags()
+ decodedTagsArray?.map(urlTag => {
+ const tag = tags.find(t => t.name.toLocaleLowerCase() === urlTag.toLocaleLowerCase())
+ tag && addFilterTag(tag)
+ })
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [location, tags])
return (
<>
diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx
index a5b0e32a..52715bb5 100644
--- a/src/Components/Map/UtopiaMap.tsx
+++ b/src/Components/Map/UtopiaMap.tsx
@@ -1,15 +1,14 @@
-import { UtopiaMapProps } from "../../types";
-import { ContextWrapper } from "../AppShell/ContextWrapper";
-import { UtopiaMapInner } from "./UtopiaMapInner";
-import 'react-toastify/dist/ReactToastify.css';
+import { UtopiaMapProps } from '../../types'
+import { ContextWrapper } from '../AppShell/ContextWrapper'
+import { UtopiaMapInner } from './UtopiaMapInner'
+import 'react-toastify/dist/ReactToastify.css'
-
-function UtopiaMap(props: UtopiaMapProps) {
- return (
+function UtopiaMap (props: UtopiaMapProps) {
+ return (
- );
+ )
}
-export { UtopiaMap };
+export { UtopiaMap }
diff --git a/src/Components/Map/UtopiaMapInner.tsx b/src/Components/Map/UtopiaMapInner.tsx
index 7ab08747..f920914b 100644
--- a/src/Components/Map/UtopiaMapInner.tsx
+++ b/src/Components/Map/UtopiaMapInner.tsx
@@ -1,107 +1,104 @@
-import { TileLayer, MapContainer, useMapEvents, GeoJSON } from "react-leaflet";
-import "leaflet/dist/leaflet.css";
-import * as React from "react";
-import { UtopiaMapProps } from "../../types";
-import "./UtopiaMap.css";
-import { LatLng } from "leaflet";
-import MarkerClusterGroup from 'react-leaflet-cluster';
-import AddButton from "./Subcomponents/AddButton";
-import { useEffect, useRef, useState } from "react";
-import { ItemFormPopupProps } from "./Subcomponents/ItemFormPopup";
-import { SearchControl } from "./Subcomponents/Controls/SearchControl";
-import { Control } from "./Subcomponents/Controls/Control";
-import { Outlet } from "react-router-dom";
-import { TagsControl } from "./Subcomponents/Controls/TagsControl";
-import { useSelectPosition, useSetMapClicked, useSetSelectPosition } from "./hooks/useSelectPosition";
-import { useClusterRef, useSetClusterRef } from "./hooks/useClusterRef";
-import { Feature, Geometry as GeoJSONGeometry } from 'geojson';
-import { FilterControl } from "./Subcomponents/Controls/FilterControl";
-import { LayerControl } from "./Subcomponents/Controls/LayerControl";
-import { useLayers } from "./hooks/useLayers";
-import { useAddVisibleLayer } from "./hooks/useFilter";
-import { GratitudeControl } from "./Subcomponents/Controls/GratitudeControl";
-import { SelectPosition } from "./Subcomponents/SelectPosition";
+import { TileLayer, MapContainer, useMapEvents, GeoJSON } from 'react-leaflet'
+import 'leaflet/dist/leaflet.css'
+import * as React from 'react'
+import { UtopiaMapProps } from '../../types'
+import './UtopiaMap.css'
+import { LatLng } from 'leaflet'
+import MarkerClusterGroup from 'react-leaflet-cluster'
+import AddButton from './Subcomponents/AddButton'
+import { useEffect, useRef, useState } from 'react'
+import { ItemFormPopupProps } from './Subcomponents/ItemFormPopup'
+import { SearchControl } from './Subcomponents/Controls/SearchControl'
+import { Control } from './Subcomponents/Controls/Control'
+import { Outlet } from 'react-router-dom'
+import { TagsControl } from './Subcomponents/Controls/TagsControl'
+import { useSelectPosition, useSetMapClicked, useSetSelectPosition } from './hooks/useSelectPosition'
+import { useClusterRef, useSetClusterRef } from './hooks/useClusterRef'
+import { Feature, Geometry as GeoJSONGeometry } from 'geojson'
+import { FilterControl } from './Subcomponents/Controls/FilterControl'
+import { LayerControl } from './Subcomponents/Controls/LayerControl'
+import { useLayers } from './hooks/useLayers'
+import { useAddVisibleLayer } from './hooks/useFilter'
+import { GratitudeControl } from './Subcomponents/Controls/GratitudeControl'
+import { SelectPosition } from './Subcomponents/SelectPosition'
import { toast } from 'react-toastify'
-import { TextView } from "./Subcomponents/ItemPopupComponents/TextView";
+import { TextView } from './Subcomponents/ItemPopupComponents/TextView'
+const mapDivRef = React.createRef()
-const mapDivRef = React.createRef();
-
-export function UtopiaMapInner({
- height = "500px",
- width = "100%",
- center = [50.6, 9.5],
- zoom = 10,
- children,
- geo,
- showFilterControl = false,
- showGratitudeControl = false,
- showLayerControl = true,
- infoText
+export function UtopiaMapInner ({
+ height = '500px',
+ width = '100%',
+ center = [50.6, 9.5],
+ zoom = 10,
+ children,
+ geo,
+ showFilterControl = false,
+ showGratitudeControl = false,
+ showLayerControl = true,
+ infoText
}: UtopiaMapProps) {
+ // Hooks that rely on contexts, called after ContextWrapper is provided
+ const selectNewItemPosition = useSelectPosition()
+ const setSelectNewItemPosition = useSetSelectPosition()
+ const setClusterRef = useSetClusterRef()
+ const clusterRef = useClusterRef()
+ const setMapClicked = useSetMapClicked()
+ const [itemFormPopup, setItemFormPopup] = useState(null)
- // Hooks that rely on contexts, called after ContextWrapper is provided
- const selectNewItemPosition = useSelectPosition();
- const setSelectNewItemPosition = useSetSelectPosition();
- const setClusterRef = useSetClusterRef();
- const clusterRef = useClusterRef();
- const setMapClicked = useSetMapClicked();
- const [itemFormPopup, setItemFormPopup] = useState(null);
+ const layers = useLayers()
+ const addVisibleLayer = useAddVisibleLayer()
- const layers = useLayers();
- const addVisibleLayer = useAddVisibleLayer();
-
- useEffect(() => {
- layers.forEach(layer => addVisibleLayer(layer));
+ useEffect(() => {
+ layers.forEach(layer => addVisibleLayer(layer))
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [layers]);
+ }, [layers])
- const init = useRef(false)
- useEffect(() => {
- if (!init.current) {
- infoText && setTimeout(() => {
- toast(, { autoClose: false});
- }, 4000);
- init.current=true;
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [])
-
-
- function MapEventListener() {
- useMapEvents({
- click: (e) => {
- resetMetaTags();
- console.log(e.latlng.lat + ',' + e.latlng.lng);
- if (selectNewItemPosition) {
- setMapClicked({ position: e.latlng, setItemFormPopup: setItemFormPopup });
- }
- },
- moveend: () => { }
- });
- return null;
+ const init = useRef(false)
+ useEffect(() => {
+ if (!init.current) {
+ infoText && setTimeout(() => {
+ toast(, { autoClose: false })
+ }, 4000)
+ init.current = true
}
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [])
- const resetMetaTags = () => {
- const params = new URLSearchParams(window.location.search);
- if (!window.location.pathname.includes("/item/")) {
- window.history.pushState({}, "", `/` + `${params.toString() !== "" ? `?${params}` : ""}`);
+ function MapEventListener () {
+ useMapEvents({
+ click: (e) => {
+ resetMetaTags()
+ console.log(e.latlng.lat + ',' + e.latlng.lng)
+ if (selectNewItemPosition) {
+ setMapClicked({ position: e.latlng, setItemFormPopup })
}
- document.title = document.title.split("-")[0];
- document.querySelector('meta[property="og:title"]')?.setAttribute("content", document.title);
- document.querySelector('meta[property="og:description"]')?.setAttribute("content", `${document.querySelector('meta[name="description"]')?.getAttribute("content")}`);
- };
+ },
+ moveend: () => { }
+ })
+ return null
+ }
- // eslint-disable-next-line no-undef
- const onEachFeature = (feature: Feature, layer: L.Layer) => {
- if (feature.properties) {
- layer.bindPopup(feature.properties.name);
- }
- };
+ const resetMetaTags = () => {
+ const params = new URLSearchParams(window.location.search)
+ if (!window.location.pathname.includes('/item/')) {
+ window.history.pushState({}, '', '/' + `${params.toString() !== '' ? `?${params}` : ''}`)
+ }
+ document.title = document.title.split('-')[0]
+ document.querySelector('meta[property="og:title"]')?.setAttribute('content', document.title)
+ document.querySelector('meta[property="og:description"]')?.setAttribute('content', `${document.querySelector('meta[name="description"]')?.getAttribute('content')}`)
+ }
- return (
-
-
- {((api?.updateItem && hasUserPermission(api.collectionName!, "update", item))) && editCallback &&
-
+ // eslint-disable-next-line no-undef
+ const onEachFeature = (feature: Feature, layer: L.Layer) => {
+ if (feature.properties) {
+ layer.bindPopup(feature.properties.name)
+ }
+ }
+
+ return (
+ ;
const ClusterRefContext = createContext({
- clusterRef: {} as React.MutableRefObject,
- setClusterRef: () => { },
-});
+ clusterRef: {} as React.MutableRefObject,
+ setClusterRef: () => { }
+})
-function useClusterRefManager(): {
+function useClusterRefManager (): {
clusterRef: any
setClusterRef: React.Dispatch>>;
-} {
- const [clusterRef, setClusterRef] = useState>({} as React.MutableRefObject);
-
- return { clusterRef, setClusterRef };
+ } {
+ const [clusterRef, setClusterRef] = useState>({} as React.MutableRefObject)
+ return { clusterRef, setClusterRef }
}
-
-
-
export const ClusterRefProvider: React.FunctionComponent<{
children?: React.ReactNode
}> = ({ children }) => (
{children}
-);
+)
-export const useClusterRef = (): any=> {
- const { clusterRef } = useContext(ClusterRefContext);
- return clusterRef;
-};
-
-export const useSetClusterRef = (): UseClusterRefManagerResult["setClusterRef"] => {
- const { setClusterRef } = useContext(ClusterRefContext);
- return setClusterRef;
+export const useClusterRef = (): any => {
+ const { clusterRef } = useContext(ClusterRefContext)
+ return clusterRef
}
+export const useSetClusterRef = (): UseClusterRefManagerResult['setClusterRef'] => {
+ const { setClusterRef } = useContext(ClusterRefContext)
+ return setClusterRef
+}
diff --git a/src/Components/Map/hooks/useDebounce.tsx b/src/Components/Map/hooks/useDebounce.tsx
index 7172ceea..2794ff83 100644
--- a/src/Components/Map/hooks/useDebounce.tsx
+++ b/src/Components/Map/hooks/useDebounce.tsx
@@ -1,10 +1,10 @@
-import { useEffect } from 'react';
-import { useTimeout } from './useTimeout';
+import { useEffect } from 'react'
+import { useTimeout } from './useTimeout'
export const useDebounce = (callback, delay, deps) => {
- const { reset, clear } = useTimeout(callback, delay);
+ const { reset, clear } = useTimeout(callback, delay)
- useEffect(reset, [...deps, reset]);
+ useEffect(reset, [...deps, reset])
// eslint-disable-next-line react-hooks/exhaustive-deps
- useEffect(clear, []);
-}
\ No newline at end of file
+ useEffect(clear, [])
+}
diff --git a/src/Components/Map/hooks/useFilter.tsx b/src/Components/Map/hooks/useFilter.tsx
index 3478eb83..32526c4e 100644
--- a/src/Components/Map/hooks/useFilter.tsx
+++ b/src/Components/Map/hooks/useFilter.tsx
@@ -1,28 +1,28 @@
/* eslint-disable no-case-declarations */
-import { useCallback, useReducer, createContext, useContext } from "react";
-import * as React from "react";
-import { LayerProps, Tag } from "../../../types";
-import { useLayers } from "./useLayers";
-import { useNavigate } from "react-router-dom";
-import useWindowDimensions from "./useWindowDimension";
+import { useCallback, useReducer, createContext, useContext } from 'react'
+import * as React from 'react'
+import { LayerProps, Tag } from '../../../types'
+import { useLayers } from './useLayers'
+import { useNavigate } from 'react-router-dom'
+import useWindowDimensions from './useWindowDimension'
type ActionType =
- | { type: "ADD_TAG"; tag: Tag }
- | { type: "REMOVE_TAG"; name: string }
- | { type: "RESET_TAGS" }
- | { type: "TOGGLE_LAYER"; layer: LayerProps }
- | { type: "ADD_LAYER"; layer: LayerProps }
- | { type: "RESET_LAYERS" }
- | { type: "TOGGLE_GROUP_TYPE"; groupType: string }
- | { type: "ADD_GROUP_TYPE"; groupType: string }
- | { type: "RESET_GROUP_TYPE" }
+ | { type: 'ADD_TAG'; tag: Tag }
+ | { type: 'REMOVE_TAG'; name: string }
+ | { type: 'RESET_TAGS' }
+ | { type: 'TOGGLE_LAYER'; layer: LayerProps }
+ | { type: 'ADD_LAYER'; layer: LayerProps }
+ | { type: 'RESET_LAYERS' }
+ | { type: 'TOGGLE_GROUP_TYPE'; groupType: string }
+ | { type: 'ADD_GROUP_TYPE'; groupType: string }
+ | { type: 'RESET_GROUP_TYPE' }
;
type UseFilterManagerResult = ReturnType;
const FilterContext = createContext({
filterTags: [],
- searchPhrase: "",
+ searchPhrase: '',
visibleLayers: [],
visibleGroupTypes: [],
addFilterTag: () => { },
@@ -37,9 +37,9 @@ const FilterContext = createContext({
addVisibleGroupType: () => { },
toggleVisibleGroupType: () => { },
isGroupTypeVisible: () => true
-});
+})
-function useFilterManager(initialTags: Tag[]): {
+function useFilterManager (initialTags: Tag[]): {
filterTags: Tag[];
searchPhrase: string;
visibleLayers: LayerProps[];
@@ -67,182 +67,173 @@ function useFilterManager(initialTags: Tag[]): {
} {
const [filterTags, dispatchTags] = useReducer((state: Tag[], action: ActionType) => {
switch (action.type) {
- case "ADD_TAG":
+ case 'ADD_TAG':
const exist = state.find((tag) =>
- tag.id === action.tag.id ? true : false
- );
- if (!exist) return [
- ...state,
- action.tag,
- ];
- else return state;
- case "REMOVE_TAG":
- return state.filter(({ name }) => name !== action.name);
- case "RESET_TAGS":
- return initialTags;
+ tag.id === action.tag.id
+ )
+ if (!exist) {
+ return [
+ ...state,
+ action.tag
+ ]
+ } else return state
+ case 'REMOVE_TAG':
+ return state.filter(({ name }) => name !== action.name)
+ case 'RESET_TAGS':
+ return initialTags
default:
- throw new Error();
+ throw new Error()
}
- }, initialTags);
+ }, initialTags)
const initialLayers = useLayers()
const navigate = useNavigate()
- const windowDimensions = useWindowDimensions();
+ const windowDimensions = useWindowDimensions()
const [visibleLayers, dispatchLayers] = useReducer((state: LayerProps[], action: ActionType) => {
switch (action.type) {
- case "ADD_LAYER":
+ case 'ADD_LAYER':
const exist1 = state.find((layer) =>
- layer.name === action.layer.name ? true : false
- );
- if (!exist1) return [
- ...state,
- action.layer,
- ];
- else return state;
- case "TOGGLE_LAYER":
+ layer.name === action.layer.name
+ )
+ if (!exist1) {
+ return [
+ ...state,
+ action.layer
+ ]
+ } else return state
+ case 'TOGGLE_LAYER':
const exist2 = state.some((layer) =>
- layer.name === action.layer.name);
- if(exist2) return state.filter(({name}) => name != action.layer.name);
- else return [... state, action.layer];
- case "RESET_LAYERS":
- return initialLayers;
+ layer.name === action.layer.name)
+ if (exist2) return state.filter(({ name }) => name != action.layer.name)
+ else return [...state, action.layer]
+ case 'RESET_LAYERS':
+ return initialLayers
default:
- throw new Error();
+ throw new Error()
}
- }, initialLayers);
+ }, initialLayers)
const [visibleGroupTypes, dispatchGroupTypes] = useReducer((state: string[], action: ActionType) => {
switch (action.type) {
- case "ADD_GROUP_TYPE":
+ case 'ADD_GROUP_TYPE':
const exist1 = state.find((groupType) =>
- groupType === action.groupType ? true : false
- );
- if (!exist1) return [
- ...state,
- action.groupType,
- ];
- else return state;
- case "TOGGLE_GROUP_TYPE":
+ groupType === action.groupType
+ )
+ if (!exist1) {
+ return [
+ ...state,
+ action.groupType
+ ]
+ } else return state
+ case 'TOGGLE_GROUP_TYPE':
const exist2 = state.some((groupType) =>
- groupType === action.groupType);
- if(exist2) return state.filter((groupType) => groupType != action.groupType);
- else return [... state, action.groupType];
- case "RESET_GROUP_TYPE":
- return [];
+ groupType === action.groupType)
+ if (exist2) return state.filter((groupType) => groupType != action.groupType)
+ else return [...state, action.groupType]
+ case 'RESET_GROUP_TYPE':
+ return []
default:
- throw new Error();
+ throw new Error()
}
- },[]);
+ }, [])
- const [searchPhrase, searchPhraseSet] = React.useState("");
+ const [searchPhrase, searchPhraseSet] = React.useState('')
const addFilterTag = useCallback((tag: Tag) => {
- const params = new URLSearchParams(location.search);
- const urlTags = params.get("tags")
- const decodedTags = urlTags ? decodeURIComponent(urlTags) : "";
-
- if(!decodedTags?.includes(tag.name))
- params.set("tags", `${urlTags ? urlTags : ""}${urlTags? ';' : ''}${tag.name}`)
- if(windowDimensions.width < 786 && location.pathname.split("/").length > 2) navigate("/" + `${params ? `?${params}` : ""}`);
- else navigate(location.pathname + `${params ? `?${params}` : ""}`);
-
+ const params = new URLSearchParams(location.search)
+ const urlTags = params.get('tags')
+ const decodedTags = urlTags ? decodeURIComponent(urlTags) : ''
-
+ if (!decodedTags?.includes(tag.name)) { params.set('tags', `${urlTags || ''}${urlTags ? ';' : ''}${tag.name}`) }
+ if (windowDimensions.width < 786 && location.pathname.split('/').length > 2) navigate('/' + `${params ? `?${params}` : ''}`)
+ else navigate(location.pathname + `${params ? `?${params}` : ''}`)
dispatchTags({
- type: "ADD_TAG",
- tag,
- });
+ type: 'ADD_TAG',
+ tag
+ })
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
+ }, [])
const removeFilterTag = useCallback((name: string) => {
-
- const params = new URLSearchParams(window.location.search);
- const urlTags = params.get("tags");
- let newUrlTags = "";
- const tags = urlTags?.split(";");
- if(tags?.length==0 && urlTags?.length && urlTags?.length > 0) tags[0]=urlTags;
- tags?.map(urlTag => {
- if(!(urlTag.toLocaleLowerCase() === name.toLocaleLowerCase()))
- newUrlTags = newUrlTags + `${newUrlTags===""? urlTag : `;${urlTag}`}`
- });
- if(newUrlTags !== "") {
- params.set("tags", `${newUrlTags}`)
- navigate(location.pathname + `${params ? `?${params}` : ""}`);
- }
- else {
- params.delete("tags");
- navigate(location.pathname + `${params ? `?${params}` : ""}`);
+ const params = new URLSearchParams(window.location.search)
+ const urlTags = params.get('tags')
+ let newUrlTags = ''
+ const tags = urlTags?.split(';')
+ if (tags?.length == 0 && urlTags?.length && urlTags?.length > 0) tags[0] = urlTags
+ tags?.map(urlTag => {
+ if (!(urlTag.toLocaleLowerCase() === name.toLocaleLowerCase())) { newUrlTags = newUrlTags + `${newUrlTags === '' ? urlTag : `;${urlTag}`}` }
+ })
+ if (newUrlTags !== '') {
+ params.set('tags', `${newUrlTags}`)
+ navigate(location.pathname + `${params ? `?${params}` : ''}`)
+ } else {
+ params.delete('tags')
+ navigate(location.pathname + `${params ? `?${params}` : ''}`)
}
dispatchTags({
- type: "REMOVE_TAG",
- name,
- });
+ type: 'REMOVE_TAG',
+ name
+ })
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
+ }, [])
const resetFilterTags = useCallback(() => {
dispatchTags({
- type: "RESET_TAGS",
- });
- }, []);
+ type: 'RESET_TAGS'
+ })
+ }, [])
const addVisibleLayer = (layer: LayerProps) => {
dispatchLayers({
- type: "ADD_LAYER",
- layer,
- });
-
- };
+ type: 'ADD_LAYER',
+ layer
+ })
+ }
const toggleVisibleLayer = (layer: LayerProps) => {
dispatchLayers({
- type: "TOGGLE_LAYER",
- layer,
- });
-
- };
-
+ type: 'TOGGLE_LAYER',
+ layer
+ })
+ }
const resetVisibleLayers = useCallback(() => {
dispatchLayers({
- type: "RESET_LAYERS",
- });
- }, []);
+ type: 'RESET_LAYERS'
+ })
+ }, [])
const isLayerVisible = useCallback((layer: LayerProps) => {
return visibleLayers.some(l => l.name === layer.name)
- }, [visibleLayers]);
+ }, [visibleLayers])
const addVisibleGroupType = (groupType: string) => {
dispatchGroupTypes({
- type: "ADD_GROUP_TYPE",
- groupType,
- });
-
- };
+ type: 'ADD_GROUP_TYPE',
+ groupType
+ })
+ }
const toggleVisibleGroupType = (groupType: string) => {
dispatchGroupTypes({
- type: "TOGGLE_GROUP_TYPE",
- groupType,
- });
-
- };
+ type: 'TOGGLE_GROUP_TYPE',
+ groupType
+ })
+ }
const isGroupTypeVisible = useCallback((groupType: string) => {
return visibleGroupTypes.some(gt => gt === groupType)
- }, [visibleGroupTypes]);
+ }, [visibleGroupTypes])
const setSearchPhrase = useCallback((phrase: string) => {
searchPhraseSet(phrase)
- }, []);
+ }, [])
- return { filterTags, addFilterTag, removeFilterTag, resetFilterTags, setSearchPhrase, searchPhrase, visibleLayers, toggleVisibleLayer, resetVisibleLayers, isLayerVisible, addVisibleLayer, visibleGroupTypes, addVisibleGroupType, toggleVisibleGroupType, isGroupTypeVisible };
+ return { filterTags, addFilterTag, removeFilterTag, resetFilterTags, setSearchPhrase, searchPhrase, visibleLayers, toggleVisibleLayer, resetVisibleLayers, isLayerVisible, addVisibleLayer, visibleGroupTypes, addVisibleGroupType, toggleVisibleGroupType, isGroupTypeVisible }
}
export const FilterProvider: React.FunctionComponent<{
@@ -251,82 +242,79 @@ export const FilterProvider: React.FunctionComponent<{
{children}
-);
+)
export const useFilterTags = (): Tag[] => {
- const { filterTags } = useContext(FilterContext);
- return filterTags;
-};
+ const { filterTags } = useContext(FilterContext)
+ return filterTags
+}
-export const useAddFilterTag = (): UseFilterManagerResult["addFilterTag"] => {
- const { addFilterTag } = useContext(FilterContext);
- return addFilterTag;
-};
+export const useAddFilterTag = (): UseFilterManagerResult['addFilterTag'] => {
+ const { addFilterTag } = useContext(FilterContext)
+ return addFilterTag
+}
-export const useRemoveFilterTag = (): UseFilterManagerResult["removeFilterTag"] => {
- const { removeFilterTag } = useContext(FilterContext);
- return removeFilterTag;
-};
+export const useRemoveFilterTag = (): UseFilterManagerResult['removeFilterTag'] => {
+ const { removeFilterTag } = useContext(FilterContext)
+ return removeFilterTag
+}
-export const useResetFilterTags = (): UseFilterManagerResult["resetFilterTags"] => {
- const { resetFilterTags } = useContext(FilterContext);
- return resetFilterTags;
-};
+export const useResetFilterTags = (): UseFilterManagerResult['resetFilterTags'] => {
+ const { resetFilterTags } = useContext(FilterContext)
+ return resetFilterTags
+}
-export const useSearchPhrase = (): UseFilterManagerResult["searchPhrase"] => {
- const { searchPhrase } = useContext(FilterContext);
- return searchPhrase;
-};
+export const useSearchPhrase = (): UseFilterManagerResult['searchPhrase'] => {
+ const { searchPhrase } = useContext(FilterContext)
+ return searchPhrase
+}
-export const useSetSearchPhrase = (): UseFilterManagerResult["setSearchPhrase"] => {
- const { setSearchPhrase } = useContext(FilterContext);
- return setSearchPhrase;
-};
+export const useSetSearchPhrase = (): UseFilterManagerResult['setSearchPhrase'] => {
+ const { setSearchPhrase } = useContext(FilterContext)
+ return setSearchPhrase
+}
-export const useVisibleLayer = (): UseFilterManagerResult["visibleLayers"] => {
- const { visibleLayers } = useContext(FilterContext);
- return visibleLayers;
-};
+export const useVisibleLayer = (): UseFilterManagerResult['visibleLayers'] => {
+ const { visibleLayers } = useContext(FilterContext)
+ return visibleLayers
+}
-export const useAddVisibleLayer = (): UseFilterManagerResult["addVisibleLayer"] => {
- const { addVisibleLayer } = useContext(FilterContext);
- return addVisibleLayer;
-};
+export const useAddVisibleLayer = (): UseFilterManagerResult['addVisibleLayer'] => {
+ const { addVisibleLayer } = useContext(FilterContext)
+ return addVisibleLayer
+}
+export const useToggleVisibleLayer = (): UseFilterManagerResult['toggleVisibleLayer'] => {
+ const { toggleVisibleLayer } = useContext(FilterContext)
+ return toggleVisibleLayer
+}
-export const useToggleVisibleLayer = (): UseFilterManagerResult["toggleVisibleLayer"] => {
- const { toggleVisibleLayer } = useContext(FilterContext);
- return toggleVisibleLayer;
-};
+export const useResetVisibleLayers = (): UseFilterManagerResult['resetVisibleLayers'] => {
+ const { resetVisibleLayers } = useContext(FilterContext)
+ return resetVisibleLayers
+}
-export const useResetVisibleLayers = (): UseFilterManagerResult["resetVisibleLayers"] => {
- const { resetVisibleLayers } = useContext(FilterContext);
- return resetVisibleLayers;
-};
+export const useIsLayerVisible = (): UseFilterManagerResult['isLayerVisible'] => {
+ const { isLayerVisible } = useContext(FilterContext)
+ return isLayerVisible
+}
-export const useIsLayerVisible = (): UseFilterManagerResult["isLayerVisible"] => {
- const { isLayerVisible } = useContext(FilterContext);
- return isLayerVisible;
-};
+export const useAddVisibleGroupType = (): UseFilterManagerResult['addVisibleGroupType'] => {
+ const { addVisibleGroupType } = useContext(FilterContext)
+ return addVisibleGroupType
+}
-export const useAddVisibleGroupType = (): UseFilterManagerResult["addVisibleGroupType"] => {
- const { addVisibleGroupType } = useContext(FilterContext);
- return addVisibleGroupType;
-};
+export const useToggleVisibleGroupType = (): UseFilterManagerResult['toggleVisibleGroupType'] => {
+ const { toggleVisibleGroupType } = useContext(FilterContext)
+ return toggleVisibleGroupType
+}
-
-export const useToggleVisibleGroupType = (): UseFilterManagerResult["toggleVisibleGroupType"] => {
- const { toggleVisibleGroupType } = useContext(FilterContext);
- return toggleVisibleGroupType;
-};
-
-
-export const useIsGroupTypeVisible = (): UseFilterManagerResult["isGroupTypeVisible"] => {
- const { isGroupTypeVisible } = useContext(FilterContext);
+export const useIsGroupTypeVisible = (): UseFilterManagerResult['isGroupTypeVisible'] => {
+ const { isGroupTypeVisible } = useContext(FilterContext)
return isGroupTypeVisible
-};
+}
-export const useVisibleGroupType = (): UseFilterManagerResult["visibleGroupTypes"] => {
- const { visibleGroupTypes } = useContext(FilterContext);
- return visibleGroupTypes;
-};
\ No newline at end of file
+export const useVisibleGroupType = (): UseFilterManagerResult['visibleGroupTypes'] => {
+ const { visibleGroupTypes } = useContext(FilterContext)
+ return visibleGroupTypes
+}
diff --git a/src/Components/Map/hooks/useItems.tsx b/src/Components/Map/hooks/useItems.tsx
index 51861347..835d1caf 100644
--- a/src/Components/Map/hooks/useItems.tsx
+++ b/src/Components/Map/hooks/useItems.tsx
@@ -1,18 +1,16 @@
-import { useCallback, useReducer, createContext, useContext, useState } from "react";
-import * as React from "react";
-import { Item, LayerProps } from "../../../types";
-import { toast } from "react-toastify";
-import { useAddLayer } from "./useLayers";
-
+import { useCallback, useReducer, createContext, useContext, useState } from 'react'
+import * as React from 'react'
+import { Item, LayerProps } from '../../../types'
+import { toast } from 'react-toastify'
+import { useAddLayer } from './useLayers'
type ActionType =
- | { type: "ADD"; item: Item }
- | { type: "UPDATE"; item: Item }
- | { type: "REMOVE"; item: Item }
- | { type: "RESET"; layer: LayerProps }
+ | { type: 'ADD'; item: Item }
+ | { type: 'UPDATE'; item: Item }
+ | { type: 'REMOVE'; item: Item }
+ | { type: 'RESET'; layer: LayerProps }
;
-
type UseItemManagerResult = ReturnType;
const ItemContext = createContext({
@@ -24,9 +22,9 @@ const ItemContext = createContext({
setItemsApi: () => { },
setItemsData: () => { },
allItemsLoaded: false
-});
+})
-function useItemsManager(initialItems: Item[]): {
+function useItemsManager (initialItems: Item[]): {
items: Item[];
// eslint-disable-next-line no-unused-vars
addItem: (item: Item) => void;
@@ -43,106 +41,100 @@ function useItemsManager(initialItems: Item[]): {
allItemsLoaded: boolean;
} {
+ const addLayer = useAddLayer()
- const addLayer = useAddLayer();
-
- const [allItemsLoaded, setallItemsLoaded] = useState(false);
-
-
+ const [allItemsLoaded, setallItemsLoaded] = useState(false)
const [items, dispatch] = useReducer((state: Item[], action: ActionType) => {
switch (action.type) {
- case "ADD":
+ case 'ADD':
// eslint-disable-next-line no-case-declarations
const exist = state.find((item) =>
- item.id === action.item.id ? true : false
- );
- if (!exist) return [
- ...state,
- action.item,
- ];
- else return state;
- case "UPDATE":
+ item.id === action.item.id
+ )
+ if (!exist) {
+ return [
+ ...state,
+ action.item
+ ]
+ } else return state
+ case 'UPDATE':
return state.map((item) => {
if (item.id === action.item.id) {
return action.item
}
return item
- });
- case "REMOVE":
- return state.filter(item => item !== action.item);
- case "RESET":
- return state.filter(item => item.layer?.name !== action.layer.name);
+ })
+ case 'REMOVE':
+ return state.filter(item => item !== action.item)
+ case 'RESET':
+ return state.filter(item => item.layer?.name !== action.layer.name)
default:
- throw new Error();
+ throw new Error()
}
- }, initialItems);
-
+ }, initialItems)
const setItemsApi = useCallback(async (layer: LayerProps) => {
- addLayer(layer);
+ addLayer(layer)
const result = await toast.promise(
layer.api!.getItems(),
{
pending: `loading ${layer.name} ...`,
success: `${layer.name} loaded`,
error: {
- render( {data} ) {
+ render ({ data }) {
return `${data}`
- },
- },
+ }
+ }
}
- );
- if (result) {
- result.map(item => {
- dispatch({ type: "ADD", item: { ...item, layer: layer } });
+ )
+ if (result) {
+ result.map(item => {
+ dispatch({ type: 'ADD', item: { ...item, layer } })
})
- setallItemsLoaded(true);
+ setallItemsLoaded(true)
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
const setItemsData = useCallback((layer: LayerProps) => {
- addLayer(layer);
+ addLayer(layer)
layer.data?.map(item => {
- dispatch({ type: "ADD", item: { ...item, layer: layer } });
+ dispatch({ type: 'ADD', item: { ...item, layer } })
})
- setallItemsLoaded(true);
+ setallItemsLoaded(true)
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
+ }, [])
-
- const addItem = useCallback(async (item: Item) => {
+ const addItem = useCallback(async (item: Item) => {
dispatch({
- type: "ADD",
- item,
- });
- }, []);
+ type: 'ADD',
+ item
+ })
+ }, [])
const updateItem = useCallback(async (item: Item) => {
dispatch({
- type: "UPDATE",
- item,
- });
- }, []);
+ type: 'UPDATE',
+ item
+ })
+ }, [])
const removeItem = useCallback((item: Item) => {
dispatch({
- type: "REMOVE",
- item,
- });
- }, []);
+ type: 'REMOVE',
+ item
+ })
+ }, [])
const resetItems = useCallback((layer: LayerProps) => {
dispatch({
- type: "RESET",
+ type: 'RESET',
layer
- });
- }, []);
+ })
+ }, [])
-
-
- return { items, updateItem, addItem, removeItem, resetItems, setItemsApi, setItemsData, allItemsLoaded };
+ return { items, updateItem, addItem, removeItem, resetItems, setItemsApi, setItemsData, allItemsLoaded }
}
export const ItemsProvider: React.FunctionComponent<{
@@ -151,44 +143,44 @@ export const ItemsProvider: React.FunctionComponent<{
{children}
-);
+)
export const useItems = (): Item[] => {
- const { items } = useContext(ItemContext);
- return items;
-};
+ const { items } = useContext(ItemContext)
+ return items
+}
-export const useAddItem = (): UseItemManagerResult["addItem"] => {
- const { addItem } = useContext(ItemContext);
- return addItem;
-};
+export const useAddItem = (): UseItemManagerResult['addItem'] => {
+ const { addItem } = useContext(ItemContext)
+ return addItem
+}
-export const useUpdateItem = (): UseItemManagerResult["updateItem"] => {
- const { updateItem } = useContext(ItemContext);
- return updateItem;
-};
+export const useUpdateItem = (): UseItemManagerResult['updateItem'] => {
+ const { updateItem } = useContext(ItemContext)
+ return updateItem
+}
-export const useRemoveItem = (): UseItemManagerResult["removeItem"] => {
- const { removeItem } = useContext(ItemContext);
- return removeItem;
-};
+export const useRemoveItem = (): UseItemManagerResult['removeItem'] => {
+ const { removeItem } = useContext(ItemContext)
+ return removeItem
+}
-export const useResetItems = (): UseItemManagerResult["resetItems"] => {
- const { resetItems } = useContext(ItemContext);
- return resetItems;
-};
+export const useResetItems = (): UseItemManagerResult['resetItems'] => {
+ const { resetItems } = useContext(ItemContext)
+ return resetItems
+}
-export const useSetItemsApi = (): UseItemManagerResult["setItemsApi"] => {
- const { setItemsApi } = useContext(ItemContext);
- return setItemsApi;
-};
+export const useSetItemsApi = (): UseItemManagerResult['setItemsApi'] => {
+ const { setItemsApi } = useContext(ItemContext)
+ return setItemsApi
+}
-export const useSetItemsData = (): UseItemManagerResult["setItemsData"] => {
- const { setItemsData } = useContext(ItemContext);
- return setItemsData;
-};
+export const useSetItemsData = (): UseItemManagerResult['setItemsData'] => {
+ const { setItemsData } = useContext(ItemContext)
+ return setItemsData
+}
-export const useAllItemsLoaded = (): UseItemManagerResult["allItemsLoaded"] => {
- const { allItemsLoaded } = useContext(ItemContext);
- return allItemsLoaded;
-}
\ No newline at end of file
+export const useAllItemsLoaded = (): UseItemManagerResult['allItemsLoaded'] => {
+ const { allItemsLoaded } = useContext(ItemContext)
+ return allItemsLoaded
+}
diff --git a/src/Components/Map/hooks/useLayers.tsx b/src/Components/Map/hooks/useLayers.tsx
index 634fbdc7..cafc0f7e 100644
--- a/src/Components/Map/hooks/useLayers.tsx
+++ b/src/Components/Map/hooks/useLayers.tsx
@@ -1,47 +1,48 @@
-import { useCallback, useReducer, createContext, useContext } from "react";
-import * as React from "react";
-import { LayerProps } from "../../../types";
+import { useCallback, useReducer, createContext, useContext } from 'react'
+import * as React from 'react'
+import { LayerProps } from '../../../types'
type ActionType =
- | { type: "ADD LAYER"; layer: LayerProps }
+ | { type: 'ADD LAYER'; layer: LayerProps }
type UseItemManagerResult = ReturnType;
const LayerContext = createContext({
layers: [],
- addLayer: () => { },
-});
+ addLayer: () => { }
+})
-function useLayerManager(initialLayers: LayerProps[]): {
+function useLayerManager (initialLayers: LayerProps[]): {
layers: LayerProps[];
// eslint-disable-next-line no-unused-vars
addLayer: (layer: LayerProps) => void;
} {
const [layers, dispatch] = useReducer((state: LayerProps[], action: ActionType) => {
switch (action.type) {
- case "ADD LAYER":
+ case 'ADD LAYER':
// eslint-disable-next-line no-case-declarations
const exist = state.find((layer) =>
- layer.name === action.layer.name ? true : false
- );
- if (!exist) return [
- ...state,
- action.layer,
- ];
- else return state;
+ layer.name === action.layer.name
+ )
+ if (!exist) {
+ return [
+ ...state,
+ action.layer
+ ]
+ } else return state
default:
- throw new Error();
+ throw new Error()
}
- }, initialLayers);
+ }, initialLayers)
const addLayer = useCallback((layer: LayerProps) => {
dispatch({
- type: "ADD LAYER",
+ type: 'ADD LAYER',
layer
- });
- }, []);
+ })
+ }, [])
- return { layers, addLayer };
+ return { layers, addLayer }
}
export const LayersProvider: React.FunctionComponent<{
@@ -50,14 +51,14 @@ export const LayersProvider: React.FunctionComponent<{
{children}
-);
+)
export const useLayers = (): LayerProps[] => {
- const { layers } = useContext(LayerContext);
- return layers;
-};
+ const { layers } = useContext(LayerContext)
+ return layers
+}
-export const useAddLayer = (): UseItemManagerResult["addLayer"] => {
- const { addLayer } = useContext(LayerContext);
- return addLayer;
-};
+export const useAddLayer = (): UseItemManagerResult['addLayer'] => {
+ const { addLayer } = useContext(LayerContext)
+ return addLayer
+}
diff --git a/src/Components/Map/hooks/useLeafletRefs.tsx b/src/Components/Map/hooks/useLeafletRefs.tsx
index 83b511a2..b04f952f 100644
--- a/src/Components/Map/hooks/useLeafletRefs.tsx
+++ b/src/Components/Map/hooks/useLeafletRefs.tsx
@@ -1,75 +1,68 @@
-import { useCallback, useReducer, createContext, useContext } from "react";
-import * as React from "react";
-import { Item } from "../../../types";
-import { Marker, Popup } from "leaflet";
+import { useCallback, useReducer, createContext, useContext } from 'react'
+import * as React from 'react'
+import { Item } from '../../../types'
+import { Marker, Popup } from 'leaflet'
-type LeafletRef = {
+type LeafletRef = {
item: Item,
marker: Marker,
popup: Popup
}
type ActionType =
- | { type: "ADD_MARKER"; item: Item, marker: Marker }
- | { type: "ADD_POPUP"; item: Item, popup: Popup }
+ | { type: 'ADD_MARKER'; item: Item, marker: Marker }
+ | { type: 'ADD_POPUP'; item: Item, popup: Popup }
;
-
type UseLeafletRefsManagerResult = ReturnType;
const LeafletRefsContext = createContext({
leafletRefs: {},
addMarker: () => { },
- addPopup: () => { },
-});
+ addPopup: () => { }
+})
-function useLeafletRefsManager(initialLeafletRefs: {}): {
- leafletRefs: Record;
+function useLeafletRefsManager (initialLeafletRefs: {}): {
+ leafletRefs: Record;
// eslint-disable-next-line no-unused-vars
addMarker: (item: Item, marker: Marker) => void;
// eslint-disable-next-line no-unused-vars
addPopup: (item: Item, popup: Popup) => void;
} {
-
-
-
- const [leafletRefs, dispatch] = useReducer((state: Record, action: ActionType) => {
+ const [leafletRefs, dispatch] = useReducer((state: Record, action: ActionType) => {
switch (action.type) {
- case "ADD_MARKER":
+ case 'ADD_MARKER':
return {
...state,
- [action.item.id]: { ...state[action.item.id], marker: action.marker, item: action.item }}
- case "ADD_POPUP":
+ [action.item.id]: { ...state[action.item.id], marker: action.marker, item: action.item }
+ }
+ case 'ADD_POPUP':
return {
...state,
- [action.item.id]: { ...state[action.item.id], popup: action.popup, item: action.item }}
+ [action.item.id]: { ...state[action.item.id], popup: action.popup, item: action.item }
+ }
default:
- throw new Error();
+ throw new Error()
}
- }, initialLeafletRefs);
-
-
-
+ }, initialLeafletRefs)
const addMarker = useCallback((item: Item, marker: Marker) => {
dispatch({
- type: "ADD_MARKER",
+ type: 'ADD_MARKER',
item,
marker
- });
- }, []);
+ })
+ }, [])
const addPopup = useCallback((item: Item, popup: Popup) => {
dispatch({
- type: "ADD_POPUP",
+ type: 'ADD_POPUP',
item,
popup
- });
- }, []);
+ })
+ }, [])
-
-
- return { leafletRefs, addMarker, addPopup };
+ return { leafletRefs, addMarker, addPopup }
}
export const LeafletRefsProvider: React.FunctionComponent<{
@@ -78,20 +71,19 @@ export const LeafletRefsProvider: React.FunctionComponent<{
{children}
-);
+)
-export const useLeafletRefs = (): Record => {
- const { leafletRefs } = useContext(LeafletRefsContext);
- return leafletRefs;
-};
+export const useLeafletRefs = (): Record => {
+ const { leafletRefs } = useContext(LeafletRefsContext)
+ return leafletRefs
+}
-export const useAddMarker = (): UseLeafletRefsManagerResult["addMarker"] => {
- const { addMarker } = useContext(LeafletRefsContext);
- return addMarker;
-};
-
-export const useAddPopup = (): UseLeafletRefsManagerResult["addPopup"] => {
- const { addPopup } = useContext(LeafletRefsContext);
- return addPopup;
-};
+export const useAddMarker = (): UseLeafletRefsManagerResult['addMarker'] => {
+ const { addMarker } = useContext(LeafletRefsContext)
+ return addMarker
+}
+export const useAddPopup = (): UseLeafletRefsManagerResult['addPopup'] => {
+ const { addPopup } = useContext(LeafletRefsContext)
+ return addPopup
+}
diff --git a/src/Components/Map/hooks/usePermissions.tsx b/src/Components/Map/hooks/usePermissions.tsx
index cb11a81f..4635650a 100644
--- a/src/Components/Map/hooks/usePermissions.tsx
+++ b/src/Components/Map/hooks/usePermissions.tsx
@@ -1,11 +1,11 @@
-import { useCallback, useReducer, createContext, useContext } from "react";
-import * as React from "react";
-import { Item, ItemsApi, LayerProps, Permission, PermissionAction } from "../../../types";
-import { useAuth } from "../../Auth";
+import { useCallback, useReducer, createContext, useContext } from 'react'
+import * as React from 'react'
+import { Item, ItemsApi, LayerProps, Permission, PermissionAction } from '../../../types'
+import { useAuth } from '../../Auth'
type ActionType =
- | { type: "ADD"; permission: Permission }
- | { type: "REMOVE"; id: string };
+ | { type: 'ADD'; permission: Permission }
+ | { type: 'REMOVE'; id: string };
type UsePermissionManagerResult = ReturnType;
@@ -15,9 +15,9 @@ const PermissionContext = createContext({
setPermissionData: () => { },
setAdminRole: () => { },
hasUserPermission: () => true
-});
+})
-function usePermissionsManager(initialPermissions: Permission[]): {
+function usePermissionsManager (initialPermissions: Permission[]): {
permissions: Permission[];
// eslint-disable-next-line no-unused-vars
setPermissionApi: (api: ItemsApi) => void;
@@ -30,74 +30,74 @@ function usePermissionsManager(initialPermissions: Permission[]): {
} {
const [permissions, dispatch] = useReducer((state: Permission[], action: ActionType) => {
switch (action.type) {
- case "ADD":
+ case 'ADD':
// eslint-disable-next-line no-case-declarations
const exist = state.find((permission) =>
- permission.id === action.permission.id ? true : false
- );
- if (!exist) return [
- ...state,
- action.permission,
- ];
- else return state;
+ permission.id === action.permission.id
+ )
+ if (!exist) {
+ return [
+ ...state,
+ action.permission
+ ]
+ } else return state
- case "REMOVE":
- return state.filter(({ id }) => id !== action.id);
+ case 'REMOVE':
+ return state.filter(({ id }) => id !== action.id)
default:
- throw new Error();
+ throw new Error()
}
- }, initialPermissions);
+ }, initialPermissions)
- const [adminRole, setAdminRole] = React.useState(null);
- const { user } = useAuth();
+ const [adminRole, setAdminRole] = React.useState(null)
+ const { user } = useAuth()
-
- const setPermissionApi = useCallback(async (api: ItemsApi) => {
- const result = await api.getItems();
+ const setPermissionApi = useCallback(async (api: ItemsApi) => {
+ const result = await api.getItems()
if (result) {
result.map(permission => {
- dispatch({ type: "ADD", permission })
+ dispatch({ type: 'ADD', permission })
})
}
}, [])
const setPermissionData = useCallback((data: Permission[]) => {
data.map(permission => {
- dispatch({ type: "ADD", permission })
+ dispatch({ type: 'ADD', permission })
})
- }, []);
+ }, [])
const hasUserPermission = useCallback(
(
- collectionName: string,
- action: PermissionAction,
- item?: Item,
+ collectionName: string,
+ action: PermissionAction,
+ item?: Item,
layer?: LayerProps
) => {
const evaluateCondition = (condition: any) => {
- if (condition.user_created?._eq === "$CURRENT_USER") {
- return item?.user_created?.id === user?.id;
+ if (condition.user_created?._eq === '$CURRENT_USER') {
+ return item?.user_created?.id === user?.id
}
if (condition.public_edit?._eq === true) {
- return item?.public_edit === true;
+ return item?.public_edit === true
}
- return false;
- };
-
+ return false
+ }
+
const evaluatePermissions = (permissionConditions: any) => {
if (!permissionConditions || !permissionConditions._and) {
- return true;
+ return true
}
-
- return permissionConditions._and.every((andCondition: any) =>
- andCondition._or
+
+ return permissionConditions._and.every((andCondition: any) =>
+ andCondition._or
? andCondition._or.some((orCondition: any) => evaluateCondition(orCondition))
: evaluateCondition(andCondition)
- );
- };
-
- if (permissions.length === 0) return true;
- else if (user && user.role === adminRole) return true;
+ )
+ }
+
+ if (permissions.length === 0) return true
+ else if (user && user.role === adminRole) return true
else {
return permissions.some(p =>
p.action === action &&
@@ -113,17 +113,14 @@ function usePermissionsManager(initialPermissions: Permission[]): {
(!item || evaluatePermissions(p.permissions))
))
)
- );
+ )
}
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[permissions, user]
- );
-
+ )
-
-
- return { permissions, setPermissionApi, setPermissionData, setAdminRole, hasUserPermission };
+ return { permissions, setPermissionApi, setPermissionData, setAdminRole, hasUserPermission }
}
export const PermissionsProvider: React.FunctionComponent<{
@@ -132,30 +129,29 @@ export const PermissionsProvider: React.FunctionComponent<{
{children}
-);
+)
export const usePermissions = (): Permission[] => {
- const { permissions } = useContext(PermissionContext);
- return permissions;
-};
-
-
-export const useSetPermissionApi = (): UsePermissionManagerResult["setPermissionApi"] => {
- const { setPermissionApi } = useContext(PermissionContext);
- return setPermissionApi;
+ const { permissions } = useContext(PermissionContext)
+ return permissions
}
-export const useSetPermissionData = (): UsePermissionManagerResult["setPermissionData"] => {
- const { setPermissionData } = useContext(PermissionContext);
- return setPermissionData;
+export const useSetPermissionApi = (): UsePermissionManagerResult['setPermissionApi'] => {
+ const { setPermissionApi } = useContext(PermissionContext)
+ return setPermissionApi
}
-export const useHasUserPermission = (): UsePermissionManagerResult["hasUserPermission"] => {
- const { hasUserPermission } = useContext(PermissionContext);
- return hasUserPermission;
+export const useSetPermissionData = (): UsePermissionManagerResult['setPermissionData'] => {
+ const { setPermissionData } = useContext(PermissionContext)
+ return setPermissionData
}
-export const useSetAdminRole = (): UsePermissionManagerResult["setAdminRole"] => {
- const { setAdminRole } = useContext(PermissionContext);
- return setAdminRole;
-}
\ No newline at end of file
+export const useHasUserPermission = (): UsePermissionManagerResult['hasUserPermission'] => {
+ const { hasUserPermission } = useContext(PermissionContext)
+ return hasUserPermission
+}
+
+export const useSetAdminRole = (): UsePermissionManagerResult['setAdminRole'] => {
+ const { setAdminRole } = useContext(PermissionContext)
+ return setAdminRole
+}
diff --git a/src/Components/Map/hooks/useSelectPosition.tsx b/src/Components/Map/hooks/useSelectPosition.tsx
index 45cfb0af..5f1031da 100644
--- a/src/Components/Map/hooks/useSelectPosition.tsx
+++ b/src/Components/Map/hooks/useSelectPosition.tsx
@@ -1,11 +1,11 @@
import * as React from 'react'
-import { createContext, useContext, useEffect, useState } from "react";
-import { Geometry, Item, LayerProps } from '../../../types';
-import { useUpdateItem } from "./useItems";
-import { toast } from "react-toastify";
-import { useHasUserPermission } from "./usePermissions";
-import { LatLng } from "leaflet";
-import { ItemFormPopupProps } from "../Subcomponents/ItemFormPopup";
+import { createContext, useContext, useEffect, useState } from 'react'
+import { Geometry, Item, LayerProps } from '../../../types'
+import { useUpdateItem } from './useItems'
+import { toast } from 'react-toastify'
+import { useHasUserPermission } from './usePermissions'
+import { LatLng } from 'leaflet'
+import { ItemFormPopupProps } from '../Subcomponents/ItemFormPopup'
type PolygonClickedProps = {
position: LatLng
@@ -15,111 +15,106 @@ type PolygonClickedProps = {
type UseSelectPositionManagerResult = ReturnType;
const SelectPositionContext = createContext({
- selectPosition: null,
- setSelectPosition: () => { },
- setMarkerClicked: () => { },
- setMapClicked: () => {},
-});
+ selectPosition: null,
+ setSelectPosition: () => { },
+ setMarkerClicked: () => { },
+ setMapClicked: () => {}
+})
-function useSelectPositionManager(): {
+function useSelectPositionManager (): {
selectPosition: Item | LayerProps | null;
setSelectPosition: React.Dispatch>;
setMarkerClicked: React.Dispatch>;
setMapClicked: React.Dispatch>;
-} {
- const [selectPosition, setSelectPosition] = useState(null);
- const [markerClicked, setMarkerClicked] = useState
+
setClusterRef(r)} showCoverageOnHover chunkedLoading maxClusterRadius={50} removeOutsideVisibleBounds={false}>
{
React.Children.toArray(children).map((child) =>
- React.isValidElement<{ setItemFormPopup: React.Dispatch>, itemFormPopup: ItemFormPopupProps | null, clusterRef: React.MutableRefObject }>(child)
- ? React.cloneElement(child, { setItemFormPopup: setItemFormPopup, itemFormPopup: itemFormPopup, clusterRef: clusterRef })
- : child
+ React.isValidElement<{ setItemFormPopup: React.Dispatch>, itemFormPopup: ItemFormPopupProps | null, clusterRef: React.MutableRefObject }>(child)
+ ? React.cloneElement(child, { setItemFormPopup, itemFormPopup, clusterRef })
+ : child
)
}
@@ -131,12 +128,12 @@ export function UtopiaMapInner({
data={geo}
onEachFeature={onEachFeature}
eventHandlers={{
- click: (e) => {
- if (selectNewItemPosition) {
- e.layer!.closePopup();
- setMapClicked({ position: e.latlng, setItemFormPopup: setItemFormPopup });
- }
- },
+ click: (e) => {
+ if (selectNewItemPosition) {
+ e.layer!.closePopup()
+ setMapClicked({ position: e.latlng, setItemFormPopup })
+ }
+ }
}}
/>
)}
@@ -145,5 +142,5 @@ export function UtopiaMapInner({
- );
+ )
}
diff --git a/src/Components/Map/hooks/useClusterRef.tsx b/src/Components/Map/hooks/useClusterRef.tsx
index a623748f..1c120c13 100644
--- a/src/Components/Map/hooks/useClusterRef.tsx
+++ b/src/Components/Map/hooks/useClusterRef.tsx
@@ -1,41 +1,36 @@
import * as React from 'react'
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useState } from 'react'
type UseClusterRefManagerResult = ReturnType