Merge pull request #6 from EnjoyBacon7/dev

Dev

Author: EnjoyBacon7

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';

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) => (
                 <CbFileGallery fileName={item} loadFiles={loadFiles} />
             ));
 
@@ -30,7 +37,7 @@ export function CbFiles({ fileInfo, viewMode, loadFiles }) {
                 </Row>
             );
         } else if (viewMode === "list") {
-            const newComponents = fileInfo.map((item) => (
+            const newComponents = filteredfileInfo.map((item) => (
                 <CbFileList fileName={item} loadFiles={loadFiles} />
             ));
             setComponents(

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]);
 

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 (
         <div>
             <InputGroup className="mt-3">
                 <FormControl
+                    onChange={handleChange}
+                    onSubmit={handleSubmit}
                     placeholder='Search Here'
                     aria-label="file search field"
                 />

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 (
+        <Form className="mt-3" onChange={handleChange} onSubmit={handleRedirect}>
+            <Form.Group>
+                <Form.Control type="text" placeholder="Enter Share ID to Retrieve an Existing Share" />
+            </Form.Group>
+        </Form>
+    )
+}
+
+export default CbShareSearch;

web/src/components/CbVersion.js

@@ -22,7 +22,9 @@ export function CbVersion() {
         onMouseLeave={handleMouseLeave}>
             <Card.Body>
                 <Card.Text className='text-center'>
-                    Version <a href='http://www.staggeringbeauty.com' style={{textDecoration: 'none'}}>🦄</a>.0.1.2
+
+                    Version <a href='http://www.staggeringbeauty.com' style={{textDecoration: 'none'}}>🦄</a>.0.1.3
+
                 </Card.Text>
             </Card.Body>
         </Card>

web/src/routes/CbRoot.js

@@ -1,34 +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)}`);
-    }
+    const [searchTerms, setSearchTerms] = useState(null);
 
     function loadFiles() {
         const shareId_forLoad = window.location.pathname.split('/')[2]; // Use useRef instead?
@@ -63,15 +56,11 @@ export function CbRoot( { isHome } ) {
             <CbHeader />
             <CbUpload loadFiles={loadFiles} />
             {isHome ?
-                <Form className="mt-3" onChange={handleChange} onSubmit={handleRedirect}>
-                    <Form.Group>
-                        <Form.Control type="text" placeholder="Enter Share ID to Retrieve an Existing Share" />
-                    </Form.Group>
-                </Form>
+                <CbShareSearch />
                 :
                 <div>
-                    <CbShareNav changeViewMode={setViewMode} viewMode={viewMode} />
-                    <CbFiles fileInfo={fileInfo} viewMode={viewMode} loadFiles={loadFiles} />
+                    <CbShareNav changeViewMode={setViewMode} viewMode={viewMode} setSearchTerms={setSearchTerms}/>
+                    <CbFiles fileInfo={fileInfo} viewMode={viewMode} loadFiles={loadFiles} searchTerms={searchTerms} />
                 </div>
             }
         </div>

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() {