enhancement: second commit moving loader functions to their own file.

eslint.config.js

@@ -7,11 +7,7 @@ import tseslint from "typescript-eslint";
 export default tseslint.config(
     { ignores: ["dist"] },
     {
-        extends: [
-            js.configs.recommended,
-            ...tseslint.configs.recommended,
-            "plugin:prettier/recommended",
-        ],
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
         files: ["**/*.{ts,tsx}"],
         languageOptions: {
             ecmaVersion: 2020,
@@ -27,6 +23,7 @@ export default tseslint.config(
                 "warn",
                 { allowConstantExport: true },
             ],
+            "@typescript-eslint/no-explicit-any": "off",
         },
     },
 );

package.json

@@ -22,7 +22,7 @@
         "fabricjs-react": "^2.0.0",
         "file-saver": "^2.0.5",
         "flowbite-react": "^0.10.2",
-        "framer-motion": "^11.11.1",
+        "framer-motion": "^11.11.3",
         "i18next": "^23.15.2",
         "i18next-browser-languagedetector": "^8.0.0",
         "i18next-http-backend": "^2.6.2",
@@ -45,18 +45,19 @@
         "@testing-library/react": "^16.0.1",
         "@types/crypto-js": "^4.2.2",
         "@types/file-saver": "^2.0.7",
-        "@types/mocha": "^10.0.8",
-        "@types/node": "^22.7.4",
+        "@types/mocha": "^10.0.9",
+        "@types/node": "^22.7.5",
         "@types/react": "^18.3.11",
         "@types/react-dom": "^18.3.0",
         "@types/react-router-dom": "^5.3.3",
         "@types/testing-library__jest-dom": "^5.14.9",
         "@types/yargs": "^17.0.33",
-        "@typescript-eslint/parser": "^8.8.0",
+        "@typescript-eslint/eslint-plugin": "^8.8.1",
+        "@typescript-eslint/parser": "^8.8.1",
         "@vitejs/plugin-react": "^4.3.2",
         "autoprefixer": "^10.4.20",
         "babel-jest": "^29.7.0",
-        "eslint": "^9.12.0",
+        "eslint": "^8.57.1",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-prettier": "^5.2.1",
         "eslint-plugin-react": "^7.37.1",
@@ -75,9 +76,10 @@
         "rollup-plugin-visualizer": "^5.12.0",
         "tailwindcss": "^3.4.13",
         "typescript": "^5.6.2",
-        "typescript-eslint": "^8.8.0",
+        "typescript-eslint": "^8.8.1",
         "vite": "^5.4.8",
         "vite-plugin-compression": "^0.5.1",
+        "vite-plugin-eslint": "^1.8.1",
         "vite-plugin-minify": "^2.0.0",
         "vite-plugin-sitemap": "^0.7.1",
         "vite-plugin-tailwind-purgecss": "^0.3.3"

src/components/DebugConsole.tsx

@@ -101,9 +101,9 @@ const DebugConsole = () => {
 
     // Keeping it fresh in the console
     useEffect(() => {
-        if (!DEBUG) {
-            console.clear();
-        }
+        // if (!DEBUG) {
+        //     console.clear();
+        // }
 
         // Debug console
         const items = {

src/components/Feed.tsx

@@ -95,6 +95,7 @@ const Feed: FC = (): ReactElement => {
         };
 
         fetchInitialPosts();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     if (loading) return (

src/components/Menu.tsx

@@ -93,7 +93,7 @@ const Menu: React.FC = () => {
                         path.style.transition = 'fill 1s ease-in-out';
                         path.style.fill = randomColour;
                     }
-                    letters?.forEach((letter, _index) => {
+                    letters?.forEach((letter) => {
                         let randomLetterColourIndex = Math.floor(Math.random() * colourList.length);
                         while (randomLetterColourIndex === randomColourIndex) {
                             randomLetterColourIndex = Math.floor(Math.random() * colourList.length);
@@ -125,7 +125,7 @@ const Menu: React.FC = () => {
                 }
             };
         }
-    }, [theme]);
+    }, [colourList, theme]);
 
     return (
         <div>

src/components/Post.tsx

@@ -66,7 +66,7 @@ const Post: React.FC<PostProps> = ({ id, entryId, author, posted, image, width,
                 encryptionEnabled: false,
             });
         }
-    }, [id, image, author, postState, setPostState]);
+    }, [id, image, author, postState, setPostState, width, height]);
 
     // const handleSaveVisibility = () => {
     //     if (postState?.encryptionEnabled) {

src/hooks/useCreateBinaryFeedImage.ts

@@ -19,7 +19,7 @@ import { useMutation } from "@apollo/client";
 import { CREATE_BINARYFEEDIMAGE } from "../api/api";
 
 interface FmFileResponse {
-    file: any;
+    file: File;
     data: {
         id: string;
         createdOn: string;

src/main.tsx

@@ -11,15 +11,15 @@ import router from './routes.tsx';
 const readApiHttpLink = createHttpLink({
   uri: import.meta.env.VITE_READ_API_URL,
 });
-
+console.log("readApiHttpLink", readApiHttpLink)
 const mainApiHttpLink = createHttpLink({
   uri: import.meta.env.VITE_MAIN_API_URL,
 });
-
+console.log("mainApiHttpLink", mainApiHttpLink)
 const manageApiHttpLink = createHttpLink({
   uri: import.meta.env.VITE_MANAGE_API_URL,
 });
-
+console.log("manageApiHttpLink", manageApiHttpLink)
 const cache = new InMemoryCache({
   typePolicies: {
     Query: {

src/routes/Error.tsx

@@ -15,7 +15,7 @@
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { json, LoaderFunction, useRouteError } from "react-router-dom";
+import { useRouteError } from "react-router-dom";
 
 interface RouteError {
     statusText?: string;
@@ -36,8 +36,4 @@ const Error = () => {
     );
 };
 
-export const errorLoader: LoaderFunction = async () => {
-    return json({});
-}
-
 export default Error;

src/routes/Faq.tsx

@@ -19,8 +19,6 @@
 import { faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { json, LoaderFunction } from "react-router-dom";
-
 /**
  * The Faq component displays the frequently asked questions.
  *
@@ -107,8 +105,4 @@ const Faq: React.FC = () => {
     )
 }
 
-export const faqLoader: LoaderFunction = async () => {
-    return json({});
-}
-
 export default Faq

src/routes/PostPage.tsx

@@ -78,9 +78,7 @@ const PostPage: React.FC = () => {
     if (error) {
         return <div>Error: {error.message}</div>;
     }
-    if (data) {
 
-    }
     if (data && data.getBinaryImagePost && data.getBinaryImagePost.data) {
         const { id, entryId, author, posted, image, width, height, key } = data.getBinaryImagePost.data;
         return (

src/routes/Root.tsx

@@ -15,7 +15,7 @@
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { json, LoaderFunction, Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 
 /**
  * The main component for the root route.
@@ -34,8 +34,4 @@ const Root = () => {
     );
 }
 
-export const rootLoader: LoaderFunction = async () => {
-    return json({});
-}
-
 export default Root;

src/utils/encryption.ts

@@ -54,7 +54,9 @@ function handleDecrypt(
             setDecryptedText(originalText);
             decryptionSuccessful = true;
         }
-    } catch (error) {}
+    } catch (error) {
+        throw new Error(`Error decrypting: ${error}`);
+    }
 
     // Only update the UI if decryption was successful
     if (decryptionSuccessful) {

src/utils/loaders.ts

@@ -17,6 +17,10 @@
 
 import { json, LoaderFunction, LoaderFunctionArgs } from "react-router-dom";
 
+export const rootLoader: LoaderFunction = async () => {
+    return json({});
+};
+
 const appLoader: LoaderFunction = async () => {
     return json({});
 };
@@ -39,4 +43,12 @@ export const aboutLoader: LoaderFunction = async () => {
     return json({});
 };
 
+export const errorLoader: LoaderFunction = async () => {
+    return json({});
+};
+
+export const faqLoader: LoaderFunction = async () => {
+    return json({});
+};
+
 export { appLoader };