FileFighter · open-schnick · Jan 23, 2022 · Jan 22, 2022 · Jan 22, 2022
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+prettier --config .prettierrc --write src '!**/*.{scss,css,json}'
+git add -A src/
diff --git a/.husky/pre-push b/.husky/pre-push
@@ -1,5 +1,5 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npm test  -- --watchAll=false
 eslint --max-warnings 0 src --ext .ts --ext .tsx --cache
+npm test  -- --watchAll=false
diff --git a/.prettierrc b/.prettierrc
@@ -2,15 +2,12 @@
   "useTabs": false,
   "printWidth": 80,
   "tabWidth": 4,
+  "semi": false,
   "singleQuote": false,
-
-  "trailingComma": "none",
-
-  "jsxBracketSameLine": false,
-
+  "jsxSingleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always",
   "parser": "typescript",
-
-  "noSemi": true,
-
-  "rcVerbose": true
 }
diff --git a/src/__tests__/storybook.test.ts b/src/__tests__/storybook.test.ts
@@ -1,2 +1,2 @@
-import initStoryshots from "@storybook/addon-storyshots";
-initStoryshots();
+import initStoryshots from "@storybook/addon-storyshots"
+initStoryshots()
diff --git a/src/assets/images/icons/reactSvgIcons/SymbolFile.tsx b/src/assets/images/icons/reactSvgIcons/SymbolFile.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from "react"
 //https://reactsvgicons.com/bootstrap
 
 export function FileEarmarkIcon(props: React.SVGProps<SVGSVGElement>) {
@@ -13,7 +13,7 @@ export function FileEarmarkIcon(props: React.SVGProps<SVGSVGElement>) {
             <path d="M4 0h5.5v1H4a1 1 0 00-1 1v12a1 1 0 001 1h8a1 1 0 001-1V4.5h1V14a2 2 0 01-2 2H4a2 2 0 01-2-2V2a2 2 0 012-2z" />
             <path d="M9.5 3V0L14 4.5h-3A1.5 1.5 0 019.5 3z" />
         </svg>
-    );
+    )
 }
 
 export function FileEarmarkMusicIcon(props: React.SVGProps<SVGSVGElement>) {
@@ -32,7 +32,7 @@ export function FileEarmarkMusicIcon(props: React.SVGProps<SVGSVGElement>) {
                 d="M9.757 5.67A1 1 0 0111 6.64v1.75l-2 .5v3.61c0 .495-.301.883-.662 1.123C7.974 13.866 7.499 14 7 14c-.5 0-.974-.134-1.338-.377-.36-.24-.662-.628-.662-1.123s.301-.883.662-1.123C6.026 11.134 6.501 11 7 11c.356 0 .7.068 1 .196V6.89a1 1 0 01.757-.97l1-.25z"
             />
         </svg>
-    );
+    )
 }
 
 export function FileEarmarkPlayIcon(props: React.SVGProps<SVGSVGElement>) {
@@ -48,7 +48,7 @@ export function FileEarmarkPlayIcon(props: React.SVGProps<SVGSVGElement>) {
             <path d="M4 0h5.5v1H4a1 1 0 00-1 1v12a1 1 0 001 1h8a1 1 0 001-1V4.5h1V14a2 2 0 01-2 2H4a2 2 0 01-2-2V2a2 2 0 012-2z" />
             <path d="M9.5 3V0L14 4.5h-3A1.5 1.5 0 019.5 3z" />
         </svg>
-    );
+    )
 }
 
 export function FileEarmarkTextIcon(props: React.SVGProps<SVGSVGElement>) {
@@ -67,7 +67,7 @@ export function FileEarmarkTextIcon(props: React.SVGProps<SVGSVGElement>) {
                 d="M5 11.5a.5.5 0 01.5-.5h2a.5.5 0 010 1h-2a.5.5 0 01-.5-.5zm0-2a.5.5 0 01.5-.5h5a.5.5 0 010 1h-5a.5.5 0 01-.5-.5zm0-2a.5.5 0 01.5-.5h5a.5.5 0 010 1h-5a.5.5 0 01-.5-.5z"
             />
         </svg>
-    );
+    )
 }
 
 export function FileEarmarkImageIcon(props: React.SVGProps<SVGSVGElement>) {
@@ -88,7 +88,7 @@ export function FileEarmarkImageIcon(props: React.SVGProps<SVGSVGElement>) {
                 d="M6.502 7a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"
             />
         </svg>
-    );
+    )
 }
 
 export function FileEarmarkRichtextIcon(props: React.SVGProps<SVGSVGElement>) {
@@ -107,7 +107,7 @@ export function FileEarmarkRichtextIcon(props: React.SVGProps<SVGSVGElement>) {
                 d="M4.5 12.5A.5.5 0 015 12h3a.5.5 0 010 1H5a.5.5 0 01-.5-.5zm0-2A.5.5 0 015 10h6a.5.5 0 010 1H5a.5.5 0 01-.5-.5zm1.639-3.708l1.33.886 1.854-1.855a.25.25 0 01.289-.047l1.888.974V8.5a.5.5 0 01-.5.5H5a.5.5 0 01-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 100-1.5.75.75 0 000 1.5z"
             />
         </svg>
-    );
+    )
 }
 
 export function FileEarmarkLock2Icon(props: React.SVGProps<SVGSVGElement>) {
@@ -126,7 +126,7 @@ export function FileEarmarkLock2Icon(props: React.SVGProps<SVGSVGElement>) {
             <path d="M4 0h5.5v1H4a1 1 0 00-1 1v12a1 1 0 001 1h8a1 1 0 001-1V4.5h1V14a2 2 0 01-2 2H4a2 2 0 01-2-2V2a2 2 0 012-2z" />
             <path d="M9.5 3V0L14 4.5h-3A1.5 1.5 0 019.5 3z" />
         </svg>
-    );
+    )
 }
 
 export function FileEarmarkZipIcon(props: React.SVGProps<SVGSVGElement>) {
@@ -146,7 +146,7 @@ export function FileEarmarkZipIcon(props: React.SVGProps<SVGSVGElement>) {
             />
             <path d="M6 1h1.5v1H6zM5 2h1.5v1H5zm1 1h1.5v1H6zM5 4h1.5v1H5zm1 1h1.5v1H6V5z" />
         </svg>
-    );
+    )
 }
 
 export function FileEarmarkCodeIcon(props: React.SVGProps<SVGSVGElement>) {
@@ -165,7 +165,7 @@ export function FileEarmarkCodeIcon(props: React.SVGProps<SVGSVGElement>) {
                 d="M8.646 6.646a.5.5 0 01.708 0l2 2a.5.5 0 010 .708l-2 2a.5.5 0 01-.708-.708L10.293 9 8.646 7.354a.5.5 0 010-.708zm-1.292 0a.5.5 0 00-.708 0l-2 2a.5.5 0 000 .708l2 2a.5.5 0 00.708-.708L5.707 9l1.647-1.646a.5.5 0 000-.708z"
             />
         </svg>
-    );
+    )
 }
 
 export function FileEarmarkPDFIcon(props: React.SVGProps<SVGSVGElement>) {
@@ -184,7 +184,7 @@ export function FileEarmarkPDFIcon(props: React.SVGProps<SVGSVGElement>) {
                 d="M7 5a.5.5 0 01.5.5v.634l.549-.317a.5.5 0 11.5.866L8 7l.549.317a.5.5 0 11-.5.866L7.5 7.866V8.5a.5.5 0 01-1 0v-.634l-.549.317a.5.5 0 11-.5-.866L6 7l-.549-.317a.5.5 0 01.5-.866l.549.317V5.5A.5.5 0 017 5zm-2 5.5a.5.5 0 01.5-.5h5a.5.5 0 010 1h-5a.5.5 0 01-.5-.5zm0 2a.5.5 0 01.5-.5h5a.5.5 0 010 1h-5a.5.5 0 01-.5-.5z"
             />
         </svg>
-    );
+    )
 }
 
 export function FileEarmarkBinaryIcon(props: React.SVGProps<SVGSVGElement>) {
@@ -199,7 +199,7 @@ export function FileEarmarkBinaryIcon(props: React.SVGProps<SVGSVGElement>) {
             <path d="M4 0h5.5v1H4a1 1 0 00-1 1v12a1 1 0 001 1h8a1 1 0 001-1V4.5h1V14a2 2 0 01-2 2H4a2 2 0 01-2-2V2a2 2 0 012-2z" />
             <path d="M9.5 3V0L14 4.5h-3A1.5 1.5 0 019.5 3zM5.526 14.09c.976 0 1.524-.79 1.524-2.205 0-1.412-.548-2.203-1.524-2.203-.978 0-1.526.79-1.526 2.203 0 1.415.548 2.206 1.526 2.206zm-.832-2.205c0-1.05.29-1.612.832-1.612.358 0 .607.247.733.721L4.7 12.137a6.749 6.749 0 01-.006-.252zm.832 1.614c-.36 0-.606-.246-.732-.718l1.556-1.145c.003.079.005.164.005.249 0 1.052-.29 1.614-.829 1.614zm5.329.501v-.595H9.73V9.772h-.69l-1.19.786v.688l1.136-.747h.05v2.906h-1.18V14h3z" />
         </svg>
-    );
+    )
 }
 
 //--------------------------------------------------------------------\\
@@ -224,5 +224,5 @@ export function FolderIcon(props: React.SVGProps<SVGSVGElement>) {
                 d="M13.81 4H2.19a1 1 0 00-.996 1.09l.637 7a1 1 0 00.995.91h10.348a1 1 0 00.995-.91l.637-7A1 1 0 0013.81 4zM2.19 3A2 2 0 00.198 5.181l.637 7A2 2 0 002.826 14h10.348a2 2 0 001.991-1.819l.637-7A2 2 0 0013.81 3H2.19z"
             />
         </svg>
-    );
+    )
 }
diff --git a/src/background/api/api.ts b/src/background/api/api.ts
@@ -1,38 +1,38 @@
-import Axios from "axios";
-import { constants } from "../constants";
+import Axios from "axios"
+import { constants } from "../constants"
 
-export const hostname: string = constants.url.API_URL;
+export const hostname: string = constants.url.API_URL
 
-export const userPath: string = "/v1/users";
+export const userPath: string = "/v1/users"
 
-export const filesystemPath: string = "/v1/filesystem/";
+export const filesystemPath: string = "/v1/filesystem/"
 
 enum DataIntegrity {
     STABLE = "bg-success",
     POSSIBLE_RISK = "bg-warning",
-    UNSTABLE = "bg-danger"
+    UNSTABLE = "bg-danger",
 }
 
 interface SystemHealthData {
-    uptimeInSeconds: number;
-    userCount: number;
-    dataIntegrity: string;
-    deployment: string;
-    usedStorageInBytes: number;
-    version: string;
+    uptimeInSeconds: number
+    userCount: number
+    dataIntegrity: string
+    deployment: string
+    usedStorageInBytes: number
+    version: string
 }
 
 function callBackendHealth(): Promise<SystemHealthData> {
     return new Promise((resolve, reject) => {
         Axios.get(`${hostname}/health`)
             .then((data) => {
-                resolve(data.data);
+                resolve(data.data)
             })
             .catch((error) => {
-                reject(error);
-            });
-    });
+                reject(error)
+            })
+    })
 }
 
-export { callBackendHealth, DataIntegrity };
-export type { SystemHealthData };
+export { callBackendHealth, DataIntegrity }
+export type { SystemHealthData }
diff --git a/src/background/api/auth.ts b/src/background/api/auth.ts
@@ -1,131 +1,131 @@
-import Axios, { AxiosResponse } from "axios";
+import Axios, { AxiosResponse } from "axios"
 
-import { hostname, userPath } from "./api";
+import { hostname, userPath } from "./api"
 
-import { UserState } from "../redux/actions/userTypes";
-import store from "../redux/store";
+import { UserState } from "../redux/actions/userTypes"
+import store from "../redux/store"
 import {
     addAccessToken,
     addRefreshToken,
     checkedCookies,
-    removeTokens
-} from "../redux/actions/tokens";
-import { AccessToken, CookieStatus } from "../redux/actions/tokenTypes";
-import { deleteCookie, getCookie, setCookie } from "../methods/cookies";
-import { updateUser } from "../redux/actions/user";
-import { hashPassword } from "../methods/passwords";
+    removeTokens,
+} from "../redux/actions/tokens"
+import { AccessToken, CookieStatus } from "../redux/actions/tokenTypes"
+import { deleteCookie, getCookie, setCookie } from "../methods/cookies"
+import { updateUser } from "../redux/actions/user"
+import { hashPassword } from "../methods/passwords"
 
 // reference: https://daveceddia.com/access-redux-store-outside-react/
 
-const cookieName: string = "refreshToken";
+const cookieName: string = "refreshToken"
 
 export interface BackendLoginData {
-    tokenValue: string;
-    user: UserState;
+    tokenValue: string
+    user: UserState
 }
 
 export interface BackendAuthData {
-    tokenValue: string;
-    userId: number;
-    validUntil: number;
+    tokenValue: string
+    userId: number
+    validUntil: number
 }
 
 export const checkForCookie = () => {
-    let refreshTokenCookieValue = getCookie(cookieName);
+    let refreshTokenCookieValue = getCookie(cookieName)
     if (!refreshTokenCookieValue) {
-        return store.dispatch(checkedCookies(CookieStatus.FINISHED));
+        return store.dispatch(checkedCookies(CookieStatus.FINISHED))
     }
 
-    store.dispatch(addRefreshToken(refreshTokenCookieValue));
-    store.dispatch(checkedCookies(CookieStatus.LOADING));
-    getAccessTokenWithRefreshToken();
-};
+    store.dispatch(addRefreshToken(refreshTokenCookieValue))
+    store.dispatch(checkedCookies(CookieStatus.LOADING))
+    getAccessTokenWithRefreshToken()
+}
 
 export const loginWithUsernameAndPassword = async (
     userName: string,
     password: string,
     stayLoggedIn: boolean
 ): Promise<BackendLoginData> => {
-    console.log("[Auth] loginWithUsernameAndPassword", userName);
-    let hashed = await hashPassword(password);
+    console.log("[Auth] loginWithUsernameAndPassword", userName)
+    let hashed = await hashPassword(password)
     return new Promise<BackendLoginData>((resolve, reject) => {
         let config = {
             headers: {
-                Authorization: `Basic ${btoa(userName + ":" + hashed)}`
-            }
-        };
+                Authorization: `Basic ${btoa(userName + ":" + hashed)}`,
+            },
+        }
 
         return Axios.get<BackendLoginData>(
             hostname + userPath + "/login",
             config
         )
             .then((data: AxiosResponse<BackendLoginData>) => {
-                console.log(data.data);
-                store.dispatch(addRefreshToken(data.data.tokenValue));
-                store.dispatch(updateUser(data.data.user as UserState));
+                console.log(data.data)
+                store.dispatch(addRefreshToken(data.data.tokenValue))
+                store.dispatch(updateUser(data.data.user as UserState))
 
                 if (stayLoggedIn) {
-                    setCookie(cookieName, data.data.tokenValue, 60);
+                    setCookie(cookieName, data.data.tokenValue, 60)
                 }
 
-                getAccessTokenWithRefreshToken();
+                getAccessTokenWithRefreshToken()
             })
             .catch((error) => {
-                reject(error);
-            });
-    });
-};
+                reject(error)
+            })
+    })
+}
 
 export const getAccessTokenWithRefreshToken = () => {
-    console.log("getAccessTokenWithRefreshToken");
+    console.log("getAccessTokenWithRefreshToken")
 
-    let refreshToken: string | null = store.getState().tokens.refreshToken;
+    let refreshToken: string | null = store.getState().tokens.refreshToken
 
     let config = {
         headers: {
-            Authorization: `Bearer ${refreshToken}`
-        }
-    };
+            Authorization: `Bearer ${refreshToken}`,
+        },
+    }
 
     Axios.get<BackendAuthData>(hostname + userPath + "/auth", config)
         .then((data: AxiosResponse<BackendAuthData>) => {
-            store.dispatch(checkedCookies(CookieStatus.FINISHED));
-            setAuthHeaderToAxios(data.data.tokenValue);
+            store.dispatch(checkedCookies(CookieStatus.FINISHED))
+            setAuthHeaderToAxios(data.data.tokenValue)
 
             store.dispatch(
                 addAccessToken({
                     token: data.data.tokenValue,
-                    timestamp: data.data.validUntil
+                    timestamp: data.data.validUntil,
                 } as AccessToken)
-            );
+            )
             if (!store.getState().user.username) {
-                getOwnUserData(data.data.userId);
+                getOwnUserData(data.data.userId)
             }
         })
         .catch((error) => {
-            store.dispatch(removeTokens());
-            store.dispatch(checkedCookies(CookieStatus.FINISHED));
+            store.dispatch(removeTokens())
+            store.dispatch(checkedCookies(CookieStatus.FINISHED))
 
-            console.log(error);
+            console.log(error)
             //you probably want to notify the user, maybe with a toast or similar
-        });
-};
+        })
+}
 
 const getOwnUserData = (userId: number) => {
     Axios.get<UserState>(`${hostname}${userPath}/${userId}/info`)
         .then((response: AxiosResponse<UserState>) => {
-            store.dispatch(updateUser(response.data));
+            store.dispatch(updateUser(response.data))
         })
         .catch((error) => {
-            console.log(error);
-        });
-};
+            console.log(error)
+        })
+}
 
 export const logout = () => {
-    store.dispatch(removeTokens());
-    deleteCookie(cookieName);
-};
+    store.dispatch(removeTokens())
+    deleteCookie(cookieName)
+}
 
 function setAuthHeaderToAxios(accessToken: string) {
-    Axios.defaults.headers.common["Authorization"] = `Bearer ${accessToken}`;
+    Axios.defaults.headers.common["Authorization"] = `Bearer ${accessToken}`
 }