Folder system

.eslintrc.json

@@ -1,11 +1 @@
-{
-  "extends": ["next", "prettier", "plugin:prettier/recommended"],
-  "rules": {
-    "@next/next/no-img-element": "off",
-    "unused-imports/no-unused-imports-ts": "error",
-    "@typescript-eslint/consistent-type-imports": "error",
-    "no-constant-condition": "warn"
-  },
-  "ignorePatterns": ["node_modules/", ".next/", ".github/"],
-  "plugins": ["unused-imports", "@typescript-eslint"]
-}
+

package.json

@@ -33,6 +33,7 @@
     "lint"
   ],
   "dependencies": {
+    "@cometchat-pro/chat": "3.0.10",
     "@date-io/date-fns": "^2.15.0",
     "@emotion/cache": "^11.10.1",
     "@emotion/react": "^11.10.0",
@@ -79,6 +80,7 @@
     "react-papaparse": "^4.0.2",
     "react-qr-reader": "2.2.1",
     "react-redux": "^8.0.2",
+    "react-toastify": "^9.1.1",
     "semver": "^7.3.7"
   },
   "devDependencies": {

src/components/chat/folder.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useState, type ReactElement } from 'react'
+import Button from '@mui/material/Button'
+import AddIcon from '@/public/images/common/add.svg'
+import SafeListItem from '../sidebar/SafeListItem'
+import SvgIcon from '@mui/material/SvgIcon'
+import css from './styles.module.css'
+
+//@ts-ignore
+const Folder = ({group}): ReactElement => {
+  const [safeAddress, setSafeAddress] = useState<string>('');
+  const [safes, setSafes] = useState<string[]>(['']);
+
+  window?.addEventListener('storage', () => {
+    const items = JSON.parse(localStorage.getItem(group)!);
+    // const myArray = items.split(",");
+    if (items) {
+      setSafes(items);
+    }
+  })
+
+  useEffect(() => {
+    const activeGroups = async () =>{
+      const items = JSON.parse(localStorage.getItem(group)!);
+     // const myArray = items.split(",");
+      if (items) {
+       setSafes(items);
+      }
+    }
+    activeGroups()
+    window.addEventListener('storage', activeGroups)
+    return () => {  
+      window.removeEventListener('storage', activeGroups)
+    }
+  }, [localStorage.getItem(group)]);
+
+  const addSafeToFolder = async () => {
+    const safes = JSON.parse(localStorage.getItem(group)!);
+    if (safes) {
+      localStorage.setItem(group, JSON.stringify([...safes, safeAddress]));
+    } else {
+      localStorage.setItem(group, JSON.stringify([safeAddress]));
+    }
+    window.dispatchEvent(new Event("storage"));
+  }
+
+  const deleteSafeFromFolder = async () => {
+    const safes = JSON.parse(localStorage.getItem(group)!);
+    const updated = safes.filter((address: string) => address !== safeAddress)
+    if (updated) {
+      localStorage.setItem(group, JSON.stringify(updated));
+    } else {
+      localStorage.setItem(group, JSON.stringify([safeAddress]));
+    }
+    window.dispatchEvent(new Event("storage"));
+  }
+
+  const handleSetSafeAddress = (address: string) => {
+    setSafeAddress(address)
+  }
+
+  const deleteFolder = async () => {
+    console.log(group)
+    await localStorage.removeItem(group);
+    window.dispatchEvent(new Event("storage"));
+  } 
+
+  return (
+    <div className={css.group}>
+      <h3>{group}</h3>
+      <button onClick={() => deleteFolder()}>Delete Folder</button>
+      <div className={css.header}>
+        <label>Add Safe</label>
+        <input value={safeAddress} onChange={(e) => handleSetSafeAddress(e.target.value)} placeholder={'Safe address'}/>
+        <Button
+          disableElevation
+          className={css.addbutton}
+          size="small"
+          variant="outlined"
+          onClick={() => addSafeToFolder()}
+          startIcon={<SvgIcon component={AddIcon} inheritViewBox fontSize="small" />}
+        >
+          Add
+        </Button>
+        <Button
+          disableElevation
+          className={css.addbutton}
+          size="small"
+          variant="outlined"
+          onClick={() => deleteSafeFromFolder()}
+          startIcon={<SvgIcon component={AddIcon} inheritViewBox fontSize="small" />}
+        >
+          Delete
+        </Button>
+      </div>
+
+      <>
+        {
+          safes.map((safe) => {
+            return <SafeListItem
+              key={safe}
+              address={safe}
+              chainId={'137'}
+              closeDrawer={() => {}}
+              shouldScrollToSafe={true}
+            />
+          })
+        }
+      </>
+    </div>
+  )
+}
+
+export default Folder

src/components/chat/groups.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useState, type ReactElement } from 'react'
+import Track from '@/components/common/Track'
+import Button from '@mui/material/Button'
+import SvgIcon from '@mui/material/SvgIcon'
+import Folder from './folder'
+import AddIcon from '@/public/images/common/add.svg'
+import css from './styles.module.css'
+import { OVERVIEW_EVENTS } from '@/services/analytics'
+
+const GroupList = (): ReactElement => {
+  const [groups, setGroups] = useState<string[]>([]);
+  const [folderName, setFolderName] = useState<string | undefined>();
+
+  useEffect(() => {
+    const activeGroups = async () =>{
+      const items = JSON.parse(localStorage.getItem('folders')!);
+     // const myArray = items.split(",");
+      if (items) {
+       setGroups(items);
+      }
+    }
+    activeGroups()
+    window.addEventListener('storage', activeGroups)
+    return () => {  
+      window.removeEventListener('storage', activeGroups)
+    }
+  }, []);
+
+  const createFolder = async () => {
+    const folders = JSON.parse(localStorage.getItem('folders')!);
+    localStorage.setItem('folders', JSON.stringify(folders ? [...folders, `${folderName!},`] : [folderName!]));
+    window.dispatchEvent(new Event("storage"));
+  }
+
+  const nameFolder = (name: string) => {
+    setFolderName(name)
+  }
+
+  return (
+    <div className={css.container}>
+       <div className={css.header}>
+        <h3>
+          My Folders
+        </h3>
+          <Track {...OVERVIEW_EVENTS.ADD_GROUP}>
+            <div >
+              <input type="text" value={folderName} onChange={(e) => nameFolder(e.target.value)}/>
+              <Button
+                disableElevation
+                className={css.addbutton}
+                size="small"
+                variant="outlined"
+                onClick={() =>  createFolder()}
+                startIcon={<SvgIcon component={AddIcon} inheritViewBox fontSize="small" />}
+              >
+                Add
+              </Button>
+            </div>
+          </Track>
+      </div>
+      <>
+        {groups?.map((group: string) => {
+          return <div><Folder group={group}/></div>
+        })}
+      </>
+    </div>
+  )
+}
+
+export default GroupList