From 2f8a7b8abb413f387d054de53e33d5f5cb410a3e Mon Sep 17 00:00:00 2001
From: Oliver Bunda <bundaoliver@gmail.com>
Date: Fri, 10 Nov 2023 15:10:07 +0100
Subject: [PATCH 1/2] footer refactor

---
 web/src/App.js      | 102 ++++++++++++++++++++++----------------------
 web/src/Footer2.jsx |  70 ++++++++++++++++++++++++++++++
 web/src/Sidebar.jsx |  39 +++++++++++++++++
 3 files changed, 161 insertions(+), 50 deletions(-)
 create mode 100644 web/src/Footer2.jsx
 create mode 100644 web/src/Sidebar.jsx

diff --git a/web/src/App.js b/web/src/App.js
index b211e1b..a463b7f 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -6,6 +6,7 @@ import { rootReducer } from './redux';
 import Footer from "./Footer";
 import Service from "./Service";
 import FilterBar from "./FilterBar";
+import { Footer2 } from "./Footer2";
 
 function App() {
   const capacitorClient = new CapacitorClient(
@@ -18,57 +19,58 @@ function App() {
 
   return (
     <>
-    <APIBackend capacitorClient={capacitorClient} store={store}/>
-    <StreamingBackend capacitorClient={capacitorClient} store={store}/>
-    <div className="max-w-6xl mx-auto">
-      <div className="my-16">
-        <FilterBar 
-          filters={[
-            {
-              property: "Owner",
-              value: "backend-team"
-            },
-            {
-              property: "App",
-              value: "*app*"
-            },
-          ]}
-        />
+      <APIBackend capacitorClient={capacitorClient} store={store} />
+      <StreamingBackend capacitorClient={capacitorClient} store={store} />
+      <div className="max-w-6xl mx-auto">
+        <div className="my-16">
+          <FilterBar
+            filters={[
+              {
+                property: "Owner",
+                value: "backend-team"
+              },
+              {
+                property: "App",
+                value: "*app*"
+              },
+            ]}
+          />
+        </div>
+        <div className="grid grid-cols-1 gap-y-4">
+          <Service
+            stack={{
+              deployment: {
+                pods: [
+                  { name: "xxx", status: "Running" },
+                  { name: "yyy", status: "Running" }
+                ]
+              },
+              service: {
+                name: "my-app",
+                namespace: "default"
+              }
+            }}
+            alerts={[]}
+          />
+          <Service
+            stack={{
+              deployment: {
+                pods: [
+                  { name: "zzz", status: "Running" },
+                  { name: "uuu", status: "Running" }
+                ]
+              },
+              service: {
+                name: "your-app",
+                namespace: "default"
+              }
+            }}
+            alerts={[]}
+          />
+        </div>
       </div>
-      <div className="grid grid-cols-1 gap-y-4">
-        <Service 
-          stack={{
-            deployment: {
-              pods: [
-                {name: "xxx", status: "Running"},
-                {name: "yyy", status: "Running"}
-              ]
-            },
-            service: {
-              name: "my-app",
-              namespace: "default"
-            }
-          }}
-          alerts={[]}
-        />
-        <Service 
-          stack={{
-            deployment: {
-              pods: [
-                {name: "zzz", status: "Running"},
-                {name: "uuu", status: "Running"}
-              ]
-            },
-            service: {
-              name: "your-app",
-              namespace: "default"
-            }
-          }}
-          alerts={[]}
-        />
-      </div>
-    </div>
-    <Footer store={store} />
+      {/* <Footer store={store} /> */}
+      <Footer2 store={store} />
     </>
   );
 }
diff --git a/web/src/Footer2.jsx b/web/src/Footer2.jsx
new file mode 100644
index 0000000..24563c6
--- /dev/null
+++ b/web/src/Footer2.jsx
@@ -0,0 +1,70 @@
+import { ArrowDownIcon, ArrowUpIcon } from '@heroicons/react/24/outline';
+import React, { memo, useState } from 'react';
+import { useCallback } from 'react';
+import { GitRepositories, Kustomizations } from './FluxState';
+import { SideBar } from './Sidebar';
+
+
+export const Footer2 = memo(function Footer2(props) {
+
+    const { store } = props
+
+    const [expanded, setExpanded] = useState(false);
+    const [fluxState, setFluxState] = useState(store.getState().fluxState);
+    store.subscribe(() => setFluxState(store.getState().fluxState))
+
+
+  // https://blog.stackademic.com/building-a-resizable-sidebar-component-with-persisting-width-using-react-tailwindcss-bdec28a594f
+  const navigationDefault = [
+    { name: 'Kustomizations', href: '#', count: 10 },
+    { name: 'Sources', href: '#', count: '5'},
+    { name: 'Runtime', href: '#' },
+    { name: 'Logs', href: '#' },
+  ]
+
+  const [selected, setSelected] = useState('Kustomizations');
+
+  const handlerSelect = useCallback((selectedNav) => {
+    setSelected(selectedNav);
+  },
+    [setSelected]
+  )
+
+    return (
+        <div aria-labelledby="slide-over-title" role="dialog" aria-modal="true" className={`fixed inset-x-0 bottom-0 bg-neutral-200 border-t border-neutral-300 ${expanded ? 'h-2/5' : 'h-16'}`}>
+            <div className={`flex justify-between w-full ${expanded ? '' : 'h-full'}`}>
+                <div className='h-auto w-full cursor-pointer'
+                 onClick={() => setExpanded(!expanded)}>
+
+                </div>
+                <div className='px-4 py-2'>
+                    <button
+                        onClick={() => setExpanded(!expanded)}
+                        type="button" className="ml-1 rounded-md hover:bg-white hover:text-black text-neutral-700 p-1">
+                        <span className="sr-only">{expanded ? 'Close panel' : 'Open panel'}</span>
+                        {expanded ? <ArrowDownIcon className="h-5 w-5" aria-hidden="true" /> : <ArrowUpIcon className="h-5 w-5" aria-hidden="true" />}
+                    </button>
+                </div>
+            </div>
+            {expanded &&
+                <div className="flex w-full h-full">
+                    <div className="w-48 px-4 border-r border-neutral-300">
+                            <SideBar navigation={navigationDefault} selectedMenu={handlerSelect} selected={selected}/>
+                    </div>
+
+                    <div className="w-full px-4 overflow-x-hidden overflow-y-scroll mb-20">
+                        <div className="w-full max-w-6xl mx-auto flex-col h-full">
+                            { selected === "Kustomizations" &&
+                                <Kustomizations fluxState={fluxState} />
+                            }
+                            { selected === "Sources" &&
+                                <GitRepositories gitRepositories={fluxState.gitRepositories} />
+                            }
+                        </div>
+                    </div>
+                </div>
+            }
+        </div>
+    )
+
+});
diff --git a/web/src/Sidebar.jsx b/web/src/Sidebar.jsx
new file mode 100644
index 0000000..f311cbd
--- /dev/null
+++ b/web/src/Sidebar.jsx
@@ -0,0 +1,39 @@
+import React, { memo } from 'react';
+
+
+
+export const SideBar = memo(function SideBar(props) {
+
+    function classNames(...classes) {
+        return classes.filter(Boolean).join(' ')
+    }
+
+    const { navigation, selectedMenu, selected } = props;
+
+    return (
+        <nav className="flex flex-1 flex-col" aria-label="Sidebar">
+            <ul className="space-y-1">
+                {navigation.map((item) => (
+                    <li key={item.name}>
+                        <a
+                            href={item.href}
+                            className={classNames(item.name === selected ? 'bg-white text-black' : 'text-neutral-700 hover:bg-white hover:text-black',
+                                'group flex gap-x-3 p-2 pl-3 text-sm leading-6 rounded-md')}
+                            onClick={() => selectedMenu(item.name)}
+                        >
+                            {item.name}
+                            {item.count ? (
+                                <span
+                                    className="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-neutral-700 ring-1 ring-inset ring-neutral-200"
+                                    aria-hidden="true"
+                                >
+                                    {item.count}
+                                </span>
+                            ) : null}
+                        </a>
+                    </li>
+                ))}
+            </ul>
+        </nav>
+    );
+});
\ No newline at end of file

From f31b94bc458cb21f713c3ee76ce42df12f0ce9e2 Mon Sep 17 00:00:00 2001
From: Oliver Bunda <bundaoliver@gmail.com>
Date: Mon, 13 Nov 2023 17:25:04 +0100
Subject: [PATCH 2/2] changes after review

---
 web/src/App.js      | 102 +++++++++++++++++------------------
 web/src/Footer.js   | 129 ++++++++++++++++++--------------------------
 web/src/Footer2.jsx |  70 ------------------------
 web/src/Sidebar.jsx |  39 --------------
 4 files changed, 102 insertions(+), 238 deletions(-)
 delete mode 100644 web/src/Footer2.jsx
 delete mode 100644 web/src/Sidebar.jsx

diff --git a/web/src/App.js b/web/src/App.js
index a463b7f..b211e1b 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -6,7 +6,6 @@ import { rootReducer } from './redux';
 import Footer from "./Footer";
 import Service from "./Service";
 import FilterBar from "./FilterBar";
-import { Footer2 } from "./Footer2";
 
 function App() {
   const capacitorClient = new CapacitorClient(
@@ -19,58 +18,57 @@ function App() {
 
   return (
     <>
-      <APIBackend capacitorClient={capacitorClient} store={store} />
-      <StreamingBackend capacitorClient={capacitorClient} store={store} />
-      <div className="max-w-6xl mx-auto">
-        <div className="my-16">
-          <FilterBar
-            filters={[
-              {
-                property: "Owner",
-                value: "backend-team"
-              },
-              {
-                property: "App",
-                value: "*app*"
-              },
-            ]}
-          />
-        </div>
-        <div className="grid grid-cols-1 gap-y-4">
-          <Service
-            stack={{
-              deployment: {
-                pods: [
-                  { name: "xxx", status: "Running" },
-                  { name: "yyy", status: "Running" }
-                ]
-              },
-              service: {
-                name: "my-app",
-                namespace: "default"
-              }
-            }}
-            alerts={[]}
-          />
-          <Service
-            stack={{
-              deployment: {
-                pods: [
-                  { name: "zzz", status: "Running" },
-                  { name: "uuu", status: "Running" }
-                ]
-              },
-              service: {
-                name: "your-app",
-                namespace: "default"
-              }
-            }}
-            alerts={[]}
-          />
-        </div>
+    <APIBackend capacitorClient={capacitorClient} store={store}/>
+    <StreamingBackend capacitorClient={capacitorClient} store={store}/>
+    <div className="max-w-6xl mx-auto">
+      <div className="my-16">
+        <FilterBar 
+          filters={[
+            {
+              property: "Owner",
+              value: "backend-team"
+            },
+            {
+              property: "App",
+              value: "*app*"
+            },
+          ]}
+        />
       </div>
-      {/* <Footer store={store} /> */}
-      <Footer2 store={store} />
+      <div className="grid grid-cols-1 gap-y-4">
+        <Service 
+          stack={{
+            deployment: {
+              pods: [
+                {name: "xxx", status: "Running"},
+                {name: "yyy", status: "Running"}
+              ]
+            },
+            service: {
+              name: "my-app",
+              namespace: "default"
+            }
+          }}
+          alerts={[]}
+        />
+        <Service 
+          stack={{
+            deployment: {
+              pods: [
+                {name: "zzz", status: "Running"},
+                {name: "uuu", status: "Running"}
+              ]
+            },
+            service: {
+              name: "your-app",
+              namespace: "default"
+            }
+          }}
+          alerts={[]}
+        />
+      </div>
+    </div>
+    <Footer store={store} />
     </>
   );
 }
diff --git a/web/src/Footer.js b/web/src/Footer.js
index 05fa7cf..68bf968 100644
--- a/web/src/Footer.js
+++ b/web/src/Footer.js
@@ -1,110 +1,85 @@
-import { XMarkIcon } from '@heroicons/react/24/outline'
-import React, { useState } from 'react';
+import { ArrowDownIcon, ArrowUpIcon } from '@heroicons/react/24/outline';
+import React, { memo, useState, useCallback } from 'react';
 import { GitRepositories, Kustomizations } from './FluxState';
 
-function Footer(props) {
-  const { store } = props
+const Footer = memo(function Footer(props) {
+  
+  const { store } = props;
 
-  const [expanded, setExpanded] = useState(true);
+  const [expanded, setExpanded] = useState(false);
   const [fluxState, setFluxState] = useState(store.getState().fluxState);
   store.subscribe(() => setFluxState(store.getState().fluxState))
 
-  return (
-    <>
-    { expanded ?
-      <ExpandedFooter fluxState={fluxState} setExpanded={setExpanded} /> :
-      <CollapsedFooter fluxState={fluxState} setExpanded={setExpanded} />
-    }
-    </>
-  )
-}
-
-function ExpandedFooter(props) {
-  const { fluxState, setExpanded } = props;
-
   // https://blog.stackademic.com/building-a-resizable-sidebar-component-with-persisting-width-using-react-tailwindcss-bdec28a594f
   const navigationDefault = [
-    { name: 'Kustomizations', href: '#', count: 10, current: true },
-    { name: 'Sources', href: '#', count: '5', current: false },
-    { name: 'Runtime', href: '#', current: false },
-    { name: 'Logs', href: '#', current: false },
+    { name: 'Kustomizations', href: '#', count: 10 },
+    { name: 'Sources', href: '#', count: '5'},
+    { name: 'Runtime', href: '#' },
+    { name: 'Logs', href: '#' },
   ]
-  
-  const [navigation, setNavigation] = useState(navigationDefault);
-  
-  const navigate = (selected) => {
-    const nextNavigation = navigation.map((n) => {
-      if (n.name === selected) {
-        return {...n, current: true};
-      } else {
-        return {...n, current: false};
-      }
-    });
-    setNavigation(nextNavigation)
-  }
-  
+
+  const [selected, setSelected] = useState('Kustomizations');
+
+  const handlerSelect = useCallback((selectedNav) => {
+    setSelected(selectedNav);
+  },
+    [setSelected]
+  )
+
+
   return (
-    <div aria-labelledby="slide-over-title" role="dialog" aria-modal="true">
-      <div className="fixed inset-x-0 bottom-0 h-2/5 z-40 bg-neutral-200 border-t border-neutral-300">
-        <div className="absolute top-0 right-0 px-4 py-2">
+    <div aria-labelledby="slide-over-title" role="dialog" aria-modal="true" className={`fixed inset-x-0 bottom-0 bg-neutral-200 border-t border-neutral-300 ${expanded ? 'h-2/5' : 'h-16'}`}>
+      <div className={`flex justify-between w-full ${expanded ? '' : 'h-full'}`}>
+        <div className='h-auto w-full cursor-pointer' onClick={() => setExpanded(!expanded)} />
+        <div className='px-4 py-2'>
           <button
-            onClick={() => setExpanded(false)}
+            onClick={() => setExpanded(!expanded)}
             type="button" className="ml-1 rounded-md hover:bg-white hover:text-black text-neutral-700 p-1">
-            <span className="sr-only">Close panel</span>
-            <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+            <span className="sr-only">{expanded ? 'Close panel' : 'Open panel'}</span>
+            {expanded ? <ArrowDownIcon className="h-5 w-5" aria-hidden="true" /> : <ArrowUpIcon className="h-5 w-5" aria-hidden="true" />}
           </button>
         </div>
-        <div className="flex pt-10">
-          <div>
-            <div className="w-48 px-4 border-r border-neutral-300">
-              <SideBar navigation={navigation} navigate={navigate} />
-            </div>
+      </div>
+      {expanded &&
+        <div className="flex w-full h-full">
+          <div className="w-48 px-4 border-r border-neutral-300">
+            <SideBar navigation={navigationDefault} selectedMenu={handlerSelect} selected={selected}/>
           </div>
-          <div className="w-full px-4 h-[calc(60vh)] overflow-x-hidden overflow-y-scroll">
-            <div className="w-full max-w-6xl mx-auto">
-            { navigation.find((n) => n.name === "Kustomizations").current &&
-              <Kustomizations fluxState={fluxState} />
-            }
-            { navigation.find((n) => n.name === "Sources").current &&
-              <GitRepositories gitRepositories={fluxState.gitRepositories} />
-            }
+
+          <div className="w-full px-4 overflow-x-hidden overflow-y-scroll mb-20">
+            <div className="w-full max-w-6xl mx-auto flex-col h-full">
+              { selected === "Kustomizations" &&
+                <Kustomizations fluxState={fluxState} />
+              }
+              { selected === "Sources" &&
+                <GitRepositories gitRepositories={fluxState.gitRepositories} />
+              }
             </div>
           </div>
         </div>
-      </div>
-    </div>
-  )
-}
-
-function CollapsedFooter(props) {
-  const { fluxState, setExpanded } = props;
-
-  return (
-    <div
-      className="fixed inset-x-0 bottom-0 h-16 z-40 bg-neutral-200 border-t border-neutral-300 cursor-pointer"
-      onClick={() => setExpanded(true)}
-      >
+      }
     </div>
   )
-}
+})
 
 function classNames(...classes) {
   return classes.filter(Boolean).join(' ')
 }
 
 function SideBar(props) {
+
+  const { navigation, selectedMenu, selected } = props;
+
   return (
     <nav className="flex flex-1 flex-col" aria-label="Sidebar">
       <ul className="space-y-1">
-        {props.navigation.map((item) => (
+        {navigation.map((item) => (
           <li key={item.name}>
             <a
               href={item.href}
-              className={classNames(
-                item.current ? 'bg-white text-black' : 'text-neutral-700 hover:bg-white hover:text-black',
-                'group flex gap-x-3 p-2 pl-3 text-sm leading-6 rounded-md'
-              )}
-              onClick={() => props.navigate(item.name)}
+              className={classNames(item.name === selected ? 'bg-white text-black' : 'text-neutral-700 hover:bg-white hover:text-black',
+                  'group flex gap-x-3 p-2 pl-3 text-sm leading-6 rounded-md')}
+              onClick={() => selectedMenu(item.name)}
             >
               {item.name}
               {item.count ? (
@@ -120,7 +95,7 @@ function SideBar(props) {
         ))}
       </ul>
     </nav>
-  )
-}
+  );
+};
 
 export default Footer;
diff --git a/web/src/Footer2.jsx b/web/src/Footer2.jsx
deleted file mode 100644
index 24563c6..0000000
--- a/web/src/Footer2.jsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { ArrowDownIcon, ArrowUpIcon } from '@heroicons/react/24/outline';
-import React, { memo, useState } from 'react';
-import { useCallback } from 'react';
-import { GitRepositories, Kustomizations } from './FluxState';
-import { SideBar } from './Sidebar';
-
-
-export const Footer2 = memo(function Footer2(props) {
-
-    const { store } = props
-
-    const [expanded, setExpanded] = useState(false);
-    const [fluxState, setFluxState] = useState(store.getState().fluxState);
-    store.subscribe(() => setFluxState(store.getState().fluxState))
-
-
-  // https://blog.stackademic.com/building-a-resizable-sidebar-component-with-persisting-width-using-react-tailwindcss-bdec28a594f
-  const navigationDefault = [
-    { name: 'Kustomizations', href: '#', count: 10 },
-    { name: 'Sources', href: '#', count: '5'},
-    { name: 'Runtime', href: '#' },
-    { name: 'Logs', href: '#' },
-  ]
-
-  const [selected, setSelected] = useState('Kustomizations');
-
-  const handlerSelect = useCallback((selectedNav) => {
-    setSelected(selectedNav);
-  },
-    [setSelected]
-  )
-
-    return (
-        <div aria-labelledby="slide-over-title" role="dialog" aria-modal="true" className={`fixed inset-x-0 bottom-0 bg-neutral-200 border-t border-neutral-300 ${expanded ? 'h-2/5' : 'h-16'}`}>
-            <div className={`flex justify-between w-full ${expanded ? '' : 'h-full'}`}>
-                <div className='h-auto w-full cursor-pointer'
-                 onClick={() => setExpanded(!expanded)}>
-
-                </div>
-                <div className='px-4 py-2'>
-                    <button
-                        onClick={() => setExpanded(!expanded)}
-                        type="button" className="ml-1 rounded-md hover:bg-white hover:text-black text-neutral-700 p-1">
-                        <span className="sr-only">{expanded ? 'Close panel' : 'Open panel'}</span>
-                        {expanded ? <ArrowDownIcon className="h-5 w-5" aria-hidden="true" /> : <ArrowUpIcon className="h-5 w-5" aria-hidden="true" />}
-                    </button>
-                </div>
-            </div>
-            {expanded &&
-                <div className="flex w-full h-full">
-                    <div className="w-48 px-4 border-r border-neutral-300">
-                            <SideBar navigation={navigationDefault} selectedMenu={handlerSelect} selected={selected}/>
-                    </div>
-
-                    <div className="w-full px-4 overflow-x-hidden overflow-y-scroll mb-20">
-                        <div className="w-full max-w-6xl mx-auto flex-col h-full">
-                            { selected === "Kustomizations" &&
-                                <Kustomizations fluxState={fluxState} />
-                            }
-                            { selected === "Sources" &&
-                                <GitRepositories gitRepositories={fluxState.gitRepositories} />
-                            }
-                        </div>
-                    </div>
-                </div>
-            }
-        </div>
-    )
-
-});
diff --git a/web/src/Sidebar.jsx b/web/src/Sidebar.jsx
deleted file mode 100644
index f311cbd..0000000
--- a/web/src/Sidebar.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React, { memo } from 'react';
-
-
-
-export const SideBar = memo(function SideBar(props) {
-
-    function classNames(...classes) {
-        return classes.filter(Boolean).join(' ')
-    }
-
-    const { navigation, selectedMenu, selected } = props;
-
-    return (
-        <nav className="flex flex-1 flex-col" aria-label="Sidebar">
-            <ul className="space-y-1">
-                {navigation.map((item) => (
-                    <li key={item.name}>
-                        <a
-                            href={item.href}
-                            className={classNames(item.name === selected ? 'bg-white text-black' : 'text-neutral-700 hover:bg-white hover:text-black',
-                                'group flex gap-x-3 p-2 pl-3 text-sm leading-6 rounded-md')}
-                            onClick={() => selectedMenu(item.name)}
-                        >
-                            {item.name}
-                            {item.count ? (
-                                <span
-                                    className="ml-auto w-9 min-w-max whitespace-nowrap rounded-full bg-white px-2.5 py-0.5 text-center text-xs font-medium leading-5 text-neutral-700 ring-1 ring-inset ring-neutral-200"
-                                    aria-hidden="true"
-                                >
-                                    {item.count}
-                                </span>
-                            ) : null}
-                        </a>
-                    </li>
-                ))}
-            </ul>
-        </nav>
-    );
-});
\ No newline at end of file