Linter setup and fixes

existentialcoder · existentialcoder · commit 86ca964ad6fc · 2024-12-18T02:26:32.000+01:00
diff --git a/.env.development.local b/.env.development.local
diff --git a/client/.env.local b/client/.env.local
@@ -0,0 +1 @@
+VITE_APP_API_BASE_URL='http://localhost:8001/api'
diff --git a/client/.env.production b/client/.env.production
@@ -0,0 +1 @@
+VITE_APP_API_BASE_URL='/api'
diff --git a/client/.gitignore b/client/.gitignore
diff --git a/client/index.html b/client/index.html
@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/client/package.json b/client/package.json
@@ -5,32 +5,34 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "yarn lint --fix && tsc && vite build --mode production",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
+  "engines": {
+    "node": ">=20"
+  },
   "dependencies": {
     "antd": "^5.12.7",
     "autoprefixer": "^10.4.16",
     "compare-versions": "^6.1.0",
-    "postcss": "^8.4.32",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.1",
-    "react-toggle-dark-mode": "^1.1.1",
-    "tailwindcss": "^3.4.0"
+    "react-toggle-dark-mode": "^1.1.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
-    "@typescript-eslint/eslint-plugin": "^6.14.0",
-    "@typescript-eslint/parser": "^6.14.0",
+    "@typescript-eslint/eslint-plugin": "^7.4.0",
+    "@typescript-eslint/parser": "^7.4.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.55.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "sass": "^1.69.6",
-    "typescript": "^5.2.2",
+    "strip-ansi": "^7.1.0",
+    "typescript": "^5.4.3",
     "vite": "^5.0.8",
     "vite-plugin-svgr": "^4.2.0"
   }
diff --git a/client/postcss.config.js b/client/postcss.config.js
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -15,18 +15,20 @@ import './App.scss';
 
 import NopalmLogo from './logos/NopalmLogo';
 
-import SocialMediaLinks from './components/SocialMediaLinks';
+// import SocialMediaLinks from './components/SocialMediaLinks';
 
-import { AppProps } from './helpers/types';
+import { AppProps, SettingsResultProps } from './helpers/types';
 
-const { Header, Content, Footer, Sider } = Layout;
+const { Header, Content, Sider } = Layout;
 
 type MenuItem = Required<MenuProps>['items'][number];
 
-const routesToPages: any = {
+const routesToPages: {
+ [key: string]: (settings: SettingsResultProps, reflectUpdatedUserSettings?: () => void ) => JSX.Element
+} = {
   project_details: (settings) => <ProjectDetails settings={settings} />,
   packages: (settings) => <Packages settings={settings} />,
-  settings: (settings, reflectUpdatedUserSettings) => <Settings settings={settings}  reflectUpdatedUserSettings={reflectUpdatedUserSettings}/>,
+  settings: (settings, reflectUpdatedUserSettings) => <Settings settings={settings} reflectUpdatedUserSettings={reflectUpdatedUserSettings}/>,
 };
 
 function getMenuItem(
diff --git a/client/src/api/Dataservice.ts b/client/src/api/Dataservice.ts
@@ -1,8 +1,4 @@
-// Testing
-const API_BASE_URL = 'http://localhost:8001/api';
-
-// Actual
-// const API_BASE_URL = '/api'
+const API_BASE_URL = import.meta.env.VITE_APP_API_BASE_URL;
 
 import { InstalledPackageProps, ProjectDetailsProps, SettingsResultProps } from '../helpers/types';
 
diff --git a/client/src/components/PackageCard.tsx b/client/src/components/PackageCard.tsx
@@ -43,15 +43,12 @@ const PackageCard: React.FC<PackageCardProps> = (props: PackageCardProps) => {
             try {
                 await Dataservice.updatePackage(props.package.name, props.package.installed_version, checked);
 
-                debugger;
                 setIsDevDepToggleLoading(false);
 
                 props.reRenderPackages();
 
                 return notify('Updated the package', `Successfully updated the package as ${checked ? 'dev' : 'normal'} dependency`, 'success');
             } catch (ex) {
-                console.log('imma here')
-                debugger;
                 const msg = `Error updating the package ${props.package.name}`;
 
                 console.error(msg, ex);
@@ -64,48 +61,36 @@ const PackageCard: React.FC<PackageCardProps> = (props: PackageCardProps) => {
         props.modifyListOfPackagesToInstall(props.package.name, selectedVersionToInstall, isDevPackage)
     }
 
-    function uninstallPackage(packageName: string) {
-        return new Promise(async (resolve, reject) => {
-            try {
-                await Dataservice.uninstallPackage(packageName);
-
-                props.reRenderPackages();
-
-                notify('Uninstalled Package', `Successfully uninstalled package ${packageName}`, 'success');
+    async function uninstallPackage(packageName: string) {
+        try {
+            await Dataservice.uninstallPackage(packageName);
 
-                resolve('success');
-            } catch (ex) {
-                const msg = `Error uninstalling package ${packageName}`;
+            props.reRenderPackages();
 
-                console.error(msg, ex);
+            return notify('Uninstalled Package', `Successfully uninstalled package ${packageName}`, 'success');
+        } catch (ex) {
+            const msg = `Error uninstalling package ${packageName}`;
 
-                notify('Uninstalling Package', msg, 'error');
+            console.error(msg, ex);
 
-                reject('failure')
-            }
-        });
+            return notify('Uninstalling Package', msg, 'error');
+        }
     }
 
-    function updatePackage(packageName: string, version: string) {
-        return new Promise(async (resolve, reject) => {
-            try {
-                await Dataservice.updatePackage(packageName, version, undefined);
+    async function updatePackage(packageName: string, version: string) {
+        try {
+            await Dataservice.updatePackage(packageName, version, undefined);
 
-                props.reRenderPackages();
+            props.reRenderPackages();
 
-                resolve(
-                    notify('Updgraded the package', `Successfully upgraded package ${packageName}`, 'success')
-                );
-            } catch (ex) {
-                const msg = `Error upgrading package ${packageName} to the latest version`;
+            return notify('Updgraded the package', `Successfully upgraded package ${packageName}`, 'success');
+        } catch (ex) {
+            const msg = `Error upgrading package ${packageName} to the latest version`;
 
-                console.error(msg, ex);
+            console.error(msg, ex);
 
-                reject(
-                    notify('Upgrading the package', msg, 'error')
-                )
-            }
-        });
+            return notify('Upgrading the package', msg, 'error');
+        }
     }
 
     return (
diff --git a/client/src/components/PackageExplorer.tsx b/client/src/components/PackageExplorer.tsx
@@ -46,9 +46,9 @@ const PackageExplorer: React.FC<PackageExplorerProps> = forwardRef((props: Packa
         setEmptyPackageList(result.length === 0);
 
         setSearchResults(result);
-    };
+    }
 
-    const onSearch: SearchProps['onSearch'] = async (value, _e, info) => {
+    const onSearch: SearchProps['onSearch'] = async (value) => {
         setSearchQuery(value);
         setSearchClicked(true);
         setSearchResultsLoading(true);
@@ -87,8 +87,8 @@ const PackageExplorer: React.FC<PackageExplorerProps> = forwardRef((props: Packa
     }
 
     const onSaveClickHandler = async () => {
-        await Promise.all(listOfPackagesToInstall.map
-            (pkg => Dataservice.installPackage(pkg.name, pkg.version_to_install || '', pkg.is_dev || false))
+        await Promise.all(listOfPackagesToInstall.map(
+            pkg => Dataservice.installPackage(pkg.name, pkg.version_to_install || '', pkg.is_dev || false))
         );
 
         notify('Installed Packages', 'Successfully installed list of packages', 'success');
diff --git a/client/src/components/SocialMediaLinks.tsx b/client/src/components/SocialMediaLinks.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 
 import './SocialMediaLinks.scss';
 
-import {
+import Icon, {
     GithubFilled, FacebookFilled, LinkedinFilled
 } from '@ant-design/icons';
 
 type SocialMediaData = {
-    icon: any,
+    icon: typeof Icon,
     label: string,
     linkSrc: string
 };
diff --git a/client/src/helpers/types.ts b/client/src/helpers/types.ts
@@ -63,7 +63,7 @@ export type QuestionObject = {
 
 export interface QuestionProps {
     questionObj: QuestionObject;
-    answerHandler: (value: string, options: any, questionName: string) => void;
+    answerHandler: (value: string, options: Option[], questionName: string) => void;
 }
 
 export interface PackageProps {
@@ -83,8 +83,8 @@ export interface InstalledPackageProps extends PackageProps {
 interface PackageExplorerPropsInterface {
     projectName: string,
     projectDescription: string,
-    reRenderPackages: Function,
-    setIsPackagesSaveLoading: Function
+    reRenderPackages: () => void,
+    setIsPackagesSaveLoading: () => void
 }
 
 export interface PackageExplorerRef {
@@ -97,13 +97,13 @@ export type PackageExplorerProps = PackageExplorerPropsInterface & React.RefAttr
 
 export interface PackageCardProps {
     loading: boolean,
-    reRenderPackages: Function,
+    reRenderPackages: () => void,
     package: InstalledPackageProps,
     installed: boolean,
     versions: string[],
     accentColor: AccentColors,
     isPackageSelectedToInstall?: boolean,
-    modifyListOfPackagesToInstall: Function,
+    modifyListOfPackagesToInstall: () => void,
 }
 
 export interface ProjectDetailsProps {
diff --git a/client/src/index.tsx b/client/src/index.tsx
@@ -0,0 +1,5 @@
+import ReactDOM from 'react-dom/client';
+
+import Main from './main';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<Main />);
diff --git a/client/src/logos/BrandLogo.tsx b/client/src/logos/BrandLogo.tsx
@@ -20,7 +20,7 @@ const imageLogos = {
 
 interface BrandLogoProps {
     name: string,
-};
+}
 
 const BrandLogo: React.FC<BrandLogoProps> = (props: BrandLogoProps) => {
     return (
diff --git a/client/src/logos/NopalmLogo.tsx b/client/src/logos/NopalmLogo.tsx
@@ -5,8 +5,8 @@ import NopalmLogoImg from '../assets/nopalm.svg';
 import './NopalmLogo.scss';
 
 interface NopalmLogoProps {
-    includeTitle?: Boolean
-};
+    includeTitle?: boolean
+}
 
 const NopalmLogo: React.FC<NopalmLogoProps> = (props: NopalmLogoProps) => {
     return (
diff --git a/client/src/main.tsx b/client/src/main.tsx
@@ -1,7 +1,5 @@
 import React, { useState, useEffect } from 'react';
 
-import ReactDOM from 'react-dom/client';
-
 import { BrowserRouter } from 'react-router-dom';
 
 import * as colors from '@ant-design/colors';
@@ -17,6 +15,7 @@ import Dataservice from './api/Dataservice.ts';
 const { defaultAlgorithm, darkAlgorithm, getDesignToken } = theme;
 
 const Main: React.FC = () => {
+  console.log(import.meta.env.REACT_APP_API_BASE_URL)
   const [globalSettings, setGlobalSettings] = useState('');
 
   const [isDark, setIsDark] = useState<boolean>(false);
@@ -99,4 +98,4 @@ const Main: React.FC = () => {
   )
 };
 
-ReactDOM.createRoot(document.getElementById('root')!).render(<Main />);
+export default Main;
diff --git a/client/yarn.lock b/client/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+VITE_APP_API_BASE_URL='http://localhost:8001/api'`