From 3a1bdaf1c4194faca621037537705d156b5b04c9 Mon Sep 17 00:00:00 2001 From: EnjoyBacon7 <59032058+EnjoyBacon7@users.noreply.github.com> Date: Tue, 3 Oct 2023 12:02:35 -0400 Subject: [PATCH 1/5] Version match with main --- web/src/components/CbVersion.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/components/CbVersion.js b/web/src/components/CbVersion.js index ff47f63..7bef0a9 100644 --- a/web/src/components/CbVersion.js +++ b/web/src/components/CbVersion.js @@ -22,7 +22,7 @@ export function CbVersion() { onMouseLeave={handleMouseLeave}> - Version 🦄.0.1.0 + Version 🦄.0.1.2 From 9678e834de091c4a9ae9fffe546baf02decbe0e3 Mon Sep 17 00:00:00 2001 From: EnjoyBacon7 <59032058+EnjoyBacon7@users.noreply.github.com> Date: Tue, 3 Oct 2023 12:14:35 -0400 Subject: [PATCH 2/5] Added system matching theme switching --- web/src/components/CbHeader.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/web/src/components/CbHeader.js b/web/src/components/CbHeader.js index a54d33d..237cb89 100644 --- a/web/src/components/CbHeader.js +++ b/web/src/components/CbHeader.js @@ -9,12 +9,20 @@ export function CbHeader(props) { const navigate = useNavigate(); useEffect(() => { - const theme = localStorage.getItem("theme"); - theme && setTheme(theme); + const darkTheme = window.matchMedia("(prefers-color-scheme: dark)") + if (darkTheme.matches) { + setTheme("dark"); + } else { + setTheme("light"); + } }, []); + window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => { + const newColorScheme = e.matches ? "dark" : "light"; + setTheme(newColorScheme); + }); + useEffect(() => { - localStorage.setItem("theme", theme); document.documentElement.setAttribute("data-bs-theme", theme); }, [theme]); From 7c09b403e5af177bea8bf5e879c7d085551025c7 Mon Sep 17 00:00:00 2001 From: EnjoyBacon7 <59032058+EnjoyBacon7@users.noreply.github.com> Date: Sun, 8 Oct 2023 14:45:36 -0400 Subject: [PATCH 3/5] Split Root Search from root component --- web/src/App.js | 2 -- web/src/components/CbShareSearch.js | 31 +++++++++++++++++++++++++++++ web/src/routes/CbRoot.js | 28 ++++++++------------------ web/src/routes/error-page.js | 4 ++++ 4 files changed, 43 insertions(+), 22 deletions(-) create mode 100644 web/src/components/CbShareSearch.js diff --git a/web/src/App.js b/web/src/App.js index c55186d..339e989 100644 --- a/web/src/App.js +++ b/web/src/App.js @@ -5,13 +5,11 @@ import Col from 'react-bootstrap/Col'; import { createBrowserRouter, RouterProvider, - useNavigate, } from "react-router-dom"; // Local imports import CbRoot from './routes/CbRoot'; import ErrorPage from './routes/error-page'; - import CbVersion from './components/CbVersion'; import { NotificationProvider } from './components/CbToastsContext'; import CbToastsContainer from './components/CbToastsContainer'; diff --git a/web/src/components/CbShareSearch.js b/web/src/components/CbShareSearch.js new file mode 100644 index 0000000..40ee763 --- /dev/null +++ b/web/src/components/CbShareSearch.js @@ -0,0 +1,31 @@ +// System imports +import React, { useState } from "react"; +import { useNavigate, useParams } from "react-router-dom"; +import Form from "react-bootstrap/Form"; + +export function CbShareSearch() { + + // Useful hooks + const [shareId, setShareId] = useState(useParams().shareId); + const navigate = useNavigate(); + + // Evaluate entered shareId + function handleChange(e) { + setShareId(e.target.value); + } + + // Redirect on submit + function handleRedirect() { + navigate(`/share/${encodeURIComponent(shareId)}`); + } + + return ( +
+ + + +
+ ) +} + +export default CbShareSearch; \ No newline at end of file diff --git a/web/src/routes/CbRoot.js b/web/src/routes/CbRoot.js index 95c3cb7..7a1e594 100644 --- a/web/src/routes/CbRoot.js +++ b/web/src/routes/CbRoot.js @@ -1,35 +1,27 @@ +// ------------------------------------------------------------------------- +// Root element called by App.js. Handles main views +// ------------------------------------------------------------------------- + // System imports -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { useNavigate, useParams } from "react-router-dom"; -import { useEffect } from "react"; -import Form from "react-bootstrap/Form"; // Local imports import CbUpload from "../components/CbUpload"; import CbHeader from "../components/CbHeader"; import CbShareNav from "../components/CbShareNav"; import CbFiles from "../components/CbFiles"; +import CbShareSearch from "../components/CbShareSearch"; // Root Component -export function CbRoot( { isHome } ) { +export function CbRoot({ isHome }) { // Useful hooks - const [shareId, setShareId] = useState(useParams().shareId); const navigate = useNavigate(); // Hooks if in share const [viewMode, setViewMode] = useState("list"); const [fileInfo, setFileInfo] = useState([]); - // Evaluate entered shareId - function handleChange(e) { - setShareId(e.target.value); - } - - // Redirect on submit - function handleRedirect() { - navigate(`/share/${encodeURIComponent(shareId)}`); - } - function loadFiles() { const shareId_forLoad = window.location.pathname.split('/')[2]; // Use useRef instead? var request = new XMLHttpRequest(); @@ -63,11 +55,7 @@ export function CbRoot( { isHome } ) { {isHome ? -
- - - -
+ :
diff --git a/web/src/routes/error-page.js b/web/src/routes/error-page.js index 17cb2e0..6004329 100644 --- a/web/src/routes/error-page.js +++ b/web/src/routes/error-page.js @@ -1,3 +1,7 @@ +// -------------------------------------------------------------- +// Error page displayed when a route fails to load +// -------------------------------------------------------------- + import { useRouteError } from "react-router-dom"; export default function ErrorPage() { From c0cd6a91ed8347dabfb3c53e58227c713cdaca13 Mon Sep 17 00:00:00 2001 From: EnjoyBacon7 <59032058+EnjoyBacon7@users.noreply.github.com> Date: Sun, 8 Oct 2023 15:47:59 -0400 Subject: [PATCH 4/5] Added functionnality to file searching in a share --- web/src/components/CbFiles.js | 13 ++++++++++--- web/src/components/CbShareNav.js | 12 +++++++++++- web/src/routes/CbRoot.js | 5 +++-- 3 files changed, 24 insertions(+), 6 deletions(-) diff --git a/web/src/components/CbFiles.js b/web/src/components/CbFiles.js index 0f85ed6..c1eb3d0 100644 --- a/web/src/components/CbFiles.js +++ b/web/src/components/CbFiles.js @@ -14,13 +14,20 @@ import InputGroup from 'react-bootstrap/InputGroup'; // ------------------------------------------------------------------ // Files card parent component // ------------------------------------------------------------------ -export function CbFiles({ fileInfo, viewMode, loadFiles }) { +export function CbFiles({ fileInfo, viewMode, loadFiles, searchTerms }) { const [components, setComponents] = useState([]); useEffect(() => { + var filteredfileInfo = fileInfo; + if (searchTerms) { + filteredfileInfo = fileInfo.filter((item) => { + return item.toLowerCase().includes(searchTerms.toLowerCase()); + }); + } + if (viewMode === "gallery") { - const newComponents = fileInfo.map((item) => ( + const newComponents = filteredfileInfo.map((item) => ( )); @@ -30,7 +37,7 @@ export function CbFiles({ fileInfo, viewMode, loadFiles }) { ); } else if (viewMode === "list") { - const newComponents = fileInfo.map((item) => ( + const newComponents = filteredfileInfo.map((item) => ( )); setComponents( diff --git a/web/src/components/CbShareNav.js b/web/src/components/CbShareNav.js index 01fc33b..f6a6482 100644 --- a/web/src/components/CbShareNav.js +++ b/web/src/components/CbShareNav.js @@ -2,12 +2,22 @@ import ToggleButton from 'react-bootstrap/ToggleButton'; import FormControl from 'react-bootstrap/FormControl'; import InputGroup from 'react-bootstrap/InputGroup'; -export function CbShareNav({ changeViewMode, viewMode }) { +export function CbShareNav({ changeViewMode, viewMode, setSearchTerms }) { + + function handleChange(e) { + setSearchTerms(e.target.value) + } + + function handleSubmit() { + console.log('submitting'); + } return (
diff --git a/web/src/routes/CbRoot.js b/web/src/routes/CbRoot.js index 7a1e594..d820fdc 100644 --- a/web/src/routes/CbRoot.js +++ b/web/src/routes/CbRoot.js @@ -21,6 +21,7 @@ export function CbRoot({ isHome }) { // Hooks if in share const [viewMode, setViewMode] = useState("list"); const [fileInfo, setFileInfo] = useState([]); + const [searchTerms, setSearchTerms] = useState(null); function loadFiles() { const shareId_forLoad = window.location.pathname.split('/')[2]; // Use useRef instead? @@ -58,8 +59,8 @@ export function CbRoot({ isHome }) { :
- - + +
}
From 1d0b0054eb63f271804840da94a522649c85a07a Mon Sep 17 00:00:00 2001 From: EnjoyBacon7 <59032058+EnjoyBacon7@users.noreply.github.com> Date: Sun, 8 Oct 2023 15:51:47 -0400 Subject: [PATCH 5/5] Updated version for current release --- web/src/components/CbVersion.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/components/CbVersion.js b/web/src/components/CbVersion.js index 7bef0a9..cc6802f 100644 --- a/web/src/components/CbVersion.js +++ b/web/src/components/CbVersion.js @@ -22,7 +22,7 @@ export function CbVersion() { onMouseLeave={handleMouseLeave}> - Version 🦄.0.1.2 + Version 🦄.0.1.3