web: move all hooks to hooks/ subdir

apps/web/src/app-effects.js

@@ -12,7 +12,7 @@ import { db } from "./common/db";
 import { CHECK_IDS, EV, EVENTS } from "@streetwriters/notesnook-core/common";
 import { registerKeyMap } from "./common/key-map";
 import { isUserPremium } from "./hooks/use-is-user-premium";
-import useAnnouncements from "./utils/use-announcements";
+import useAnnouncements from "./hooks/use-announcements";
 import {
   showAnnouncementDialog,
   showBuyDialog,
@@ -20,7 +20,7 @@ import {
   showInvalidSystemTimeDialog,
   showOnboardingDialog,
 } from "./common/dialog-controller";
-import useSystemTheme from "./utils/use-system-theme";
+import useSystemTheme from "./hooks/use-system-theme";
 import { isTesting } from "./utils/platform";
 import { updateStatus, removeStatus, getStatus } from "./hooks/use-status";
 import { showToast } from "./utils/toast";

apps/web/src/app-effects.mobile.js

@@ -1,8 +1,8 @@
 import { useEffect } from "react";
 import { useStore } from "./stores/app-store";
 import useSlider from "./hooks/use-slider";
-import useMobile from "./utils/use-mobile";
-import useTablet from "./utils/use-tablet";
+import useMobile from "./hooks/use-mobile";
+import useTablet from "./hooks/use-tablet";
 
 export default function MobileAppEffects({ sliderId, overlayId, setShow }) {
   const isMobile = useMobile();

apps/web/src/app.js

@@ -1,8 +1,8 @@
 import React, { useState, Suspense, useMemo, useRef, useEffect } from "react";
 import { Box, Flex } from "rebass";
 import ThemeProvider from "./components/theme-provider";
-import useMobile from "./utils/use-mobile";
-import useTablet from "./utils/use-tablet";
+import useMobile from "./hooks/use-mobile";
+import useTablet from "./hooks/use-tablet";
 import { LazyMotion, domAnimation } from "framer-motion";
 import useDatabase from "./hooks/use-database";
 import { Allotment } from "allotment";

apps/web/src/components/announcements/body.js

@@ -5,7 +5,7 @@ import {
   Image as RebassImage,
   Text as RebassText,
 } from "rebass";
-import { allowedPlatforms } from "../../utils/use-announcements";
+import { allowedPlatforms } from "../../hooks/use-announcements";
 import {
   closeOpenedDialog,
   showBuyDialog,

apps/web/src/components/cached-router/index.js

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import ReactDOM from "react-dom";
 import { getHomeRoute, NavigationEvents } from "../../navigation";
 import { store as selectionStore } from "../../stores/selection-store";
-import useRoutes from "../../utils/use-routes";
+import useRoutes from "../../hooks/use-routes";
 import RouteContainer from "../route-container";
 import ThemeProvider from "../theme-provider";
 import routes from "../../navigation/routes";

apps/web/src/components/dialogs/buy-dialog/buy-dialog.tsx

@@ -209,6 +209,7 @@ function Details(props: DetailsProps) {
     return (
       <PaddleCheckout
         plan={selectedPlan}
+        // @ts-ignore TODO
         theme={theme}
         user={user}
         coupon={couponCode}

apps/web/src/components/dialogs/email-verification-dialog.js

@@ -4,7 +4,7 @@ import Dialog from "./dialog";
 import { useStore as useUserStore } from "../../stores/user-store";
 import { db } from "../../common/db";
 import { useState } from "react";
-import { useSessionState } from "../../utils/hooks";
+import { useSessionState } from "../../hooks/use-session-state";
 import Accordion from "../accordion";
 
 var interval = 0;

apps/web/src/components/dialogs/mfa/steps.tsx

@@ -8,7 +8,7 @@ import React, {
   useState,
 } from "react";
 import { Text, Flex, Button, Box } from "rebass";
-import { useSessionState } from "../../../utils/hooks";
+import { useSessionState } from "../../../hooks/use-session-state";
 import {
   Loading,
   MFAAuthenticator,
@@ -37,7 +37,9 @@ import {
   StepComponentProps,
 } from "./types";
 import { showMultifactorDialog } from "../../../common/dialog-controller";
-const QRCode = React.lazy(() => import("../../../re-exports/react-qrcode-logo"));
+const QRCode = React.lazy(
+  () => import("../../../re-exports/react-qrcode-logo")
+);
 
 export type Steps = typeof steps;
 export type FallbackSteps = typeof fallbackSteps;

apps/web/src/components/dialogs/onboarding-dialog.js

@@ -16,7 +16,7 @@ import { Features } from "../announcements/body";
 import { showBuyDialog } from "../../common/dialog-controller";
 import { TaskManager } from "../../common/task-manager";
 import { db } from "../../common/db";
-import { usePersistentState } from "../../utils/hooks";
+import { usePersistentState } from "../../hooks/use-persistent-state";
 import AccentItem from "../accent-item";
 import { useCallback, useState } from "react";
 import Config from "../../utils/config";

apps/web/src/components/editor/index.tsx

@@ -22,7 +22,7 @@ import { DropEvent } from "react-dropzone";
 import { downloadAttachment } from "../../common/attachments";
 import { EV, EVENTS } from "@streetwriters/notesnook-core/common";
 import { db } from "../../common/db";
-import useMobile from "../../utils/use-mobile";
+import useMobile from "../../hooks/use-mobile";
 import Titlebox from "./title-box";
 
 type PreviewSession = {

apps/web/src/components/editor/tiptap.tsx

@@ -15,7 +15,7 @@ import {
 } from "@streetwriters/editor";
 import { Box, Flex } from "rebass";
 import { PropsWithChildren, useEffect, useRef, useState } from "react";
-import useMobile from "../../utils/use-mobile";
+import useMobile from "../../hooks/use-mobile";
 import { Attachment } from "./picker";
 import { IEditor } from "./types";
 import { useConfigureEditor, useSearch, useToolbarConfig } from "./context";

apps/web/src/components/group-header/index.js

@@ -5,7 +5,7 @@ import { db } from "../../common/db";
 import { useMenuTrigger } from "../../hooks/use-menu";
 import { useStore as useNoteStore } from "../../stores/note-store";
 import { useStore as useNotebookStore } from "../../stores/notebook-store";
-import useMobile from "../../utils/use-mobile";
+import useMobile from "../../hooks/use-mobile";
 
 const groupByToTitleMap = {
   [undefined]: "Default",

apps/web/src/components/hash-router/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import useHashRoutes from "../../utils/use-hash-routes";
+import useHashRoutes from "../../hooks/use-hash-routes";
 import hashroutes from "../../navigation/hash-routes";
 
 function HashRouter() {

apps/web/src/components/list-container/index.js

@@ -11,7 +11,7 @@ import ListProfiles from "../../common/list-profiles";
 import { CustomScrollbarsVirtualList } from "../scroll-container";
 import ReminderBar from "../reminder-bar";
 import Announcements from "../announcements";
-import useAnnouncements from "../../utils/use-announcements";
+import useAnnouncements from "../../hooks/use-announcements";
 import { ListLoader } from "../loaders/list-loader";
 
 function ListContainer(props) {

apps/web/src/components/navigation-menu/index.js

@@ -20,7 +20,7 @@ import { AnimatedFlex } from "../animated";
 import NavigationItem from "./navigation-item";
 import { hardNavigate, navigate } from "../../navigation";
 import { db } from "../../common/db";
-import useMobile from "../../utils/use-mobile";
+import useMobile from "../../hooks/use-mobile";
 import { showRenameColorDialog } from "../../common/dialog-controller";
 import { useStore as useAppStore } from "../../stores/app-store";
 import { useStore as useUserStore } from "../../stores/user-store";

apps/web/src/components/navigation-menu/navigation-item.js

@@ -1,7 +1,7 @@
 import { Button, Flex, Text } from "rebass";
 import { useStore as useAppStore } from "../../stores/app-store";
 import { useMenuTrigger } from "../../hooks/use-menu";
-import useMobile from "../../utils/use-mobile";
+import useMobile from "../../hooks/use-mobile";
 import * as Icons from "../icons";
 
 function NavigationItem(props) {

apps/web/src/components/route-container/index.js

@@ -3,7 +3,7 @@ import { Flex, Text } from "rebass";
 import * as Icon from "../icons";
 import { useStore } from "../../stores/app-store";
 import { CREATE_BUTTON_MAP } from "../../common";
-import useMobile from "../../utils/use-mobile";
+import useMobile from "../../hooks/use-mobile";
 import { navigate } from "../../navigation";
 import { Input } from "@rebass/forms";
 

apps/web/src/hooks/use-announcements.js

@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useState } from "react";
 import { SUBSCRIPTION_STATUS } from "../common/constants";
 import { db } from "../common/db";
-import Config from "./config";
+import Config from "../utils/config";
 import { isUserPremium } from "../hooks/use-is-user-premium";
-import { appVersion } from "./version";
+import { appVersion } from "../utils/version";
 
 var CACHED_ANNOUNCEMENTS = [];
 var cancelled = false;

apps/web/src/hooks/use-persistent-state.ts

@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+import config from "../utils/config";
+
+export function usePersistentState<T>(key: string, def: T) {
+  let defState = config.get<T>(key, def);
+  const [value, setValue] = useState(defState);
+
+  useEffect(() => {
+    config.set<T>(key, value);
+  }, [key, value]);
+
+  return [value, setValue] as const;
+}

apps/web/src/hooks/use-session-state.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+
+const memory: Record<string, any> = {};
+export function useSessionState<T>(key: string, def: T) {
+  const [value, setValue] = useState(
+    memory[key] === undefined ? def : memory[key]
+  );
+
+  useEffect(() => {
+    memory[key] = value;
+  }, [key, value]);
+
+  return [
+    value as T,
+    setValue as React.Dispatch<React.SetStateAction<T>>,
+  ] as const;
+}

apps/web/src/hooks/use-timer.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { useSessionState } from "../utils/hooks";
+import { useSessionState } from "./use-session-state";
 
 export function useTimer(id: string, duration: number) {
   const [seconds, setSeconds] = useSessionState(id, duration);
@@ -9,7 +9,7 @@ export function useTimer(id: string, duration: number) {
   useEffect(() => {
     if (!enabled) {
       interval.current = setInterval(() => {
-        setSeconds((seconds: number) => {
+        setSeconds((seconds) => {
           --seconds;
           if (seconds <= 0) {
             setEnabled(true);

apps/web/src/utils/config.ts

@@ -4,9 +4,9 @@ function set<T>(key: string, value: T) {
   window.localStorage.setItem(key, JSON.stringify(value));
 }
 
-function get<T>(key: string, def?: T) {
+function get<T>(key: string, def?: T): T {
   const value = window.localStorage.getItem(key);
-  if (!value) return def;
+  if (!value && def) return def;
 
   return tryParse(value);
 }

apps/web/src/utils/hooks.js

@@ -1,26 +0,0 @@
-import { useEffect, useState } from "react";
-import config from "./config";
-
-export const usePersistentState = (key, def) => {
-  let defState = config.get(key, def);
-  const [value, setValue] = useState(defState);
-
-  useEffect(() => {
-    config.set(key, value);
-  }, [key, value]);
-
-  return [value, setValue];
-};
-
-const memory = {};
-export const useSessionState = (key, def) => {
-  const [value, setValue] = useState(
-    memory[key] === undefined ? def : memory[key]
-  );
-
-  useEffect(() => {
-    memory[key] = value;
-  }, [key, value]);
-
-  return [value, setValue];
-};

apps/web/src/views/home.js

@@ -4,7 +4,7 @@ import ListContainer from "../components/list-container";
 import NotesPlaceholder from "../components/placeholders/notesplacholder";
 import { db } from "../common/db";
 import { hashNavigate } from "../navigation";
-import useNavigate from "../utils/use-navigate";
+import useNavigate from "../hooks/use-navigate";
 
 function Home() {
   useStore((store) => store.nonce);

apps/web/src/views/notebooks.js

@@ -3,7 +3,7 @@ import ListContainer from "../components/list-container";
 import { useStore, store } from "../stores/notebook-store";
 import NotebooksPlaceholder from "../components/placeholders/notebooks-placeholder";
 import { hashNavigate } from "../navigation";
-import useNavigate from "../utils/use-navigate";
+import useNavigate from "../hooks/use-navigate";
 
 function Notebooks() {
   useNavigate("notebooks", () => store.refresh());

apps/web/src/views/settings.js

@@ -26,7 +26,7 @@ import {
 import { SUBSCRIPTION_STATUS } from "../common/constants";
 import { createBackup, importBackup, verifyAccount } from "../common";
 import { db } from "../common/db";
-import { usePersistentState } from "../utils/hooks";
+import { usePersistentState } from "../hooks/use-persistent-state";
 import dayjs from "dayjs";
 import ScrollContainer from "../components/scroll-container";
 import { showToast } from "../utils/toast";

apps/web/src/views/tags.js

@@ -2,7 +2,7 @@ import React from "react";
 import ListContainer from "../components/list-container";
 import { useStore, store } from "../stores/tag-store";
 import TagsPlaceholder from "../components/placeholders/tags-placeholder";
-import useNavigate from "../utils/use-navigate";
+import useNavigate from "../hooks/use-navigate";
 
 function Tags() {
   useNavigate("tags", () => store.refresh());

apps/web/src/views/trash.js

@@ -6,7 +6,7 @@ import { useStore, store } from "../stores/trash-store";
 import TrashPlaceholder from "../components/placeholders/trash-placeholder";
 import { showToast } from "../utils/toast";
 import { Text } from "rebass";
-import useNavigate from "../utils/use-navigate";
+import useNavigate from "../hooks/use-navigate";
 import { db } from "../common/db";
 
 function Trash() {