Introduce react redux store, existing project save and other major improvements

Author: existentialcoder

.vscode/settings.json

@@ -8,11 +8,10 @@
 
 ## RATIONALE
 
-* **No**de **P**roject **M**anager sounded very close to **Nopalm**(also sounding similar to `Napalm` :)). Hence the name!
-* I always faced difficulties in searching a relevant package while working on a node project and heavily craved for an UI since coming back and forth between browser and terminal killed productivity
-* To solve this, I thought of developing <span style="color:#12344d; font-weight: bold">Nopalm (Node Project Manager)</span> with an exciting web user interface to search, install and uninstall packages from a single place
-* You can also scaffold a **new node project**
-* This project is heavily inspired from [Vue-UI](https://cli.vuejs.org/dev-guide/ui-api.html)
+* **No**de **P**roject **M**anager sounded very close to **Nopalm**(also sounding similar to `Napalm`). Hence the name (and the logo)!
+* Having trouble in creating and managing multiple node projects during local development?
+* With `nopalm` you can create/scaffold a new project from a various defined presets, manage existing node project and its package dependencies efficiently
+* This project is heavily inspired from [Vue-UI](https://cli.vuejs.org/dev-guide/ui-api.html) and [NPM-GUI](https://www.npmjs.com/package/npm-gui) and tries to improve on these projects
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app)
 
@@ -23,9 +22,13 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
     npm i -g nopalm
     cd /path/to/target_dir && nopalm
    ```
+* Use npx to save the trouble of installing as well. In an empty or node project directory, run
+    ```shell
+    npx nopalm
+    ```
 * Visit [http://localhost:8001](http://localhost:8001) to start managing your node project
 
-## To run locally
+## To run / develop locally
 
 #### Pre installed requirements
 - **node > 10**
@@ -40,14 +43,14 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
     npm i
     ```
 **To run the development version**
-* Add this **.env** file in the `/client` folder 
-    ```shell
-    echo "REACT_APP_API_BASE_URL='http://localhost:8001'" >> .env.development.local`
-    ```
 * Run the react client
     ```shell
     cd client
-    npm run start
+    npm run dev'
+* Alias the nopalm server
+    ```shell
+    
+    ```
 * Run the server in an existing node project
     ```shell
     cd /path/to/target_node_project
@@ -74,4 +77,4 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 Once you run the node server you might find [this](lib/collection/README.md) interesting to test it using Postman
 
-## [Contributing Guidelines](.github/CONTRIBUTING.md)
+## [Contributing Guidelines](.github/CONTRIBUTING.md)

README.md

@@ -14,6 +14,7 @@
   "license": "ISC",
   "devDependencies": {
     "@types/node": "^16.11.6",
-    "typescript": "^5.4.5"
+    "typescript": "^5.4.5",
+    "ts-node": "^10.4.0"
   }
 }

addon/templates/cli/default_ts/package.json

@@ -17,6 +17,7 @@
     },
     "devDependencies": {
         "typescript": "^4.4.4",
-        "@types/node": "^16.11.6"
+        "@types/node": "^16.11.6",
+        "ts-node": "^10.4.0"
     }
 }

addon/templates/cli/oclif_ts/package.json

@@ -22,8 +22,6 @@ import NopalmLogo from './logos/NopalmLogo';
 
 // import SocialMediaLinks from './components/SocialMediaLinks';
 
-import { AppProps, SettingsResultProps } from './helpers/types';
-
 import { useDispatch, useSelector } from 'react-redux';
 
 import { AppDispatch, RootState } from './store/store';
@@ -34,14 +32,10 @@ const { Header, Content, Sider } = Layout;
 
 type MenuItem = Required<MenuProps>['items'][number];
 
-const routesToPages: {
-  [key: string]: (settings: SettingsResultProps,
-    reflectUpdatedUserSettings?: () => void,
-    routeChangeHandler?: () => void) => JSX.Element
-} = {
-  project_details: (settings) => <ProjectDetails settings={settings} />,
-  packages: (settings, reflectUpdatedUserSettings, routeChangeHandler) => <Packages settings={settings} routeChangeHandler={routeChangeHandler} />,
-  settings: (settings, reflectUpdatedUserSettings) => <Settings settings={settings} reflectUpdatedUserSettings={reflectUpdatedUserSettings} />,
+const routesToPages = {
+  project_details: () => <ProjectDetails />,
+  packages: () => <Packages />,
+  settings: () => <Settings />,
 };
 
 function getMenuItem(
@@ -64,7 +58,7 @@ const items: MenuItem[] = [
   getMenuItem('Settings', 'settings', <Link to='/settings'><SettingOutlined /></Link>),
 ];
 
-const App: React.FC<AppProps> = (props) => {
+const App: React.FC = () => {
   const [collapsed, setCollapsed] = useState(true);
 
   const { token } = theme.useToken();
@@ -113,7 +107,7 @@ const App: React.FC<AppProps> = (props) => {
               borderRadius: token.borderRadiusLG,
             }}
           >
-            {routesToPages[currentActiveRoute](props.settings, props.reflectUpdatedUserSettings, routeChangeHandler)}
+            {routesToPages[currentActiveRoute]()}
           </div>
         </Content>
         {/* <Footer style={{

client/src/App.tsx

@@ -1,8 +1,8 @@
 const API_BASE_URL = import.meta.env.VITE_APP_API_BASE_URL;
 
-import { InstalledPackageProps, ProjectDetailsProps, SettingsResultProps } from '../helpers/types';
+import { InstalledPackageProps, NewProjectDefaults, ProjectDetailsProps, SettingsResultProps } from '../helpers/types';
 
-async function getProjectDetails(): Promise<{ project: ProjectDetailsProps, isEmptyDir: boolean, defaults: object }> {
+async function getProjectDetails(): Promise<{ project: ProjectDetailsProps, isEmptyDir: boolean, defaults: NewProjectDefaults }> {
     const urlPath = 'project';
 
     const result = await fetch(`${API_BASE_URL}/${urlPath}`);
@@ -151,7 +151,7 @@ async function createNewProject(projectDetails) {
             headers: {
                 'Content-Type': 'application/json'
             },
-            body: projectDetails
+            body: JSON.stringify(projectDetails)
         })).json();
 
         return requestPromise.then((res) => {
@@ -166,6 +166,30 @@ async function createNewProject(projectDetails) {
     }
 }
 
+async function updateProject(projectDetails) {
+    const urlPath = 'project';
+
+    try {
+        const requestPromise = (await fetch(`${API_BASE_URL}/${urlPath}`, {
+            method: 'PATCH',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(projectDetails)
+        })).json();
+    
+        return requestPromise.then((res) => {
+            if (res.msg === 'Successfully updated the project') {
+                return true;
+            }
+    
+            return false;
+        });
+    } catch (ex) {
+        return false;
+    }
+}
+
 const Dataservice = {
     getProjectDetails,
     getInstalledPackages,
@@ -175,7 +199,8 @@ const Dataservice = {
     uninstallPackage,
     getSettings,
     updateSettings,
-    createNewProject
+    createNewProject,
+    updateProject
 };
 
 export default Dataservice;

client/src/api/Dataservice.ts

@@ -1,31 +1,41 @@
 import React from 'react';
 
-import * as antDColor from '@ant-design/colors'
-
 import { theme, Tooltip } from 'antd';
 
+import * as colors from '@ant-design/colors';
+
+import { useSelector } from 'react-redux';
+
 import './AccentColorPicker.scss';
 
 import { AccentColors, AccentColorPickerProps } from '../helpers/types';
 
+import { RootState } from '../store/store';
+
 const AccentColorPicker: React.FC<AccentColorPickerProps> = (props: AccentColorPickerProps) => {
     const { token } = theme.useToken();
 
+    const settings = useSelector((state: RootState) => state.app.globalSettings);
+
     return (
         <div className='accent-color-picker-container'>
             {
-                Object.keys(AccentColors).map(accentColor => (
-                    // capitalized color name
-                    <Tooltip key={accentColor} title={`${accentColor[0].toUpperCase()}${accentColor.slice(1)}`}>
-                        <div onClick={() => props.onColorChange(accentColor)}
-                        style={{
-                            background: antDColor[accentColor].primary,
-                            boxShadow: props.selectedAccentColor === accentColor ? `0 0 2px ${antDColor[accentColor].primary}` : '',
-                            border: props.selectedAccentColor === accentColor ? `3px solid ${token.colorBgContainer}` : ''
-                        }}
-                        className='accent-color' />
-                    </Tooltip>
-                ))
+                Object.keys(AccentColors).map(accentColor => {
+                    const accentColorCasted = accentColor as AccentColors;
+
+                    return (
+                        // capitalized color name
+                        <Tooltip key={accentColorCasted} title={`${accentColorCasted[0].toUpperCase()}${accentColorCasted.slice(1)}`}>
+                            <div onClick={() => props.onColorChange(accentColorCasted)}
+                            style={{
+                                background: colors[accentColorCasted].primary,
+                                boxShadow: settings.appearance.accent_color === accentColorCasted ? `0 0 2px ${colors[accentColorCasted].primary}` : '',
+                                border: settings.appearance.accent_color === accentColorCasted ? `3px solid ${token.colorBgContainer}` : ''
+                            }}
+                            className='accent-color' />
+                        </Tooltip>
+                    );
+                })
             }
         </div>
     )