Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

footer refactor #2

Merged
merged 2 commits into from
Nov 15, 2023
Merged

footer refactor #2

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2f8a7b8
footer refactor
Pilu84 Nov 10, 2023
f31b94b
changes after review
Pilu84 Nov 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 52 additions & 77 deletions web/src/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 ? (
Expand All @@ -120,7 +95,7 @@ function SideBar(props) {
))}
</ul>
</nav>
)
}
);
};

export default Footer;