Cognition apps rework (#9)

* added console log hook for state

* pre websocket-auth error

* minor change

---------

Co-authored-by: Lennart Schmidt <lennart.schmidt@kern.ai>

Author: Johannes Hötter

components/Dropdown.tsx

@@ -1,11 +1,10 @@
 import { Fragment, useEffect, useRef, useState } from 'react'
 import { Menu, Transition } from '@headlessui/react'
-import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { DropdownProps } from '../types/dropdown';
 import { combineClassNames } from '../../javascript-functions/general';
 import { SELECT_ALL, checkDropdownProps, prepareDropdownOptionsToArray, setOptionsWithSearchBar } from '../helpers/dropdown-helper';
 import { Tooltip } from '@nextui-org/react';
-import { IconTrashXFilled } from '@tabler/icons-react';
+import { IconChevronDown, IconTrashXFilled } from '@tabler/icons-react';
 import useOnClickOutside from '../hooks/useHooks/useOnClickOutside';
 
 export default function Dropdown(props: DropdownProps) {
@@ -107,7 +106,7 @@ export default function Dropdown(props: DropdownProps) {
 
                         className="h-9 w-full text-sm border-gray-300 rounded-md placeholder-italic border text-gray-900 pr-8 pl-4 truncate placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-gray-100"
                         placeholder="Type to search..." />
-                    <ChevronDownIcon
+                    <IconChevronDown
                         className="h-5 w-5 absolute right-0 mr-3 -mt-7"
                         aria-hidden="true"
                     />
@@ -116,7 +115,7 @@ export default function Dropdown(props: DropdownProps) {
             focus:ring-gray-300 focus:ring-offset-2 focus:ring-offset-gray-100 disabled:opacity-50 disabled:cursor-not-allowed ${props.buttonClasses ?? ''}`}
                     disabled={isDisabled && !props.hasCheckboxes}>
                     {props.buttonName}
-                    <ChevronDownIcon
+                    <IconChevronDown
                         className="-mr-1 ml-2 h-5 w-5"
                         aria-hidden="true"
                     />

components/InfoButton.tsx

@@ -2,7 +2,6 @@ import { combineClassNames } from "@/submodules/javascript-functions/general";
 import { useDefaults } from "@/submodules/react-components/hooks/useDefaults";
 import { IconInfoCircle } from "@tabler/icons-react";
 import { Dispatch, Fragment, SetStateAction, useEffect, useRef, useState } from "react";
-import { InformationCircleIcon } from "@heroicons/react/20/solid";
 import useOnClickOutside from "@/submodules/react-components/hooks/useHooks/useOnClickOutside";
 import { Transition } from "@headlessui/react";
 import { INFO_BUTTON_DEFAULT_VALUES, InfoButtonConfig, InfoButtonProps } from "../types/infoButton";
@@ -45,7 +44,7 @@ export function InfoButton(_props: InfoButtonProps) {
 
     if (!config) return null;
 
-    return <>
+    return (
         <div className={combineClassNames("relative w-fit p-1", config.cursorClass)} onClick={props.access == 'click' ? config.showInfo : undefined} onMouseEnter={props.access == 'hover' ? config.showInfo : undefined} onMouseLeave={props.access == 'hover' ? config.hideInfo : undefined}>
             <IconInfoCircle size={config.size} className={props.infoButtonColorClass} />
             {props.display == "absoluteDiv" ? <RenderDiv
@@ -57,13 +56,13 @@ export function InfoButton(_props: InfoButtonProps) {
                 onMouseLeave={config.hideInfo}
                 zIndexClass={props.divZIndexClass} /> : null}
         </div>
-    </>
+    )
 }
 
 function RenderDiv({ positionClass, open, content, access, onMouseEnter, onMouseLeave, zIndexClass }: { positionClass: string, open: boolean, content: string | JSX.Element, access: string, onMouseEnter: () => void, onMouseLeave: () => void, zIndexClass: string }) {
     const ref = useRef(null);
     useOnClickOutside(ref, onMouseLeave);
-    return (<>
+    return (
         <Transition.Root show={open} as={Fragment} >
             <Transition.Child
                 as={Fragment}
@@ -78,13 +77,12 @@ function RenderDiv({ positionClass, open, content, access, onMouseEnter, onMouse
                     {typeof content == "string" ?
                         <div className="flex items-center gap-x-2">
                             <div className="flex-shrink-0">
-                                <InformationCircleIcon className="h-5 w-5 text-blue-400" aria-hidden="true" />
+                                <IconInfoCircle className="h-5 w-5 text-blue-400" aria-hidden="true" />
                             </div>
                             <p className="text-sm text-blue-700 w-max max-w-sm">{content}</p>
                         </div> : content}
                 </div>
             </Transition.Child>
         </Transition.Root>
-    </>
     )
 }

hooks/useLocalStorage.tsx

@@ -6,9 +6,11 @@ type ItemWithExpiration<T> = {
 };
 
 export function readItemGroupFromLocalStorage(group: string): any {
-  const itemGroupString = localStorage.getItem(group);
-  if (itemGroupString) {
-    return JSON.parse(itemGroupString);
+  if (typeof localStorage !== 'undefined') {
+    const itemGroupString = localStorage.getItem(group);
+    if (itemGroupString) {
+      return JSON.parse(itemGroupString);
+    }
   }
   return {};
 }
@@ -28,7 +30,9 @@ export function useLocalStorage<T>(
         if (item.expiration && Date.now() > item.expiration) {
           // Item has expired, remove it
           delete itemGroup[key];
-          localStorage.setItem(group, JSON.stringify(itemGroup));
+          if (typeof localStorage !== 'undefined') {
+            localStorage.setItem(group, JSON.stringify(itemGroup));
+          }
         } else {
           return item.value;
         }
@@ -45,7 +49,9 @@ export function useLocalStorage<T>(
       expiration: timeoutSeconds ? Date.now() + timeoutSeconds * 1000 : null,
     };
     itemGroup[key] = item;
-    localStorage.setItem(group, JSON.stringify(itemGroup));
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem(group, JSON.stringify(itemGroup));
+    }
   }, [state]);
 
   return [state, setState];