Packages page UI

Author: existentialcoder

.gitignore

@@ -105,3 +105,5 @@ dist
 
 # React client - git ignore
 /public
+
+client/src/assets/*.identifier

client/package.json

@@ -12,6 +12,7 @@
   "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",

client/src/App.tsx

@@ -35,10 +35,10 @@ function getMenuItem(
 ): MenuItem {
   return {
     key,
-    icon, 
+    icon,
     children,
     label,
-  } as MenuItem;  
+  } as MenuItem;
 }
 
 const items: MenuItem[] = [
@@ -59,40 +59,54 @@ const App: React.FC = () => {
     const currentPath = window.location.pathname.slice(1);
 
     const pathToSet = currentPath === '' ? 'project_details' : currentPath;
-  
+
     setCurrentActiveRoute(pathToSet);
   }, []);
 
   return (
-      <Layout style={{ minHeight: '100vh' }}>
-      <Sider  collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
+    <Layout hasSider style={{ minHeight: '100vh', maxHeight: '100vh', overflow: 'scroll' }}>
+      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}
+        style={{ overflow: 'auto', height: '100vh', position: 'sticky', top: 0, left: 0 }}>
         <Menu style={{ minHeight: '92vh' }} defaultSelectedKeys={['project_details']}
-        selectedKeys={[currentActiveRoute]} 
-        onSelect={(item) => setCurrentActiveRoute(item.key)}
-        items={items} />
+          selectedKeys={[currentActiveRoute]}
+          onSelect={(item) => setCurrentActiveRoute(item.key)}
+          items={items} />
       </Sider>
       <Layout style={{ minHeight: '100vh' }}>
-        <Header style={{ display: 'flex' }}>
+        <Header style={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 1,
+          width: '100%',
+          display: 'flex',
+          alignItems: 'center',
+        }}>
           <NopalmLogo includeTitle />
         </Header>
-        <Content style={{ margin: '0 10px' }}>
+        <Content style={{ margin: '0 10px', padding: 0, overflow: 'initial' }}>
           <div
             style={{
               padding: 24,
               borderRadius: borderRadiusLG,
             }}
           >
-            { routesToPages[currentActiveRoute] }
+            {routesToPages[currentActiveRoute]}
           </div>
         </Content>
-        <Footer style={{ textAlign: 'center' }}>
+        {/* <Footer style={{
+          position: 'fixed',
+          // left: 200,
+          bottom: 0,
+          width: '100%',
+          textAlign: 'center'
+        }}>
           <div className="footer-container">
             <div className='copyright'>
               ©{new Date().getFullYear()} | Created by Shravan Balasubramanian | Contact
             </div>
             <div className="contact"> <SocialMediaLinks /> </div>
           </div>
-        </Footer>
+        </Footer> */}
       </Layout>
     </Layout>
   );

client/src/api/Dataservice.ts

@@ -4,6 +4,8 @@ const API_BASE_URL = 'http://localhost:8001/api';
 // Actual
 // const API_BASE_URL = '/api'
 
+import { InstalledPackageProps } from '../helpers/types';
+
 async function getProjectDetails(): Promise<Object> {
     const urlPath = 'project';
 
@@ -14,8 +16,77 @@ async function getProjectDetails(): Promise<Object> {
     return project;
 }
 
+async function getInstalledPackages(): Promise<InstalledPackageProps[]> {
+    const urlPath = 'packages/installed';
+
+    const result = await fetch(`${API_BASE_URL}/${urlPath}`);
+
+    const { packages } = await result.json();
+
+    return packages;
+}
+
+async function installPackage(packageName: string, versionToInstall: string) {
+    const urlPath = 'packages/installed';
+
+    const result = await fetch(`${API_BASE_URL}/${urlPath}`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            package: {
+                name: packageName,
+                version: versionToInstall
+            }
+        })
+    });
+
+    return result;
+}
+
+async function upgradePackage(packageName: string, versionToUpdate: string) {
+    const urlPath = 'packages/upgrade';
+
+    const result = await fetch(`${API_BASE_URL}/${urlPath}`, {
+        method: 'PUT',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            package: {
+                name: packageName,
+                version: versionToUpdate,
+                latest: true  
+            }
+        })
+    });
+
+    return result;
+}
+
+async function uninstallPackage(packageName: string) {
+    const urlPath = 'packages/uninstall';
+
+    const result = await fetch(`${API_BASE_URL}/${urlPath}`, {
+        method: 'DELETE',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            package: { name: packageName }
+        })
+    });
+
+    return result;
+}
+
 const Dataservice = {
-    getProjectDetails
+    getProjectDetails,
+    getInstalledPackages,
+    installPackage,
+    upgradePackage,
+    uninstallPackage
 };
 
 export default Dataservice;

client/src/assets/cli.png

@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=about:internet

client/src/assets/cli.png:Zone.Identifier

@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=about:internet

client/src/assets/frontend_build_tool.png

@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=about:internet