Skip to content

Commit

Permalink
Added state management to the dashboard sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@vmatsiiako
vmatsiiako committed Dec 23, 2022
1 parent 092436b commit 87a9a58
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 42 deletions.
5 changes: 3 additions & 2 deletions frontend/components/basic/buttons/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,10 @@ export default function Button(props: ButtonProps): JSX.Element {

// Setting the text color for the text and icon
props.color == "mineshaft" && "text-gray-400",
props.color != "mineshaft" && props.color != "red" && "text-black",
props.color != "mineshaft" && props.color != "red" && props.color != "none" && "text-black",
props.color == "red" && "text-gray-200",
activityStatus && props.color != "red" ? "group-hover:text-black" : "",
props.color == "none" && "text-gray-200 text-xl",
activityStatus && props.color != "red" && props.color != "none" ? "group-hover:text-black" : "",

props.size == "icon" && "flex items-center justify-center"
);
Expand Down
2 changes: 1 addition & 1 deletion frontend/components/dashboard/GenerateSecretMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const GenerateSecretMenu = () => {
return <Menu as="div" className="relative inline-block text-left">
<div>
<Menu.Button className="inline-flex w-full justify-center rounded-md text-sm font-medium text-gray-200 rounded-md hover:bg-white/10 duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
<div className='p-1 rounded-md hover:bg-white/5'>
<div className='py-1 px-2 rounded-md bg-bunker-800 hover:bg-bunker-500'>
<FontAwesomeIcon icon={faShuffle} className='text-bunker-300'/>
</div>
</Menu.Button>
Expand Down
70 changes: 52 additions & 18 deletions frontend/components/dashboard/SideBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,44 +3,69 @@ import { faX } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import Button from '../basic/buttons/Button';
import ListBox from '../basic/Listbox';
import Toggle from '../basic/Toggle';
import DashboardInputField from './DashboardInputField';
import GenerateSecretMenu from './GenerateSecretMenu';


interface SecretProps {
key: string;
value: string;
pos: number;
visibility: string;
}

interface SideBarProps {
toggleSidebar: (value: number) => void;
data: SecretProps[];
modifyKey: (value: string) => void;
modifyValue: (value: string) => void;
modifyVisibility: (value: string) => void;
}

/**
* @param {object} obj
* @param {function} obj.toggleSidebar - function that opens or closes the sidebar
* @param {SecretProps[]} obj.data - data of a certain key valeu pair
* @param {function} obj.modifyKey - function that modifies the secret key
* @param {function} obj.modifyValue - function that modifies the secret value
* @param {function} obj.modifyVisibility - function that modifies the secret visibility
* @returns the sidebar with 'secret's settings'
*/
const SideBar = () => {
const [overrideEnabled, setOverrideEnabled] = useState(false)
const SideBar = ({ toggleSidebar, data, modifyKey, modifyValue, modifyVisibility }: SideBarProps) => {
const [overrideEnabled, setOverrideEnabled] = useState(false);

return <div className='absolute border-l border-mineshaft-500 bg-bunker fixed h-full w-96 top-14 right-0 z-50 shadow-xl flex flex-col justify-between'>
<div className='h-min'>
<div className="flex flex-row px-4 py-3 border-b border-mineshaft-500 justify-between items-center">
<p className="font-semibold text-lg text-bunker-200">Secret</p>
<FontAwesomeIcon icon={faX} className='w-4 h-4 text-bunker-300 cursor-pointer'/>
<div className='p-1' onClick={() => toggleSidebar(-1)}>
<FontAwesomeIcon icon={faX} className='w-4 h-4 text-bunker-300 cursor-pointer'/>
</div>
</div>
<div className='mt-4 px-4 pointer-events-none'>
<div className='mt-4 px-4'>
<p className='text-sm text-bunker-300'>Key</p>
<DashboardInputField
onChangeHandler={() => {}}
onChangeHandler={modifyKey}
type="varName"
position={1}
value={"KeyKeyKey"}
position={data[0].pos}
value={data[0].key}
duplicates={[]}
blurred={false}
/>
</div>
<div className={`relative mt-2 px-4 ${overrideEnabled && "opacity-40 pointer-events-none"} duration-200`}>
<p className='text-sm text-bunker-300'>Value</p>
<DashboardInputField
onChangeHandler={() => {}}
onChangeHandler={modifyValue}
type="value"
position={1}
value={"ValueValueValue"}
position={data[0].pos}
value={data[0].value}
duplicates={[]}
blurred={true}
/>
<div className='absolute right-[1.7rem] top-[1.65rem] z-50'>
<div className='absolute bg-bunker-800 right-[1rem] top-[1.65rem] z-50'>
<GenerateSecretMenu />
</div>
</div>
Expand All @@ -51,9 +76,9 @@ const SideBar = () => {
</div>
<div className={`relative ${!overrideEnabled && "opacity-40 pointer-events-none"} duration-200`}>
<DashboardInputField
onChangeHandler={() => {}}
onChangeHandler={modifyValue}
type="value"
position={1}
position={data[0].pos}
value={"ValueValueValue"}
duplicates={[]}
blurred={true}
Expand All @@ -62,11 +87,20 @@ const SideBar = () => {
<GenerateSecretMenu />
</div>
</div>
<div className={`mt-6`}>
<p className='text-sm text-bunker-300'>Comments & notes</p>
<div className='h-32 w-full bg-bunker-800 p-2 rounded-md border border-mineshaft-500 rounded-md text-sm text-bunker-300'>
Leave your comment here...
</div>
</div>
<div className={`relative mt-4 px-4 opacity-80 duration-200`}>
<p className='text-sm text-bunker-200'>Group</p>
<ListBox
selected={"Database Secrets"}
onChange={() => {}}
data={["Group1"]}
isFull={true}
/>
</div>
<div className={`mt-4 px-4`}>
<p className='text-sm text-bunker-300'>Comments & notes</p>
<div className='h-32 w-full bg-bunker-800 p-2 rounded-md border border-mineshaft-500 rounded-md text-sm text-bunker-300'>
Leave your comment here...
</div>
</div>
</div>
Expand Down
54 changes: 33 additions & 21 deletions frontend/pages/dashboard/[id].js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,14 +56,16 @@ const KeyPair = ({
modifyValue,
modifyVisibility,
isBlurred,
duplicates
duplicates,
toggleSidebar,
sidebarSecretNumber
}) => {

return (
<div className="px-1 flex flex-col items-center ml-1">
<div className="relative flex flex-row justify-between w-full max-w-5xl mr-auto max-h-14 my-1 items-start px-2">
<div className={`mx-1 flex flex-col items-center ml-1 ${keyPair.pos == sidebarSecretNumber && "bg-mineshaft-500 duration-200"} rounded-md`}>
<div className="relative flex flex-row justify-between w-full max-w-5xl mr-auto max-h-14 my-1 items-start px-1">
<div className="min-w-xl w-96">
<div className="flex items-center md:px-1 rounded-lg mt-4 md:mt-0 max-h-16">
<div className="flex pr-1 items-center rounded-lg mt-4 md:mt-0 max-h-16">
<DashboardInputField
onChangeHandler={modifyKey}
type="varName"
Expand All @@ -84,17 +86,17 @@ const KeyPair = ({
/>
</div>
</div>
<div className="cursor-pointer w-9 h-9 bg-white/10 rounded-md flex flex-row justify-center items-center opacity-50 hover:opacity-100 duration-200">
<div onClick={() => toggleSidebar(keyPair.pos)} className="cursor-pointer w-9 h-9 bg-mineshaft-700 hover:bg-chicago-700 rounded-md flex flex-row justify-center items-center duration-200">
<FontAwesomeIcon
className="text-gray-300 px-2.5 text-lg mt-0.5"
icon={faEllipsis}
/>
</div>
<div className="w-2"></div>
<div className="opacity-50 hover:opacity-100 duration-200">
<div className="bg-[#9B3535] hover:bg-red rounded-md duration-200">
<Button
onButtonPressed={() => deleteRow(keyPair.id)}
color="red"
color="none"
size="icon-sm"
icon={faX}
/>
Expand Down Expand Up @@ -130,7 +132,7 @@ export default function Dashboard() {
const [sortMethod, setSortMethod] = useState('alphabetical');
const [checkDocsPopUpVisible, setCheckDocsPopUpVisible] = useState(false);
const [hasUserEverPushed, setHasUserEverPushed] = useState(false);
const [sidebarOpen, toggleSidebar] = useState(false);
const [sidebarSecretNumber, toggleSidebar] = useState(-1);

const { createNotification } = useNotificationContext();

Expand Down Expand Up @@ -335,17 +337,17 @@ export default function Dashboard() {

const sortValuesHandler = (dataToSort) => {
const sortedData = (dataToSort != 1 ? dataToSort : data)
.sort((a, b) =>
sortMethod == 'alphabetical'
? a.key.localeCompare(b.key)
: b.key.localeCompare(a.key)
)
.map((item, index) => {
return {
...item,
pos: index
};
});
.sort((a, b) =>
sortMethod == 'alphabetical'
? a.key.localeCompare(b.key)
: b.key.localeCompare(a.key)
)
.map((item, index) => {
return {
...item,
pos: index
};
});

setData(sortedData);
};
Expand Down Expand Up @@ -395,7 +397,13 @@ export default function Dashboard() {
/>
</Head>
<div className="flex flex-row">
{!sidebarOpen && <SideBar />}
{sidebarSecretNumber != -1 && <SideBar
toggleSidebar={toggleSidebar}
data={data.filter(row => row.pos == sidebarSecretNumber)}
modifyKey={listenChangeKey}
modifyValue={listenChangeValue}
modifyVisibility={listenChangeVisibility}
/>}
<div className="w-full max-h-96 pb-2">
<NavHeader pageName="Secrets" isProjectRelated={true} />
{checkDocsPopUpVisible && (
Expand Down Expand Up @@ -557,7 +565,7 @@ export default function Dashboard() {
</div>
</div>
</div>
<div id="data1" className="">
<div id="data1" className="px-1">
{data
.filter(
(keyPair) =>
Expand All @@ -582,6 +590,8 @@ export default function Dashboard() {
index !==
data?.map((item) => item.key).indexOf(item)
)}
toggleSidebar={toggleSidebar}
sidebarSecretNumber={sidebarSecretNumber}
/>
))}
</div>
Expand Down Expand Up @@ -631,6 +641,8 @@ export default function Dashboard() {
index !==
data?.map((item) => item.key).indexOf(item)
)}
toggleSidebar={toggleSidebar}
sidebarSecretNumber={sidebarSecretNumber}
/>
))}
</div>
Expand Down

0 comments on commit 87a9a58

Please sign in to comment.