Various fixes (#62)

* fix(message): remove - from default message
* chore(deps): npm audit fix
* chore(esm): upgrade dependancies and change code for ESM
* feat(auth): redirect login pages when logged in
* feat(auth): hard link if users get stuck on auth page
* fix(dashboard): mobile not showing
* chore(deps): add updated package-lock.json file
* chore(instructions): add more

closes #43
fixes #60
fixes #61

.eslintrc.json

@@ -2,7 +2,6 @@
   "env": {
     "node": true,
     "browser": true,
-    "commonjs": true,
     "es2021": true
   },
   "extends": [

.nvmrc

@@ -1 +1 @@
-14.18.2
+14.18.2

components/Alert/Alert.js

@@ -2,9 +2,9 @@ import { useEffect, useState } from "react";
 import Image from "next/image";
 import classNames from "classnames";
 
-import { getMoney } from "../../helpers/get-money";
-import { supabase } from "../../helpers/supabase-clientside";
-import logger from "../../helpers/logger";
+import { getMoney } from "../../helpers/get-money.js";
+import { supabase } from "../../helpers/supabase-clientside.js";
+import logger from "../../helpers/logger.js";
 
 import styles from "./Alert.module.css";
 
@@ -83,7 +83,7 @@ export default function Alert({
       return settings.messageText;
     }
 
-    return "{type} of {amount} from {from_name} - {message}";
+    return "{type} of {amount} from {from_name} {message}";
   }
 
   const MESSAGE_FUNCTION_MAP = {

components/AlertsList/AlertsList.js

@@ -4,8 +4,8 @@ import AutoSizer from "react-virtualized-auto-sizer";
 import { formatDistance } from "date-fns";
 import classNames from "classnames";
 
-import useAPI from "../../hooks/useAPI";
-import { getMoney } from "../../helpers/get-money";
+import useAPI from "../../hooks/useAPI.js";
+import { getMoney } from "../../helpers/get-money.js";
 
 import styles from "./AlertsList.module.css";
 
@@ -143,7 +143,7 @@ export default function AlertsList({
             [styles["AlertsList--popped-out"]]: isPoppedOut,
           })}
           ref={listRef}
-          height={height - (isPoppedOut ? 0 : 200)}
+          height={height}
           itemCount={alerts.length}
           itemSize={getRowHeight}
           estimatedItemSize={MIN_ROW_HEIGHT}

components/Navigation/Navigation.js

@@ -3,9 +3,9 @@ import Image from "next/image";
 import { useRouter } from "next/router";
 import classNames from "classnames";
 
-import { useTheme } from "../ThemeProvider";
-import { useUser } from "../UserProvider";
-import Button from "../Button/Button";
+import { useTheme } from "../ThemeProvider/ThemeProvider.js";
+import { useUser } from "../UserProvider/UserProvider.js";
+import Button from "../Button/Button.js";
 
 import styles from "./Navigation.module.css";
 

components/SettingsCustomSound/SettingsCustomSound.js

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
 
-import logger from "../../helpers/logger";
-import { supabase } from "../../helpers/supabase-clientside";
+import logger from "../../helpers/logger.js";
+import { supabase } from "../../helpers/supabase-clientside.js";
 
-import Button from "../Button/Button";
+import Button from "../Button/Button.js";
 
 const BYTES_500_K = 500 * 1000;
 

components/UserProvider/UserProvider.js

@@ -6,10 +6,10 @@ import React, {
 } from "react";
 import useSWR from "swr";
 
-import { supabase } from "../../helpers/supabase-clientside";
+import { supabase } from "../../helpers/supabase-clientside.js";
 
-import { fetcher } from "../../hooks/useAPI";
-import logger from "../../helpers/logger";
+import { fetcher } from "../../hooks/useAPI.js";
+import logger from "../../helpers/logger.js";
 
 export const UserContext = createContext({
   user: null,

helpers/redirect-auth-pages.js

@@ -1,4 +1,4 @@
-import { supabase } from "./supabase-clientside";
+import { supabase } from "./supabase-clientside.js";
 
 export function getRedirectURL(pathName) {
   return `/login?redirectTo=${encodeURIComponent(pathName)}`;
@@ -22,3 +22,22 @@ export async function redirectAuthedPages(req) {
   // If there is a user, return it.
   return { props: { authorisedUser } };
 }
+
+export async function redirectToDashboardPageIfLoggedIn(req) {
+  const { user: authorisedUser } =
+    await supabase.auth.api.getUserByCookie(req);
+
+  if (authorisedUser) {
+    // If user, redirect to dashboard.
+    return {
+      props: {},
+      redirect: {
+        destination: "/dashboard",
+        permanent: false,
+      },
+    };
+  }
+
+  // if not logged in continue as normal
+  return { props: {} };
+}

hooks/useAPI.js

@@ -1,6 +1,6 @@
 import useSWR from "swr";
 
-import { useUser } from "../components/UserProvider";
+import { useUser } from "../components/UserProvider/UserProvider.js";
 
 export async function fetcher(route, token) {
   const response = await fetch(route, {

hooks/useAlertQueue.js

@@ -1,7 +1,7 @@
 import { useEffect, useReducer } from "react";
 
-import { supabase } from "../helpers/supabase-clientside";
-import logger from "../helpers/logger";
+import { supabase } from "../helpers/supabase-clientside.js";
+import logger from "../helpers/logger.js";
 
 const ALERT_DURATION_MS = 5000;
 const ALERT_DELAY_LENGTH_MS = 1000;

next.config.js

@@ -1,6 +1,8 @@
-module.exports = {
+const nextConfig = {
   reactStrictMode: true,
   headers: {
-    "Permissions-Policy": "interest-cohort=()"
-  }
-}
+    "Permissions-Policy": "interest-cohort=()",
+  },
+};
+
+module.exports = nextConfig;