fixed api error and error handling

src/Components/Input/TextAreaInput.tsx

@@ -63,7 +63,7 @@ export function TextAreaInput({ labelTitle, dataField, labelStyle, containerStyl
             {labelTitle ? <label className="tw-label">
                 <span className={"tw-label-text tw-text-base-content " + labelStyle}>{labelTitle}</span>
             </label> : ""}
-            <textarea ref={ref} defaultValue={defaultValue} name={dataField} className={`tw-textarea tw-textarea-bordered tw-w-full tw-leading-5 ${inputStyle ? inputStyle : ""}`} placeholder={placeholder || ""} onChange={(e) => updateFormValue && updateFormValue(e.target.value)}></textarea>
+            <textarea required ref={ref} defaultValue={defaultValue} name={dataField} className={`tw-textarea tw-textarea-bordered tw-w-full tw-leading-5 ${inputStyle ? inputStyle : ""}`} placeholder={placeholder || ""} onChange={(e) => updateFormValue && updateFormValue(e.target.value)}></textarea>
         </div>
     )
 }

src/Components/Input/TextInput.tsx

@@ -22,7 +22,7 @@ export function TextInput({labelTitle, labelStyle, type, dataField, containerSty
                 <span className={"tw-label-text tw-text-base-content " + labelStyle}>{labelTitle}</span>
              </label> 
              : " "} 
-            <input type={type || "text"} name={dataField} defaultValue={defaultValue} placeholder={placeholder || ""} onChange={(e) => updateFormValue&& updateFormValue(e.target.value)}className={`tw-input  tw-input-bordered tw-w-full ${inputStyle ? inputStyle : ""}`} />
+            <input required type={type || "text"} name={dataField} defaultValue={defaultValue} placeholder={placeholder || ""} onChange={(e) => updateFormValue&& updateFormValue(e.target.value)}className={`tw-input  tw-input-bordered tw-w-full ${inputStyle ? inputStyle : ""}`} />
         </div>
     )
 }

src/Components/Map/Subcomponents/ItemFormPopup.tsx

@@ -9,6 +9,7 @@ import { TextInput } from '../../Input/TextInput'
 import { hashTagRegex } from '../../../Utils/HashTagRegex'
 import { useAddTag } from '../hooks/useTags'
 import { randomColor } from '../../../Utils/RandomColor'
+import { toast } from 'react-toastify'
 
 export interface ItemFormPopupProps {
     position: LatLng,
@@ -29,7 +30,6 @@ export function ItemFormPopup(props: ItemFormPopupProps) {
     const addItem = useAddItem();
     const updateItem = useUpdateItem();
 
-    const addTag = useAddTag();
 
     const handleSubmit = async (evt: any) => {
         const formItem: Item = {} as Item;
@@ -42,17 +42,29 @@ export function ItemFormPopup(props: ItemFormPopupProps) {
         evt.preventDefault();
         setSpinner(true);
 
-        formItem.text.toLocaleLowerCase().match(hashTagRegex)?.map(tag=> {
-            addTag({id: tag.slice(1), color: randomColor()})
-        });
 
         if (props.item) {
-            await updateItem({...props.item, ...formItem});
+            let success = false;
+            try {
+                await props.layer.api?.updateItem!({...formItem, id: props.item.id});
+                success = true;
+            } catch (error) {
+                console.log();
+            }
+            success&&updateItem({...props.item, ...formItem});
             setSpinner(false);
             map.closePopup();
         }
         else {
-            await addItem({...formItem, id: crypto.randomUUID(), layer: props.layer});
+
+            let success = false;
+            try {
+                await props.layer.api?.createItem!({...formItem, id: crypto.randomUUID()});
+                success = true;
+            } catch (error) {
+                toast.error(error.toString);
+            }
+            success&&addItem({...formItem, id: crypto.randomUUID(), layer: props.layer});
             setSpinner(false);
             map.closePopup();
         }

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

@@ -13,6 +13,8 @@ export const TextView = ({ item }: { item?: Item }) => {
   const tags = useTags();
   const addTag = useAddTag();
 
+  const groupRef = useRef(null);
+
   const addFilterTag = useAddFilterTag();
   const resetFilterTags = useResetFilterTags();
 
@@ -64,7 +66,8 @@ export const TextView = ({ item }: { item?: Item }) => {
     return (
       <a style={{ color: tag ? tag.color : '#aaa' , fontWeight: 'bold', cursor: 'pointer' }} key={tag ? tag.id+item!.id+i  : i} onClick={() => {
         addFilterTag(tag!);
-        map.closePopup();
+       // map.fitBounds(items)
+       // map.closePopup();
       }}>{match}</a>
     )
   })

src/Components/Map/hooks/useItems.tsx

@@ -107,8 +107,7 @@ function useItemsManager(initialItems: Item[]): {
   }, []);
 
 
-  const addItem = useCallback(async (item: Item) => {
+  const addItem = useCallback(async (item: Item) => {   
-    await item.layer.api?.createItem!(item);
     dispatch({
       type: "ADD",
       item,
@@ -117,7 +116,6 @@ function useItemsManager(initialItems: Item[]): {
   }, []);
 
   const updateItem = useCallback(async (item: Item) => {
-    await item.layer.api?.updateItem!(item);
     dispatch({
       type: "UPDATE",
       item,