refactor: use function declaration everywhere

2025-12-23 15:09:33 +01:00 · 2020-03-26 11:58:10 +05:00
parent 617c7b04c4
commit 88bd6e99ab
42 changed files with 434 additions and 451 deletions
--- a/apps/web/src/app.js
+++ b/apps/web/src/app.js
@@ -19,7 +19,7 @@ import { useStore as useAppStore } from "./stores/app-store";
 import { useStore as useUserStore } from "./stores/user-store";
 import Animated from "./components/animated";

-const NavMenuItem = props => {
+function NavMenuItem(props) {
  const [isLoading, setIsLoading] = useState(false);
  const isSyncing = useUserStore(store => store.isSyncing);
  useEffect(() => {
@@ -74,7 +74,7 @@ const NavMenuItem = props => {
      </Flex>
    </Button>
  );
-};
+}

 function App() {
  const [selectedKey, setSelectedKey] = usePersistentState(
@@ -244,5 +244,4 @@ function App() {
    </ThemeProvider>
  );
 }
-
 export default App;
--- a/apps/web/src/components/button/index.js
+++ b/apps/web/src/components/button/index.js
@@ -3,7 +3,7 @@ import { Flex, Text } from "rebass";
 import { ButtonPressedStyle } from "../../utils/theme";
 import { useTheme } from "emotion-theming";

-const Button = props => {
+function Button(props) {
  const theme = useTheme();
  return (
    <Flex
@@ -35,5 +35,5 @@ const Button = props => {
      </Text>
    </Flex>
  );
-};
+}
 export default Button;
--- a/apps/web/src/components/checkbox/index.js
+++ b/apps/web/src/components/checkbox/index.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { Flex, Text } from "rebass";
 import { Switch } from "@rebass/forms";

-const CheckBox = props => {
+function CheckBox(props) {
  const [checked, setChecked] = useState(props.checked || false);
  useEffect(() => {
    setChecked(props.checked);
@@ -31,6 +31,5 @@ const CheckBox = props => {
      <Switch checked={checked} />
    </Flex>
  );
-};
-
+}
 export default CheckBox;
--- a/apps/web/src/components/dialogs/add-notebook-dialog.js
+++ b/apps/web/src/components/dialogs/add-notebook-dialog.js
@@ -6,7 +6,7 @@ import Dialog, { showDialog } from "./dialog";
 import { showSnack } from "../snackbar";
 import { store } from "../../stores/notebook-store";

-export default class AddNotebookDialog extends React.Component {
+class AddNotebookDialog extends React.Component {
  MAX_AVAILABLE_HEIGHT = window.innerHeight * 0.3;
  title = "";
  description = "";
@@ -183,7 +183,7 @@ export default class AddNotebookDialog extends React.Component {
  }
 }

-export const showEditNoteDialog = notebook => {
+export function showEditNoteDialog(notebook) {
  return showDialog(perform => (
    <AddNotebookDialog
      isOpen={true}
@@ -198,4 +198,6 @@ export const showEditNoteDialog = notebook => {
      }}
    />
  ));
-};
+}
+
+export default AddNotebookDialog;
--- a/apps/web/src/components/dialogs/confirm.js
+++ b/apps/web/src/components/dialogs/confirm.js
@@ -22,7 +22,7 @@ function Confirm(props) {
  );
 }

-export const confirm = (icon, title, message) => {
+export function confirm(icon, title, message) {
  return showDialog(perform => (
    <Confirm
      title={title}
@@ -32,4 +32,4 @@ export const confirm = (icon, title, message) => {
      onYes={() => perform(true)}
    />
  ));
-};
+}
--- a/apps/web/src/components/dialogs/dialog.js
+++ b/apps/web/src/components/dialogs/dialog.js
@@ -104,7 +104,7 @@ export default class Dialog extends React.Component {
  }
 }

-export const showDialog = dialog => {
+export function showDialog(dialog) {
  const root = document.getElementById("dialogContainer");
  const perform = (resolve, result) => {
    ReactDOM.unmountComponentAtNode(root);
@@ -117,4 +117,4 @@ export const showDialog = dialog => {
    });
  }
  return Promise.reject("No element with id 'dialogContainer'");
-};
+}
--- a/apps/web/src/components/dialogs/logindialog.js
+++ b/apps/web/src/components/dialogs/logindialog.js
@@ -6,7 +6,7 @@ import Dialog, { showDialog } from "./dialog";
 import { showSignUpDialog } from "./signupdialog";
 import { useStore } from "../../stores/user-store";

-const LoginDialog = props => {
+function LoginDialog(props) {
  const [username, setUsername] = useState();
  const [password, setPassword] = useState();
  const [errorMessage, setErrorMessage] = useState();
@@ -94,7 +94,7 @@ const LoginDialog = props => {
      }
    />
  );
-};
+}

 export const showLogInDialog = () => {
  return showDialog(perform => <LoginDialog onClose={() => perform()} />);
--- a/apps/web/src/components/dialogs/move-note-dialog.js
+++ b/apps/web/src/components/dialogs/move-note-dialog.js
@@ -6,7 +6,7 @@ import { db } from "../../common";
 import Dialog, { showDialog } from "./dialog";
 import { toTitleCase } from "../../utils/string";

-export default class MoveDialog extends React.Component {
+class MoveDialog extends React.Component {
  history = [];
  _inputRef;
  selectedNotebook;
@@ -197,7 +197,7 @@ export default class MoveDialog extends React.Component {
  }
 }

-export const showMoveNoteDialog = noteIds => {
+export function showMoveNoteDialog(noteIds) {
  return showDialog(perform => (
    <MoveDialog
      noteIds={noteIds}
@@ -205,4 +205,4 @@ export const showMoveNoteDialog = noteIds => {
      onMove={() => perform(true)}
    />
  ));
-};
+}
--- a/apps/web/src/components/dialogs/password-dialog.js
+++ b/apps/web/src/components/dialogs/password-dialog.js
@@ -81,7 +81,7 @@ function getDialogData(type) {
  }
 }

-export const showPasswordDialog = (type, validate) => {
+export function showPasswordDialog(type, validate) {
  const { title, icon, positiveButtonText } = getDialogData(type);
  return showDialog(perform => (
    <PasswordDialog
@@ -93,4 +93,4 @@ export const showPasswordDialog = (type, validate) => {
      onDone={() => perform(true)}
    />
  ));
-};
+}
--- a/apps/web/src/components/dialogs/signupdialog.js
+++ b/apps/web/src/components/dialogs/signupdialog.js
@@ -5,7 +5,7 @@ import * as Icon from "../icons";
 import Dialog, { showDialog } from "./dialog";
 import { db } from "../../common";

-const SignUpDialog = props => {
+function SignUpDialog(props) {
  const [username, setUserName] = useState();
  const [email, setEmail] = useState();
  const [password, setPassword] = useState();
@@ -105,8 +105,8 @@ const SignUpDialog = props => {
      }
    />
  );
-};
+}

-export const showSignUpDialog = () => {
+export function showSignUpDialog() {
  return showDialog(perform => <SignUpDialog onClose={() => perform()} />);
-};
+}
--- a/apps/web/src/components/dialogs/topicdialog.js
+++ b/apps/web/src/components/dialogs/topicdialog.js
@@ -6,7 +6,7 @@ import { db } from "../../common";
 import Dialog, { showDialog } from "./dialog";
 import { store } from "../../stores/notebook-store";

-const TopicDialog = props => {
+function TopicDialog(props) {
  const [topic, setTopic] = useState();
  return (
    <Dialog
@@ -31,9 +31,9 @@ const TopicDialog = props => {
      negativeButton={{ text: "Cancel", onClick: props.onNo }}
    />
  );
-};
+}

-export const showTopicDialog = notebook => {
+export function showTopicDialog(notebook) {
  return showDialog(perform => (
    <TopicDialog
      title={"Topic"}
@@ -49,4 +49,4 @@ export const showTopicDialog = notebook => {
      }}
    />
  ));
-};
+}
--- a/apps/web/src/components/editor/titlebox.js
+++ b/apps/web/src/components/editor/titlebox.js
@@ -5,7 +5,7 @@ import { Flex } from "rebass";
 import * as Icon from "../icons";
 import { store as appStore } from "../../stores/app-store";

-export default class TitleBox extends React.Component {
+class TitleBox extends React.Component {
  state = { isFocusMode: false };

  inputRef;
@@ -70,3 +70,4 @@ export default class TitleBox extends React.Component {
    );
  }
 }
+export default TitleBox;
--- a/apps/web/src/components/icons/index.js
+++ b/apps/web/src/components/icons/index.js
@@ -4,7 +4,7 @@ import * as Icons from "@mdi/js";
 import { useTheme } from "emotion-theming";
 import Animated from "../animated";

-const Icon = ({ name, size = 24, color = "icon", rotate }) => {
+function Icon({ name, size = 24, color = "icon", rotate }) {
  const theme = useTheme();
  return (
    <MDIIcon
@@ -14,10 +14,11 @@ const Icon = ({ name, size = 24, color = "icon", rotate }) => {
      spin={rotate}
    />
  );
-};
+}

-const createIcon = name => {
-  return props => (
+function createIcon(name) {
+  return function(props) {
+    return (
      <Animated.Box
        sx={props.sx}
        height={(props.size || 24) + "px"}
@@ -28,7 +29,8 @@ const createIcon = name => {
        <Icon name={name} {...props} />
      </Animated.Box>
    );
-};
+  };
+}

 export const Plus = createIcon(Icons.mdiPlus);
 export const Minus = createIcon(Icons.mdiMinus);
--- a/apps/web/src/components/list-container/index.js
+++ b/apps/web/src/components/list-container/index.js
@@ -7,7 +7,7 @@ import { Virtuoso as List } from "react-virtuoso";
 import { useStore as useSearchStore } from "../../stores/searchstore";
 import { useStore as useAppStore } from "../../stores/app-store";

-const ListContainer = props => {
+function ListContainer(props) {
  const setSearchContext = useSearchStore(store => store.setSearchContext);
  const shouldSelectAll = useAppStore(store => store.shouldSelectAll);
  const setSelectedItems = useAppStore(store => store.setSelectedItems);
@@ -68,6 +68,5 @@ const ListContainer = props => {
      )}
    </Flex>
  );
-};
-
+}
 export default ListContainer;
--- a/apps/web/src/components/list-item/index.js
+++ b/apps/web/src/components/list-item/index.js
@@ -9,7 +9,8 @@ import {
 } from "../../stores/app-store";
 import useContextMenu from "../../utils/useContextMenu";

-const ActionsMenu = props => (
+function ActionsMenu(props) {
+  return (
    <Menu
      id={props.id}
      menuItems={props.menuItems}
@@ -17,7 +18,8 @@ const ActionsMenu = props => (
      style={props.style}
      closeMenu={props.closeMenu}
    />
-);
+  );
+}

 function selectMenuItem(isSelected, toggleSelection) {
  return {
@@ -51,7 +53,7 @@ const ItemSelector = ({ isSelected, toggleSelection }) => {
  );
 };

-const ListItem = props => {
+function ListItem(props) {
  const [parentRef, closeContextMenu] = useContextMenu(
    `contextMenu${props.index}`
  );
@@ -232,6 +234,5 @@ const ListItem = props => {
      )}
    </Flex>
  );
-};
-
+}
 export default ListItem;
--- a/apps/web/src/components/note/index.js
+++ b/apps/web/src/components/note/index.js
@@ -13,7 +13,8 @@ import { db } from "../../common";
 import { useTheme } from "emotion-theming";

 const dropdownRefs = [];
-const menuItems = (note, index, context) => [
+function menuItems(note, context) {
+  return [
    {
      title: note.notebook ? "Move" : "Add to",
      onClick: async () => {
@@ -85,7 +86,8 @@ const menuItems = (note, index, context) => [
        });
      }
    }
-];
+  ];
+}

 function Note(props) {
  const { item, index } = props;
@@ -135,7 +137,7 @@ function Note(props) {
      }
      pinned={props.pinnable && note.pinned}
      menuData={note}
-      menuItems={menuItems(note, index, props.context)}
+      menuItems={menuItems(note, props.context)}
      dropdownRefs={dropdownRefs}
    />
  );
--- a/apps/web/src/components/notebook/index.js
+++ b/apps/web/src/components/notebook/index.js
@@ -5,8 +5,8 @@ import { store } from "../../stores/notebook-store";
 import { showEditNoteDialog } from "../dialogs/addnotebookdialog";

 const dropdownRefs = [];
-
-const menuItems = (notebook, index) => [
+function menuItems(notebook, index) {
+  return [
    {
      title: notebook.pinned ? "Unpin" : "Pin",
      onClick: () => store.getState().pin(notebook, index)
@@ -20,9 +20,10 @@ const menuItems = (notebook, index) => [
      color: "red",
      onClick: () => store.getState().delete(notebook.id, index)
    }
-];
+  ];
+}

-export default class Notebook extends React.Component {
+class Notebook extends React.Component {
  shouldComponentUpdate(nextProps) {
    const prevItem = this.props.item;
    const nextItem = nextProps.item;
@@ -87,3 +88,4 @@ export default class Notebook extends React.Component {
    );
  }
 }
+export default Notebook;
--- a/apps/web/src/components/placeholders/favorites-placeholder.js
+++ b/apps/web/src/components/placeholders/favorites-placeholder.js
@@ -3,7 +3,7 @@ import React from "react";
 import * as Icon from "../icons";
 import { Flex, Text } from "rebass";

-const FavoritesPlaceholder = props => {
+function FavoritesPlaceholder() {
  return (
    <>
      <Flex
@@ -60,6 +60,5 @@ const FavoritesPlaceholder = props => {
      </Text>
    </>
  );
-};
-
+}
 export default FavoritesPlaceholder;
--- a/apps/web/src/components/placeholders/notebooks-placeholder.js
+++ b/apps/web/src/components/placeholders/notebooks-placeholder.js
@@ -2,7 +2,7 @@ import { motion } from "framer-motion";
 import React from "react";
 import { Box, Flex, Text } from "rebass";

-const NotebooksPlaceholder = props => {
+function NotebooksPlaceholder() {
  return (
    <>
      <Flex
@@ -151,6 +151,6 @@ const NotebooksPlaceholder = props => {
      </Text>
    </>
  );
-};
+}

 export default NotebooksPlaceholder;
--- a/apps/web/src/components/placeholders/notesplacholder.js
+++ b/apps/web/src/components/placeholders/notesplacholder.js
@@ -9,7 +9,7 @@ var parameters = {
  opacity: "0.5"
 };

-const NotesPlaceholder = props => {
+function NotesPlaceholder() {
  return (
    <>
      <Flex
@@ -127,6 +127,5 @@ const NotesPlaceholder = props => {
      </Text>
    </>
  );
-};
-
+}
 export default NotesPlaceholder;
--- a/apps/web/src/components/placeholders/tags-placeholder.js
+++ b/apps/web/src/components/placeholders/tags-placeholder.js
@@ -40,7 +40,7 @@ const animatedTags = [
  }
 ];

-const TagsPlaceholder = props => {
+function TagsPlaceholder() {
  return (
    <>
      <Flex
@@ -98,6 +98,5 @@ const TagsPlaceholder = props => {
      </Text>
    </>
  );
-};
-
+}
 export default TagsPlaceholder;
--- a/apps/web/src/components/properties/index.js
+++ b/apps/web/src/components/properties/index.js
@@ -9,7 +9,7 @@ import { objectMap } from "../../utils/object";
 import { useStore as useAppStore } from "../../stores/app-store";
 import { motion } from "framer-motion";

-const Properties = props => {
+function Properties() {
  const pinned = useStore(store => store.session.pinned);
  const favorite = useStore(store => store.session.favorite);
  const locked = useStore(store => store.session.locked);
@@ -217,6 +217,5 @@ const Properties = props => {
      </>
    )
  );
-};
-
+}
 export default React.memo(Properties);
--- a/apps/web/src/components/search/index.js
+++ b/apps/web/src/components/search/index.js
@@ -7,7 +7,7 @@ import "./search.css";
 import RootNavigator from "../../navigation/navigators/rootnavigator";

 var query = "";
-const Search = props => {
+function Search(props) {
  const search = useStore(store => store.search);
  return (
    <Flex
@@ -51,5 +51,5 @@ const Search = props => {
      </Box>
    </Flex>
  );
-};
+}
 export default Search;
--- a/apps/web/src/components/snackbar/index.js
+++ b/apps/web/src/components/snackbar/index.js
@@ -22,7 +22,8 @@ export function showSnack(message, icon = undefined) {
  }
 }

-const Snackbar = props => (
+function Snackbar(props) {
+  return (
    <ThemeProvider>
      <Flex
        id="snackbar"
@@ -47,4 +48,5 @@ const Snackbar = props => (
        <Text mx={1}>{props.message}</Text>
      </Flex>
    </ThemeProvider>
-);
+  );
+}
--- a/apps/web/src/components/topic/index.js
+++ b/apps/web/src/components/topic/index.js
@@ -9,7 +9,7 @@ const menuItems = [
  }
 ];

-const Topic = ({ item, index, onClick }) => {
+function Topic({ item, index, onClick }) {
  const topic = item;
  return (
    <ListItem
@@ -24,6 +24,5 @@ const Topic = ({ item, index, onClick }) => {
      menuItems={menuItems}
    />
  );
-};
-
+}
 export default Topic;
--- a/apps/web/src/navigation/index.js
+++ b/apps/web/src/navigation/index.js
@@ -7,7 +7,7 @@ import * as Icon from "../components/icons";
 import { ThemeProvider } from "../utils/theme";
 import { useStore, store } from "../stores/app-store";

-export default class Navigator {
+class Navigator {
  constructor(root, routes, options = {}) {
    this.routes = routes;
    this.root = root;
@@ -98,8 +98,9 @@ export default class Navigator {
    };
  }
 }
+export default Navigator;

-const NavigationContainer = props => {
+function NavigationContainer(props) {
  const openSideMenu = useStore(store => store.openSideMenu);
  const isSelectionMode = useStore(store => store.isSelectionMode);
  const exitSelectionMode = useStore(store => store.exitSelectionMode);
@@ -192,4 +193,4 @@ const NavigationContainer = props => {
      )}
    </ThemeProvider>
  );
-};
+}
--- a/apps/web/src/navigation/navigators/nbnavigator.js
+++ b/apps/web/src/navigation/navigators/nbnavigator.js
@@ -13,7 +13,9 @@ const routes = {
  }),
  ...createRoute("notes", Notes, { options: SelectionModeOptions.NotesOptions })
 };
+
 const NotebookNavigator = new Navigator("NotebookNavigator", routes, {
  backButtonEnabled: true
 });
+
 export default NotebookNavigator;
--- a/apps/web/src/navigation/navigators/rootnavigator.js
+++ b/apps/web/src/navigation/navigators/rootnavigator.js
@@ -80,4 +80,5 @@ const RootNavigator = new Navigator(
    backButtonEnabled: false
  }
 );
+
 export default RootNavigator;
--- a/apps/web/src/navigation/navigators/settingnavigator.js
+++ b/apps/web/src/navigation/navigators/settingnavigator.js
@@ -10,7 +10,9 @@ const routes = {
  ...createRoute("about", TOS),
  ...createRoute("privacy", TOS)
 };
+
 const SettingsNavigator = new Navigator("SettingsNavigator", routes, {
  backButtonEnabled: true
 });
+
 export default SettingsNavigator;
--- a/apps/web/src/navigation/navigators/tagnavigator.js
+++ b/apps/web/src/navigation/navigators/tagnavigator.js
@@ -7,7 +7,9 @@ const routes = {
  ...createRoute("tags", Tags, { title: "Tags" }),
  ...createRoute("notes", Notes, { options: SelectionModeOptions.NotesOptions })
 };
+
 const TagNavigator = new Navigator("TagNavigator", routes, {
  backButtonEnabled: true
 });
+
 export default TagNavigator;
--- a/apps/web/src/utils/css.js
+++ b/apps/web/src/utils/css.js
@@ -13,6 +13,7 @@ export function addCss(rule) {
  else css.appendChild(document.createTextNode(rule));
  head.insertBefore(css, getRootStylesheet());
 }
+
 function getRootStylesheet() {
  for (let sty of document.getElementsByTagName("style")) {
    if (sty.innerHTML.includes("#root")) {
--- a/apps/web/src/utils/sample.js
+++ b/apps/web/src/utils/sample.js
@@ -1,10 +0,0 @@
-export const Sample = {
-  text:
-    " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do" +
-    "eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad" +
-    "minim veniam, quis nostrud exercitation ullamco laboris nisi ut" +
-    "aliquip ex ea commodo consequat. Duis aute irure dolor in" +
-    "reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla" +
-    "pariatur. Excepteur sint occaecat cupidatat non proident, sunt in" +
-    "culpa qui officia deserunt mollit anim id est laborum."
-};
--- a/apps/web/src/utils/theme.js
+++ b/apps/web/src/utils/theme.js
@@ -3,8 +3,8 @@ import { ThemeProvider as EmotionThemeProvider } from "emotion-theming";
 import { store, useStore } from "../stores/app-store";
 import { addCss } from "./css";

-const colorsLight = primary =>
-  makeTheme({
+function colorsLight(primary) {
+  return makeTheme({
    primary,
    background: "white",
    accent: "white",
@@ -17,8 +17,10 @@ const colorsLight = primary =>
    secondary: "white",
    icon: "#3b3b3b"
  });
-const colorsDark = primary =>
-  makeTheme({
+}
+
+function colorsDark(primary) {
+  return makeTheme({
    primary,
    background: "#1f1f1f",
    accent: "#000",
@@ -31,12 +33,14 @@ const colorsDark = primary =>
    secondary: "black",
    icon: "#dbdbdb"
  });
+}

 const shadowsDark = {
  1: "0 0 0px 0px #00000000",
  2: "0 0 8px 0px #55555544",
  3: "0 0 20px 0px #55555599"
 };
+
 const shadowsLight = {
  1: "0 0 20px 0px #1790F3aa",
  2: "0 0 8px 0px #00000047",
@@ -44,7 +48,8 @@ const shadowsLight = {
  4: "0 0 5px 0px #00000017"
 };

-const theme = (colors, shadows) => ({
+function theme(colors, shadows) {
+  return {
    breakpoints: ["480px", "1000px", "1000px"],
    colors: colors,
    space: [0, 5, 10, 12, 15],
@@ -203,7 +208,8 @@ const theme = (colors, shadows) => ({
      }
    },
    shadows: shadows
-});
+  };
+}

 function makeTheme({
  primary,
@@ -242,20 +248,19 @@ function makeTheme({
  };
 }

-const getTheme = (type, accent) =>
-  type === "dark"
+function getTheme(type, accent) {
+  return type === "dark"
    ? theme(colorsDark(accent), shadowsDark)
    : theme(colorsLight(accent), shadowsLight);
+}

 var currentTheme = window.localStorage.getItem("theme") || "light";
 var currentAccent = window.localStorage.getItem("accent") || "#0560ff";

-export const ThemeProvider = props => {
+export function ThemeProvider(props) {
  let theme = useStore(store => store.theme);
-
  theme = theme.colors ? theme : getTheme(currentTheme, currentAccent);
  addCss(cssTheme(theme));
-
  return (
    <EmotionThemeProvider theme={theme}>
      {props.children instanceof Function
@@ -263,25 +268,27 @@ export const ThemeProvider = props => {
        : props.children}
    </EmotionThemeProvider>
  );
-};
+}

-export const changeAccent = accent => {
+export function changeAccent(accent) {
  currentAccent = accent;
  window.localStorage.setItem("accent", accent);
  const theme = getTheme(currentTheme, currentAccent);
  addCss(cssTheme(theme));
  store.getState().setTheme(theme);
-};
+}

-export const changeTheme = () => {
+export function changeTheme() {
  currentTheme = currentTheme === "dark" ? "light" : "dark";
  window.localStorage.setItem("theme", currentTheme);
  const theme = getTheme(currentTheme, currentAccent);
  addCss(cssTheme(theme));
  store.getState().setTheme(theme);
-};
+}

-export const isDarkTheme = () => currentTheme === "dark";
+export function isDarkTheme() {
+  return currentTheme === "dark";
+}

 export const ButtonPressedStyle = {
  ":active": {
@@ -289,15 +296,15 @@ export const ButtonPressedStyle = {
  }
 };

-const cssTheme = theme => {
+function cssTheme(theme) {
  let root = ":root {";
  for (let color in theme.colors) {
    root += `--${color}: ${theme.colors[color]};`;
  }
  return root + "}";
-};
+}

-const hexToRGB = (hex, alpha = 1) => {
+function hexToRGB(hex, alpha = 1) {
  let parseString = hex;
  if (hex.startsWith("#")) {
    parseString = hex.slice(1, 7);
@@ -312,4 +319,4 @@ const hexToRGB = (hex, alpha = 1) => {
    return null;
  }
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-};
+}
--- a/apps/web/src/utils/time.js
+++ b/apps/web/src/utils/time.js
@@ -7,6 +7,7 @@ const days = [
  "Friday",
  "Saturday"
 ];
+
 const months = [
  "Jan",
  "Feb",
@@ -21,7 +22,8 @@ const months = [
  "Nov",
  "Dec"
 ];
-export const timeConverter = timestamp => {
+
+export function timeConverter(timestamp) {
  if (!timestamp) return;
  var d = new Date(timestamp), // Convert the passed timestamp to milliseconds
    yyyy = d.getFullYear(),
@@ -60,4 +62,4 @@ export const timeConverter = timestamp => {
    ampm;

  return time;
-};
+}
--- a/apps/web/src/views/General.js
+++ b/apps/web/src/views/General.js
@@ -1,15 +0,0 @@
-import React from "react";
-import { Flex, Button } from "rebass";
-
-function General() {
-  return (
-    <Flex flexDirection="column" flex="1 1 auto">
-      <Flex flexDirection="column" flex="1 1 auto">
-        <Button variant="setting">Reset to Factory Settings</Button>
-        <Button variant="setting">Delete all Notes</Button>
-      </Flex>
-    </Flex>
-  );
-}
-
-export default General;
--- a/apps/web/src/views/Notebooks.js
+++ b/apps/web/src/views/Notebooks.js
@@ -7,7 +7,7 @@ import ListContainer from "../components/list-container";
 import { useStore, store } from "../stores/notebook-store";
 import NotebooksPlaceholder from "../components/placeholders/notebooks-placeholder";

-const Notebooks = props => {
+function Notebooks(props) {
  const [open, setOpen] = useState(false);
  useEffect(() => store.getState().refresh(), []);
  const notebooks = useStore(state => state.notebooks);
@@ -59,9 +59,9 @@ const Notebooks = props => {
      />
    </>
  );
-};
+}

-const NotebooksContainer = () => {
+function NotebooksContainer() {
  useEffect(() => {
    const NotebookNavigator = require("../navigation/navigators/nbnavigator")
      .default;
@@ -76,6 +76,6 @@ const NotebooksContainer = () => {
      flex="1 1 auto"
    />
  );
-};
+}

 export { NotebooksContainer, Notebooks };
--- a/apps/web/src/views/Notes.js
+++ b/apps/web/src/views/Notes.js
@@ -5,7 +5,7 @@ import { useStore } from "../stores/editor-store";
 import { useStore as useNotesStore } from "../stores/note-store";
 import { DEFAULT_CONTEXT } from "../common";

-const Notes = props => {
+function Notes(props) {
  const newSession = useStore(store => store.newSession);
  const selectedNotes = useNotesStore(store => store.selectedNotes);
  const selectedContext = useNotesStore(store => store.selectedContext);
@@ -31,6 +31,5 @@ const Notes = props => {
      }}
    />
  );
-};
-
+}
 export default Notes;
--- a/apps/web/src/views/Settings.js
+++ b/apps/web/src/views/Settings.js
@@ -6,7 +6,7 @@ import { changeTheme, isDarkTheme, changeAccent } from "../utils/theme";
 import { useTheme } from "emotion-theming";
 import { useStore as useUserStore } from "../stores/user-store";

-const Settings = props => {
+function Settings(props) {
  const [check, setCheck] = useState(isDarkTheme());
  const theme = useTheme();
  const user = useUserStore(store => store.user);
@@ -176,9 +176,9 @@ const Settings = props => {
      </Button>
    </Flex>
  );
-};
+}

-const SettingsContainer = props => {
+function SettingsContainer() {
  useEffect(() => {
    const SettingsNavigator = require("../navigation/navigators/settingnavigator")
      .default;
@@ -193,7 +193,7 @@ const SettingsContainer = props => {
      flex="1 1 auto"
    />
  );
-};
+}

 const Titles = {
  general: "General",
--- a/apps/web/src/views/TOS.js
+++ b/apps/web/src/views/TOS.js
@@ -1,15 +0,0 @@
-import React from "react";
-import { Text, Flex } from "rebass";
-import { Sample } from "../utils/sample";
-
-function TOS() {
-  return (
-    <Flex flexDirection="column" flex="1 1 auto">
-      <Flex flexDirection="column" flex="1 1 auto">
-        <Text p="20px">{Sample.text}</Text>
-      </Flex>
-    </Flex>
-  );
-}
-
-export default TOS;
--- a/apps/web/src/views/Tags.js
+++ b/apps/web/src/views/Tags.js
@@ -6,16 +6,18 @@ import { useStore as useNotesStore } from "../stores/note-store";
 import { useStore, store } from "../stores/tag-store";
 import TagsPlaceholder from "../components/placeholders/tags-placeholder";

-const TagNode = ({ title }) => (
+function TagNode({ title }) {
+  return (
    <Text as="span" variant="title">
      <Text as="span" color="primary">
        {"#"}
      </Text>
      {title}
    </Text>
-);
+  );
+}

-const Tags = props => {
+function Tags(props) {
  const setSelectedContext = useNotesStore(store => store.setSelectedContext);
  const tags = useStore(store => store.tags);
  useEffect(() => {
@@ -47,9 +49,9 @@ const Tags = props => {
      placeholder={TagsPlaceholder}
    />
  );
-};
+}

-const TagsContainer = () => {
+function TagsContainer() {
  useEffect(() => {
    const TagNavigator = require("../navigation/navigators/tagnavigator")
      .default;
@@ -60,6 +62,6 @@ const TagsContainer = () => {
  return (
    <Flex className="TagNavigator" flexDirection="column" flex="1 1 auto" />
  );
-};
+}

 export { Tags, TagsContainer };
--- a/apps/web/src/views/Topics.js
+++ b/apps/web/src/views/Topics.js
@@ -6,7 +6,7 @@ import { useStore as useNoteStore } from "../stores/note-store";
 import { useStore as useNbStore } from "../stores/notebook-store";
 import { showTopicDialog } from "../components/dialogs/topicdialog";

-const Topics = props => {
+function Topics(props) {
  const setSelectedContext = useNoteStore(store => store.setSelectedContext);
  const setSelectedNotebookTopics = useNbStore(
    store => store.setSelectedNotebookTopics
@@ -55,6 +55,5 @@ const Topics = props => {
      }}
    />
  );
-};
-
+}
 export default Topics;
--- a/apps/web/src/views/Trash.js
+++ b/apps/web/src/views/Trash.js
@@ -9,7 +9,8 @@ import { useStore, store } from "../stores/trash-store";
 import { toTitleCase } from "../utils/string";

 const dropdownRefs = [];
-const menuItems = (item, index) => [
+function menuItems(item, index) {
+  return [
    {
      title: "Restore",
      onClick: () => store.getState().restore(item.id, index)
@@ -29,7 +30,8 @@ const menuItems = (item, index) => [
        });
      }
    }
-];
+  ];
+}

 function Trash() {
  useEffect(() => store.getState().refresh(), []);
@@ -78,5 +80,4 @@ function Trash() {
    />
  );
 }
-
 export default Trash;