seperated types, eslint rule for importing types

- Separated types and moved them into the proper ./types folder defined
in the tsconfig.json.
- Defined a new folder alias `#types`.
- New eslint rule to enforce `import type` when a type is imported.
- Removed Geometry Class and used manual Point types from `geojson`

.eslintrc.js

@@ -79,7 +79,7 @@ module.exports = {
     'import/no-relative-parent-imports': [
       'error',
       {
-        ignore: ['#[src,root,components,utils]/*'],
+        ignore: ['#[src,types,root,components,utils]/*'],
       },
     ],
     'import/no-self-import': 'error',
@@ -156,6 +156,7 @@ module.exports = {
         'plugin:@typescript-eslint/strict',
       ],
       rules: {
+        '@typescript-eslint/consistent-type-imports': 'error',
         // allow explicitly defined dangling promises
         '@typescript-eslint/no-floating-promises': ['error', { ignoreVoid: true }],
         'no-void': ['error', { allowAsStatement: true }],

package.json

@@ -79,6 +79,7 @@
     "#components/*": "./src/Components/*",
     "#utils/*": "./src/Utils/*",
     "#src/*": "./src/*",
+    "#types/*": "./types/*",
     "#root/*": "./*"
   }
 }

src/Components/AppShell/AppShell.tsx

@@ -1,9 +1,9 @@
-import { AssetsApi } from '#src/types'
-
 import { ContextWrapper } from './ContextWrapper'
 import NavBar from './NavBar'
 import { SetAppState } from './SetAppState'
 
+import type { AssetsApi } from '#types/AssetsApi'
+
 export function AppShell({
   appName,
   children,

src/Components/AppShell/NavBar.tsx

@@ -16,7 +16,8 @@ import { toast } from 'react-toastify'
 
 import { useAuth } from '#components/Auth'
 import { useItems } from '#components/Map/hooks/useItems'
-import { Item } from '#src/types'
+
+import type { Item } from '#types/Item'
 
 export default function NavBar({ appName, userType }: { appName: string; userType: string }) {
   const { isAuthenticated, user, logout } = useAuth()

src/Components/AppShell/SetAppState.tsx

@@ -1,9 +1,9 @@
 import { useEffect } from 'react'
 
-import { AssetsApi } from '#src/types'
-
 import { useSetAppState } from './hooks/useAppState'
 
+import type { AssetsApi } from '#types/AssetsApi'
+
 export const SetAppState = ({
   assetsApi,
   userType,

src/Components/AppShell/hooks/useAppState.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { useCallback, useState, createContext, useContext } from 'react'
 
-import { AssetsApi } from '#src/types'
+import type { AssetsApi } from '#types/AssetsApi'
 
 interface AppState {
   assetsApi: AssetsApi

src/Components/AppShell/hooks/useAssets.tsx

@@ -3,7 +3,7 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { useCallback, useState, createContext, useContext } from 'react'
 
-import { AssetsApi } from '#src/types'
+import type { AssetsApi } from '#types/AssetsApi'
 
 type UseAssetManagerResult = ReturnType<typeof useAssetsManager>
 

src/Components/Auth/useAuth.tsx

@@ -1,13 +1,12 @@
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-floating-promises */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { createContext, useState, useContext, useEffect } from 'react'
 
-import { UserApi, UserItem } from '#src/types'
+import type { UserApi } from '#types/UserApi'
+import type { UserItem } from '#types/UserItem'
 
 interface AuthProviderProps {
   userApi: UserApi
@@ -80,7 +79,7 @@ export const AuthProvider = ({ userApi, children }: AuthProviderProps) => {
     setLoading(true)
     try {
       const res = await userApi.login(credentials.email, credentials.password)
-      setToken(res.access_token)
+      setToken(res?.access_token)
       return await loadUser()
     } catch (error: any) {
       setLoading(false)

src/Components/Gaming/Quests.tsx

@@ -3,10 +3,11 @@ import { useEffect, useState } from 'react'
 
 import { useAuth } from '#components/Auth'
 import { useItems } from '#components/Map/hooks/useItems'
-import { Item } from '#src/types'
 
 import { useQuestsOpen, useSetQuestOpen } from './hooks/useQuests'
 
+import type { Item } from '#types/Item'
+
 export function Quests() {
   const questsOpen = useQuestsOpen()
   const setQuestsOpen = useSetQuestOpen()

src/Components/Map/ItemForm.tsx

@@ -1,7 +1,7 @@
 import { node, string } from 'prop-types'
 import { Children, cloneElement, isValidElement, useEffect } from 'react'
 
-import { Item } from '#src/types'
+import type { Item } from '#types/Item'
 
 export const ItemForm = ({
   children,

src/Components/Map/ItemView.tsx

@@ -1,7 +1,7 @@
 import { node, string } from 'prop-types'
 import { Children, cloneElement, isValidElement } from 'react'
 
-import { Item } from '#src/types'
+import type { Item } from '#types/Item'
 
 export const ItemView = ({ children, item }: { children?: React.ReactNode; item?: Item }) => {
   return (

src/Components/Map/Layer.tsx

@@ -7,12 +7,10 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { Popup } from 'leaflet'
 import { Children, isValidElement, useEffect, useState } from 'react'
 import { Marker, Tooltip, useMap, useMapEvents } from 'react-leaflet'
 import { useLocation } from 'react-router-dom'
 
-import { Item, LayerProps, Tag } from '#src/types'
 import { encodeTag } from '#utils/FormatTags'
 import { getValue } from '#utils/GetValue'
 import { hashTagRegex } from '#utils/HashTagRegex'
@@ -32,6 +30,11 @@ import { useAddTag, useAllTagsLoaded, useGetItemTags, useTags } from './hooks/us
 import { ItemFormPopup } from './Subcomponents/ItemFormPopup'
 import { ItemViewPopup } from './Subcomponents/ItemViewPopup'
 
+import type { Item } from '#types/Item'
+import type { LayerProps } from '#types/LayerProps'
+import type { Tag } from '#types/Tag'
+import type { Popup } from 'leaflet'
+
 export const Layer = ({
   data,
   children,

src/Components/Map/Permissions.tsx

@@ -1,10 +1,12 @@
 import { useEffect } from 'react'
 
 import { useAuth } from '#components/Auth'
-import { ItemsApi, Permission } from '#src/types'
 
 import { useSetPermissionData, useSetPermissionApi, useSetAdminRole } from './hooks/usePermissions'
 
+import type { ItemsApi } from '#types/ItemsApi'
+import type { Permission } from '#types/Permission'
+
 export function Permissions({
   data,
   api,

src/Components/Map/Subcomponents/AddButton.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 import { useLayers } from '#components/Map/hooks/useLayers'
 import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
 

src/Components/Map/Subcomponents/Controls/SearchControl.tsx

@@ -22,14 +22,15 @@ import { useItems } from '#components/Map/hooks/useItems'
 import { useLeafletRefs } from '#components/Map/hooks/useLeafletRefs'
 import { useTags } from '#components/Map/hooks/useTags'
 import useWindowDimensions from '#components/Map/hooks/useWindowDimension'
-import { Item } from '#src/types'
 import { decodeTag } from '#utils/FormatTags'
 import { getValue } from '#utils/GetValue'
 import MarkerIconFactory from '#utils/MarkerIconFactory'
 
 import { LocateControl } from './LocateControl'
 import { SidebarControl } from './SidebarControl'
 
+import type { Item } from '#types/Item'
+
 export const SearchControl = () => {
   const windowDimensions = useWindowDimensions()
   const [popupOpen, setPopupOpen] = useState(false)

src/Components/Map/Subcomponents/ItemFormPopup.tsx

@@ -17,10 +17,12 @@ import { TextInput } from '#components/Input/TextInput'
 import { useResetFilterTags } from '#components/Map/hooks/useFilter'
 import { useAddItem, useItems, useRemoveItem, useUpdateItem } from '#components/Map/hooks/useItems'
 import { useAddTag, useTags } from '#components/Map/hooks/useTags'
-import { Geometry, Item, ItemFormPopupProps } from '#src/types'
 import { hashTagRegex } from '#utils/HashTagRegex'
 import { randomColor } from '#utils/RandomColor'
 
+import type { Item } from '#types/Item'
+import type { ItemFormPopupProps } from '#types/ItemFormPopupProps'
+
 export function ItemFormPopup(props: ItemFormPopupProps) {
   const [spinner, setSpinner] = useState(false)
 
@@ -50,7 +52,7 @@ export function ItemFormPopup(props: ItemFormPopupProps) {
         formItem[input.name] = input.value
       }
     })
-    formItem.position = new Geometry(props.position.lng, props.position.lat)
+    formItem.position = { type: 'Point', coordinates: [props.position.lng, props.position.lat] }
     evt.preventDefault()
     setSpinner(true)
 

src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx

@@ -15,9 +15,11 @@ import { useNavigate } from 'react-router-dom'
 import { useAppState } from '#components/AppShell/hooks/useAppState'
 import { useHasUserPermission } from '#components/Map/hooks/usePermissions'
 import DialogModal from '#components/Templates/DialogModal'
-import { Item, ItemsApi } from '#src/types'
 import { getValue } from '#utils/GetValue'
 
+import type { Item } from '#types/Item'
+import type { ItemsApi } from '#types/ItemsApi'
+
 export function HeaderView({
   item,
   api,

src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx

@@ -3,9 +3,10 @@
 import { Link } from 'react-router-dom'
 
 import { useGetItemTags } from '#components/Map/hooks/useTags'
-import { Item } from '#src/types'
 import { getValue } from '#utils/GetValue'
 
+import type { Item } from '#types/Item'
+
 export const PopupButton = ({
   url,
   parameterField,

src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx

@@ -1,4 +1,4 @@
-import { Item } from '#src/types'
+import type { Item } from '#types/Item'
 
 export const PopupCheckboxInput = ({
   dataField,

src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
 import { TextInput } from '#components/Input'
-import { Item } from '#src/types'
+
+import type { Item } from '#types/Item'
 
 interface StartEndInputProps {
   item?: Item

src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextAreaInput.tsx

@@ -1,5 +1,6 @@
 import { TextAreaInput } from '#components/Input'
-import { Item } from '#src/types'
+
+import type { Item } from '#types/Item'
 
 export const PopupTextAreaInput = ({
   dataField,

src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx

@@ -1,5 +1,6 @@
 import { TextInput } from '#components/Input'
-import { Item } from '#src/types'
+
+import type { Item } from '#types/Item'
 
 export const PopupTextInput = ({
   dataField,

src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/prefer-optional-chain */
-import { Item } from '#src/types'
+import type { Item } from '#types/Item'
 
 export const StartEndView = ({ item }: { item?: Item }) => {
   return (

src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx

@@ -11,12 +11,14 @@ import remarkBreaks from 'remark-breaks'
 
 import { useAddFilterTag } from '#components/Map/hooks/useFilter'
 import { useTags } from '#components/Map/hooks/useTags'
-import { Item, Tag } from '#src/types'
 import { decodeTag } from '#utils/FormatTags'
 import { getValue } from '#utils/GetValue'
 import { hashTagRegex } from '#utils/HashTagRegex'
 import { fixUrls, mailRegex } from '#utils/ReplaceURLs'
 
+import type { Item } from '#types/Item'
+import type { Tag } from '#types/Tag'
+
 export const TextView = ({
   item,
   truncate = false,

src/Components/Map/Subcomponents/ItemViewPopup.tsx

@@ -15,12 +15,14 @@ import { toast } from 'react-toastify'
 
 import { useRemoveItem, useUpdateItem } from '#components/Map/hooks/useItems'
 import { useSetSelectPosition } from '#components/Map/hooks/useSelectPosition'
-import { Item, ItemFormPopupProps } from '#src/types'
 import { timeAgo } from '#utils/TimeAgo'
 
 import { HeaderView } from './ItemPopupComponents/HeaderView'
 import { TextView } from './ItemPopupComponents/TextView'
 
+import type { Item } from '#types/Item'
+import type { ItemFormPopupProps } from '#types/ItemFormPopupProps'
+
 export interface ItemViewPopupProps {
   item: Item
   children?: React.ReactNode

src/Components/Map/Tags.tsx

@@ -1,11 +1,12 @@
 import { useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
 
-import { ItemsApi, Tag } from '#src/types'
-
 import { useAddFilterTag, useFilterTags, useResetFilterTags } from './hooks/useFilter'
 import { useSetTagData, useSetTagApi, useTags } from './hooks/useTags'
 
+import type { ItemsApi } from '#types/ItemsApi'
+import type { Tag } from '#types/Tag'
+
 export function Tags({ data, api }: { data?: Tag[]; api?: ItemsApi<Tag> }) {
   const setTagData = useSetTagData()
   const setTagApi = useSetTagApi()

src/Components/Map/UtopiaMap.tsx

@@ -1,7 +1,9 @@
 import { ContextWrapper } from '#components/AppShell/ContextWrapper'
-import { UtopiaMapProps } from '#src/types'
 
 import { UtopiaMapInner } from './UtopiaMapInner'
+
+import type { UtopiaMapProps } from '#types/UtopiaMapProps'
+
 // eslint-disable-next-line import/no-unassigned-import
 import 'react-toastify/dist/ReactToastify.css'
 

src/Components/Map/UtopiaMapInner.tsx

@@ -23,8 +23,6 @@ import MarkerClusterGroup from 'react-leaflet-cluster'
 import { Outlet } from 'react-router-dom'
 import { toast } from 'react-toastify'
 
-import { ItemFormPopupProps, UtopiaMapProps } from '#src/types'
-
 // eslint-disable-next-line import/no-unassigned-import
 import './UtopiaMap.css'
 
@@ -46,6 +44,8 @@ import { TagsControl } from './Subcomponents/Controls/TagsControl'
 import { TextView } from './Subcomponents/ItemPopupComponents/TextView'
 import { SelectPosition } from './Subcomponents/SelectPosition'
 
+import type { ItemFormPopupProps } from '#types/ItemFormPopupProps'
+import type { UtopiaMapProps } from '#types/UtopiaMapProps'
 import type { Feature, Geometry as GeoJSONGeometry } from 'geojson'
 
 const mapDivRef = createRef()

src/Components/Map/hooks/useFilter.tsx

@@ -7,11 +7,12 @@
 import { useCallback, useReducer, createContext, useContext, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
-import { LayerProps, Tag } from '#src/types'
-
 import { useLayers } from './useLayers'
 import useWindowDimensions from './useWindowDimension'
 
+import type { LayerProps } from '#types/LayerProps'
+import type { Tag } from '#types/Tag'
+
 type ActionType =
   | { type: 'ADD_TAG'; tag: Tag }
   | { type: 'REMOVE_TAG'; name: string }