diff --git a/Components/Repo/Repo.js b/Components/Repo/Repo.js index 8f21f08..f8b1564 100644 --- a/Components/Repo/Repo.js +++ b/Components/Repo/Repo.js @@ -1,15 +1,61 @@ //Lib -import React from 'react'; +import { useState } from 'react'; import classes from './Repo.module.css'; -import { IconSettings, IconInfoCircle } from '@tabler/icons-react'; +import { + IconSettings, + IconInfoCircle, + IconChevronDown, + IconChevronUp, +} from '@tabler/icons-react'; import timestampConverter from '../../helpers/functions/timestampConverter'; import StorageBar from '../UI/StorageBar/StorageBar'; import QuickCommands from './QuickCommands/QuickCommands'; export default function Repo(props) { + //Load displayDetails from LocalStorage + const displayDetailsFromLS = () => { + try { + if ( + localStorage.getItem('displayDetailsRepo' + props.id) === null + ) { + localStorage.setItem( + 'displayDetailsRepo' + props.id, + JSON.stringify(true) + ); + return true; + } else { + return JSON.parse( + localStorage.getItem('displayDetailsRepo' + props.id) + ); + } + } catch (error) { + console.log( + 'LocalStorage error, key', + 'displayDetailsRepo' + props.id, + 'will be removed. Try again.', + 'Error message on this key : ', + error + ); + localStorage.removeItem('displayDetailsRepo' + props.id); + } + }; + + //States + const [displayDetails, setDisplayDetails] = useState(displayDetailsFromLS); + + //BUTTON : Display or not repo details for ONE repo + const displayDetailsForOneHandler = (boolean) => { + //Update localStorage + localStorage.setItem( + 'displayDetailsRepo' + props.id, + JSON.stringify(boolean) + ); + setDisplayDetails(boolean); + }; + return ( <> - {props.displayDetails ? ( + {displayDetails ? ( <>
@@ -127,6 +173,27 @@ export default function Repo(props) {
)} + {displayDetails ? ( +
+ { + displayDetailsForOneHandler(false); + }} + /> +
+ ) : ( +
+ { + displayDetailsForOneHandler(true); + }} + /> +
+ )} ); } diff --git a/Components/Repo/Repo.module.css b/Components/Repo/Repo.module.css index 8daa501..fec53e4 100644 --- a/Components/Repo/Repo.module.css +++ b/Components/Repo/Repo.module.css @@ -35,7 +35,7 @@ margin: 20px 0px 0px 0px; padding: 15px; border-radius: 5px; - transition: max-height 0.2s linear; + transition: max-height 0.1s linear; overflow: visible; /* Need to display comment on hover (which is position : absolute) */ position: relative; @@ -193,6 +193,17 @@ opacity: 1; } +.chevron { + margin: auto; +} + +.chevron :focus, +.chevron :hover { + cursor: pointer; + filter: invert(27%) sepia(82%) saturate(2209%) hue-rotate(240deg) + brightness(99%) contrast(105%); +} + /* MOBILE */ @media all and (max-width: 1000px) { .tabInfo { diff --git a/Containers/RepoList/RepoList.js b/Containers/RepoList/RepoList.js index 04b1bb3..d99875c 100644 --- a/Containers/RepoList/RepoList.js +++ b/Containers/RepoList/RepoList.js @@ -1,7 +1,7 @@ //Lib import classes from './RepoList.module.css'; -import { useState, useEffect, useRef } from 'react'; -import { IconPlus, IconChevronDown, IconChevronUp } from '@tabler/icons-react'; +import { useState, useEffect } from 'react'; +import { IconPlus } from '@tabler/icons-react'; import { useRouter } from 'next/router'; import Link from 'next/link'; import useSWR, { useSWRConfig } from 'swr'; @@ -48,7 +48,6 @@ export default function RepoList() { ////States const [displayRepoAdd, setDisplayRepoAdd] = useState(false); const [displayRepoEdit, setDisplayRepoEdit] = useState(false); - const [isLoading, setIsLoading] = useState(false); ////Functions @@ -67,32 +66,6 @@ export default function RepoList() { return ; } - //BUTTON : Display or not repo details for ONE repo - const displayDetailsForOneHandler = async (id, boolean) => { - setIsLoading(true); - await fetch('/api/repo/id/' + id + '/displayDetails', { - method: 'PUT', - headers: { - 'Content-type': 'application/json', - }, - body: JSON.stringify({ displayDetails: boolean }), - }) - .then((response) => { - if (response.ok) { - mutate('/api/repo'); - setIsLoading(false); - } else { - setIsLoading(false); - toast.error('API error', toastOptions); - } - }) - .catch((error) => { - console.log(error); - setIsLoading(false); - toast.error('API error', toastOptions); - }); - }; - //BUTTON : Display RepoManage component box for ADD const manageRepoAddHandler = () => { router.replace('/manage-repo/add'); @@ -131,45 +104,11 @@ export default function RepoList() { storageSize={repo.storageSize} storageUsed={repo.storageUsed} sshPublicKey={repo.sshPublicKey} - displayDetails={repo.displayDetails} unixUser={repo.unixUser} comment={repo.comment} lanCommand={repo.lanCommand} repoManageEditHandler={() => repoManageEditHandler(repo.id)} > - {repo.displayDetails ? ( -
- {isLoading ? ( - - ) : ( - { - displayDetailsForOneHandler(repo.id, false); - // tell all SWRs with this key to revalidate - mutate('/api/repo'); - }} - /> - )} -
- ) : ( -
- {isLoading ? ( - - ) : ( - { - displayDetailsForOneHandler(repo.id, true); - // tell all SWRs with this key to revalidate - mutate('/api/repo'); - }} - /> - )} -
- )} ); }); diff --git a/Containers/RepoList/RepoList.module.css b/Containers/RepoList/RepoList.module.css index 4512b97..2187a7d 100644 --- a/Containers/RepoList/RepoList.module.css +++ b/Containers/RepoList/RepoList.module.css @@ -112,17 +112,6 @@ transform: scale(0.96); } -.chevron { - margin: auto; -} - -.chevron :focus, -.chevron :hover { - cursor: pointer; - filter: invert(27%) sepia(82%) saturate(2209%) hue-rotate(240deg) - brightness(99%) contrast(105%); -} - @media all and (max-width: 1000px) { .newRepoButton { display: none; diff --git a/pages/api/repo/id/[slug]/displayDetails.js b/pages/api/repo/id/[slug]/displayDetails.js deleted file mode 100644 index 1c76cba..0000000 --- a/pages/api/repo/id/[slug]/displayDetails.js +++ /dev/null @@ -1,80 +0,0 @@ -import { promises as fs } from 'fs'; -import path from 'path'; -import { authOptions } from '../../../auth/[...nextauth]'; -import { getServerSession } from 'next-auth/next'; - -export default async function handler(req, res) { - if (req.method == 'PUT') { - //Verify that the user is logged in. - const session = await getServerSession(req, res, authOptions); - if (!session) { - res.status(401).json({ message: 'You must be logged in.' }); - return; - } - - //The data we expect to receive - const { displayDetails } = req.body; - //We check that we receive displayDetails and it must be a bool. - if (typeof displayDetails != 'boolean') { - //If a variable is empty. - res.status(422).json({ - message: 'Unexpected data', - }); - //A return to make sure we don't go any further if data are incorrect. - return; - } - try { - //console.log('API call (PUT)'); - //Find the absolute path of the json directory - const jsonDirectory = path.join(process.cwd(), '/config'); - let repoList = await fs.readFile( - jsonDirectory + '/repo.json', - 'utf8' - ); - //Parse the repoList - repoList = JSON.parse(repoList); - - //Find the ID in the data and change the values transmitted by the form - let newRepoList = repoList.map((repo) => - repo.id == req.query.slug - ? { - ...repo, - displayDetails: displayDetails, - } - : repo - ); - //Stringify the newRepoList to write it into the json file. - newRepoList = JSON.stringify(newRepoList); - //Write the new json - await fs.writeFile( - jsonDirectory + '/repo.json', - newRepoList, - (err) => { - if (err) console.log(err); - } - ); - res.status(200).json({ message: 'Envoi API réussi' }); - } catch (error) { - //Log for backend - console.log(error); - //Log for frontend - if (error.code == 'ENOENT') { - res.status(500).json({ - status: 500, - message: 'No such file or directory', - }); - } else { - res.status(500).json({ - status: 500, - message: 'API error, contact the administrator', - }); - } - return; - } - } else { - res.status(405).json({ - status: 405, - message: 'Method Not Allowed ', - }); - } -}