fixed type issues

package.json

@@ -1,6 +1,6 @@
 {
   "name": "utopia-ui",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Reuseable React Components to build mapping apps for all kinds of communities ",
   "repository": "https://github.com/utopia-os/utopia-ui",
   "homepage:": "https://utopia.os/",

src/Components/AppShell/SideBar.tsx

@@ -53,7 +53,7 @@ export function SideBar({routes} : {routes : route[]}) {
       id="sidenav"
       className="tw-group tw-fixed tw-left-0  tw-mt-16 tw-top-0 tw-z-[1035] tw-h-full -translate-x-full tw-overflow-hidden tw-bg-white tw-shadow-[0_4px_12px_0_rgba(0,0,0,0.07),_0_2px_4px_rgba(0,0,0,0.05)] data-[te-sidenav-slim='true']:tw-hidden data-[te-sidenav-slim-collapsed='true']:tw-w-[56px] data-[te-sidenav-slim='true']:tw-w-[56px] data-[te-sidenav-hidden='false']:tw-translate-x-0 dark:tw-bg-zinc-800 [&[data-te-sidenav-slim-collapsed='true'][data-te-sidenav-slim='false']]:tw-hidden [&[data-te-sidenav-slim-collapsed='true'][data-te-sidenav-slim='true']]:[display:unset]"
       data-te-sidenav-init
-      data-te-sidenav-hidden="true"
+      data-te-sidenav-hidden="false"
       data-te-sidenav-mode="side"
       data-te-sidenav-slim="true"
       data-te-sidenav-content="#app-content"

src/Components/Map/Subcomponents/NewItemPopup.tsx

@@ -3,11 +3,11 @@ import { LatLng } from 'leaflet'
 import { Popup as LeafletPopup, useMap } from 'react-leaflet'
 import { useEffect, useState } from 'react'
 import { useAddItem, useUpdateItem } from '../hooks/useItems'
-import { Geometry, Layer, Item} from '../../../types'
+import { Geometry, LayerProps, Item} from '../../../types'
 
 export interface NewItemPopupProps {
     position: LatLng,
-    layer: Layer,
+    layer: LayerProps,
     item?: Item,
     setNewItemPopup: React.Dispatch<React.SetStateAction<any>>
 }

src/Components/Map/hooks/useItems.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useReducer, createContext, useContext } from "react";
 import * as React from "react";
-import { Item, Layer } from "../../../types";
+import { Item, LayerProps } from "../../../types";
 
 type ActionType =
 | { type: "ADD"; item: Item }
 | { type: "UPDATE"; item: Item }
 | { type: "REMOVE"; item: Item }
-| { type: "RESET"; layer: Layer };
+| { type: "RESET"; layer: LayerProps };
 
 type UseItemManagerResult = ReturnType<typeof useItemsManager>;
 
@@ -23,7 +23,7 @@ function useItemsManager (initialItems: Item[]): {
   addItem: (item: Item) => void;
   updateItem: (item: Item) => void;
   removeItem: (item: Item) => void;
-  resetItems: (layer: Layer) => void;
+  resetItems: (layer: LayerProps) => void;
 } {
   const [items, dispatch] = useReducer((state: Item[], action: ActionType) => {
     switch (action.type) {
@@ -73,7 +73,7 @@ function useItemsManager (initialItems: Item[]): {
     });
   }, []);
 
-  const resetItems = useCallback((layer: Layer) => {
+  const resetItems = useCallback((layer: LayerProps) => {
     dispatch({
       type: "RESET",
       layer

src/Components/Map/hooks/useLayers.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useReducer, createContext, useContext } from "react";
 import * as React from "react";
-import { Item, Layer } from "../../../types";
+import { Item, LayerProps } from "../../../types";
 
 type ActionType =
-  | { type: "ADD LAYER"; layer: Layer }
-  | { type: "ADD ITEM"; item: Item; layer: Layer };
+  | { type: "ADD LAYER"; layer: LayerProps }
+  | { type: "ADD ITEM"; item: Item; layer: LayerProps };
 
 type UseItemManagerResult = ReturnType<typeof useLayerManager>;
 
@@ -13,11 +13,11 @@ const LayerContext = createContext<UseItemManagerResult>({
   addLayer: () => { },
 });
 
-function useLayerManager(initialLayers: Layer[]): {
-  layers: Layer[];
-  addLayer: (layer: Layer) => void;
+function useLayerManager(initialLayers: LayerProps[]): {
+  layers: LayerProps[];
+  addLayer: (layer: LayerProps) => void;
 } {
-  const [layers, dispatch] = useReducer((state: Layer[], action: ActionType) => {
+  const [layers, dispatch] = useReducer((state: LayerProps[], action: ActionType) => {
     switch (action.type) {
       case "ADD LAYER":
         const exist = state.find((layer) =>
@@ -33,7 +33,7 @@ function useLayerManager(initialLayers: Layer[]): {
     }
   }, initialLayers);
 
-  const addLayer = useCallback((layer: Layer) => {
+  const addLayer = useCallback((layer: LayerProps) => {
     dispatch({
       type: "ADD LAYER",
       layer
@@ -44,14 +44,14 @@ function useLayerManager(initialLayers: Layer[]): {
 }
 
 export const LayersProvider: React.FunctionComponent<{
-  initialLayers: Layer[], children?: React.ReactNode
+  initialLayers: LayerProps[], children?: React.ReactNode
 }> = ({ initialLayers, children }) => (
   <LayerContext.Provider value={useLayerManager(initialLayers)}>
     {children}
   </LayerContext.Provider>
 );
 
-export const useLayers = (): Layer[] => {
+export const useLayers = (): LayerProps[] => {
   const { layers } = useContext(LayerContext);
   return layers;
 };

src/types.ts

@@ -10,7 +10,7 @@ export interface UtopiaMapProps {
   children?: React.ReactNode,
 }
 
-export interface LayerProps<T> {
+export interface LayerProps {
   data?: Item[],
   children?: React.ReactNode
   name: string,
@@ -21,7 +21,7 @@ export interface LayerProps<T> {
   markerShape: string,
   markerDefaultColor: string,
   tags?: Tag[],
-  api?: ItemsApi<T>,
+  api?: ItemsApi,
   setNewItemPopup?: React.Dispatch<React.SetStateAction<NewItemPopupProps | null>>
 }
 
@@ -60,9 +60,9 @@ export interface Tag {
   name: string;
 }
 
-export interface ItemsApi<T> {
+export interface ItemsApi {
   getItems(): Promise<void>,
-  addItem(item : T): Promise<void>,
-  updateItem(item : T): Promise<void>,
+  addItem(item : Item): Promise<void>,
+  updateItem(item : Item): Promise<void>,
   deleteItem(id : number): Promise<void>,
 }