Reset application state in user's setting panel

src/components/common-icons.tsx

@@ -1,6 +1,7 @@
 import { IconType } from "react-icons";
 import { BiNetworkChart } from "react-icons/bi";
 import { BsCircle, BsCodeSlash, BsFillPlayFill, BsGithub, BsPalette, BsSearch, BsSlashLg } from "react-icons/bs";
+import { BsExclamationTriangle } from "react-icons/bs";
 import { GrOverview, GrScorecard } from "react-icons/gr";
 import { ImFilesEmpty } from "react-icons/im";
 import { IoSettingsOutline } from "react-icons/io5";
@@ -22,6 +23,7 @@ export const SignOutIcon = MdLogout;
 export const ContextIcon = GrOverview;
 export const RetryIcon = MdOutlineRefresh;
 export const SettingsIcon = IoSettingsOutline;
+export const DangerIcon = BsExclamationTriangle;
 
 export const NodeIcon = BsCircle;
 export const EdgeIcon = BsSlashLg;

src/core/context/dataContexts.tsx

@@ -10,7 +10,9 @@ import { layoutActions, layoutStateAtom } from "../layouts";
 import { preferencesActions, preferencesAtom } from "../preferences";
 import { searchActions, searchAtom } from "../search";
 import { selectionActions, selectionAtom } from "../selection";
+import { sessionAtom } from "../session";
 import { sigmaActions, sigmaAtom, sigmaStateAtom } from "../sigma";
+import { userActions, userAtom } from "../user";
 import { ReadableAtom, WritableAtom, useReadAtom } from "../utils/atoms";
 import { Action } from "../utils/producers";
 
@@ -53,24 +55,28 @@ const ATOMS = {
   visualGetters: visualGettersAtom,
   search: searchAtom,
   layoutState: layoutStateAtom,
+  session: sessionAtom,
+  user: userAtom,
 };
 type AtomName = keyof typeof ATOMS;
 
 const CONTEXTS = {
-  sigma: createContext(ATOMS.sigma),
-  filters: createContext(ATOMS.filters),
-  selection: createContext(ATOMS.selection),
-  importState: createContext(ATOMS.importState),
-  exportState: createContext(ATOMS.exportState),
   appearance: createContext(ATOMS.appearance),
-  sigmaState: createContext(ATOMS.sigmaState),
-  sigmaGraph: createContext(ATOMS.sigmaGraph),
-  preferences: createContext(ATOMS.preferences),
-  graphDataset: createContext(ATOMS.graphDataset),
+  filters: createContext(ATOMS.filters),
   filteredGraph: createContext(ATOMS.filteredGraph),
+  graphDataset: createContext(ATOMS.graphDataset),
+  exportState: createContext(ATOMS.exportState),
+  importState: createContext(ATOMS.importState),
   visualGetters: createContext(ATOMS.visualGetters),
-  search: createContext(ATOMS.search),
   layoutState: createContext(ATOMS.layoutState),
+  preferences: createContext(ATOMS.preferences),
+  search: createContext(ATOMS.search),
+  selection: createContext(ATOMS.selection),
+  session: createContext(ATOMS.session),
+  sigma: createContext(ATOMS.sigma),
+  sigmaState: createContext(ATOMS.sigmaState),
+  sigmaGraph: createContext(ATOMS.sigmaGraph),
+  user: createContext(ATOMS.user),
 };
 
 /**
@@ -96,6 +102,8 @@ export const resetStates: Action = () => {
   appearanceActions.resetState();
   sigmaActions.resetState();
   searchActions.reset();
+  userActions.reset();
+  graphDatasetActions.resetGraph();
 };
 
 // Read data:
@@ -113,6 +121,7 @@ export const useFilteredGraph = makeUseAtom(CONTEXTS.filteredGraph);
 export const useVisualGetters = makeUseAtom(CONTEXTS.visualGetters);
 export const useSearch = makeUseAtom(CONTEXTS.search);
 export const useLayoutState = makeUseAtom(CONTEXTS.layoutState);
+export const useUser = makeUseAtom(CONTEXTS.user);
 
 export const useSigmaActions = makeUseActions(sigmaActions);
 export const useFiltersActions = makeUseActions(filtersActions);
@@ -124,6 +133,7 @@ export const useSearchActions = makeUseActions(searchActions);
 export const useImportActions = makeUseActions(importActions);
 export const useExportActions = makeUseActions(exportActions);
 export const useLayoutActions = makeUseActions(layoutActions);
+export const useUserActions = makeUseActions(userActions);
 
 export const useResetStates = () => {
   return resetStates;

src/core/session/index.ts

@@ -13,8 +13,6 @@ import { getEmptySession, serializeSession } from "./utils";
  */
 export const sessionAtom = atom<Session>(getEmptySession());
 
-export const sessionActions = {};
-
 /**
  * Bindings:
  * *********

src/core/user/index.tsx

@@ -1,15 +1,30 @@
 import { isNil } from "lodash";
 
 import { atom, useAtom } from "../utils/atoms";
+import { Producer, producerToAction } from "../utils/producers";
 import { User } from "./types";
 
 export const LS_USER_KEY = "user";
-export const userAtom = atom<User | null>(null);
+type UserState = User | null;
 
 export function useConnectedUser() {
   return useAtom(userAtom);
 }
 
+export const reset: Producer<UserState> = () => {
+  return () => null;
+};
+
+/**
+ * Public API:
+ * ***********
+ */
+export const userAtom = atom<UserState>(null);
+
+export const userActions = {
+  reset: producerToAction(reset, userAtom),
+};
+
 /**
  * Sync. user atom in the localstorage
  */

src/locales/dev.json

@@ -743,6 +743,14 @@
     }
   },
   "settings": {
-    "title":"User's settings"
+    "title":"User's settings",
+    "danger-zone": {
+      "title": "Danger zone",
+      "reset-state": {
+        "title":"Reset application state",
+        "description": "All your data will be deleted, even the settings saved locally (ie. in your browser). Are you sure ?",
+        "success": "Application's state has been cleared"
+      }
+    }
   }
 }

src/locales/en.json

@@ -731,5 +731,16 @@
             "help": "Type something to find an edge",
             "other_result": "... and {{count}} other edges"
         }
-    }
+    },
+    "settings": {
+        "title":"User's settings",
+        "danger-zone": {
+          "title": "Danger zone",
+          "reset-state": {
+            "title":"Reset application state",
+            "description": "All your data will be deleted, even the settings saved locally (ie. in your browser). Are you sure ?",
+            "success": "Application's state has been cleared"
+          }
+        }
+      }
 }

src/locales/fr.json

@@ -732,5 +732,16 @@
       "help": "Écrire quelque chose pour trouver un lien",
       "other_result": "... et {{count}} autres liens"
     }
+  },
+  "settings": {
+    "title":"User's settings",
+    "danger-zone": {
+      "title": "Danger zone",
+      "reset-state": {
+        "title":"Mise à zéro de l'état de l'application",
+        "description": "Toutes les données courantes seront perdues, même celle stockée dans le navigateur. Voulez-vous continuer ?",
+        "success": "Mise à zéro de l'application"
+      }
+    }
   }
 }

src/views/graphPage/UserSettingsPanel.tsx

@@ -2,11 +2,13 @@ import { FC } from "react";
 import { useTranslation } from "react-i18next";
 
 import LocalSwitcher from "../../components/LocalSwitcher";
-import { GitHubIcon, SettingsIcon, SignOutIcon, SingInIcon } from "../../components/common-icons";
+import { DangerIcon, GitHubIcon, SettingsIcon, SignOutIcon, SingInIcon } from "../../components/common-icons";
 import { SignInModal } from "../../components/user/SignInModal";
+import { resetStates } from "../../core/context/dataContexts";
 import { useModal } from "../../core/modals";
 import { useNotifications } from "../../core/notifications";
 import { useConnectedUser } from "../../core/user";
+import ConfirmModal from "./modals/ConfirmModal";
 
 export const UserSettingsPanel: FC = () => {
   const { openModal } = useModal();
@@ -69,6 +71,28 @@ export const UserSettingsPanel: FC = () => {
           </>
         )}
       </div>
+      <div className="d-flex justify-content-center">
+        <button
+          className="btn btn-outline-danger m-3"
+          onClick={() => {
+            openModal({
+              component: ConfirmModal,
+              arguments: {
+                title: t("settings.danger-zone.reset-state.title"),
+                message: t("settings.danger-zone.reset-state.description"),
+                successMsg: t("settings.danger-zone.reset-state.success"),
+              },
+              beforeSubmit: () => {
+                resetStates();
+              },
+            });
+          }}
+        >
+          <DangerIcon />
+          &nbsp;
+          {t("settings.danger-zone.reset-state.title")}
+        </button>
+      </div>
     </>
   );
 };