initiate decouple

README.md

@@ -27,39 +27,6 @@ Note: Charts are displayed using mock data.
 - Integrated sidebar w/ custom css.
 - Firebase hosting used for deployment.
 
-## Branches
-
-### `addAPI`
-
-- express API for mockData - configured with firebase cloud functions
-
-  > - [ ] req param validation via typescript
-  > - [ ] update authorization via jwt
-  > - [ ] add all data & files to endpoint
-
-  - GET: /api/data/skills - get all skills
-  - POST: /api/data/updateSkills - update skills
-
-  ```
-  {
-      "Ajax": { "title": "Ajax", "start": 2015, "info": "", "status": "active" },
-      "PHP": { "title": "PHP", "start": 2015, "info": "", "status": "active" }
-  }
-  ```
-
-### `configureTesting`
-
-- restructure files for scalability & initiate testing suite
-
-  > - [ ] test all components
-  > - [ ] utilize cypress
-
-### `configureCI/CD`
-
-- added yaml configuration for github actions
-
-  > - [ ] add deploy to multiple hosting sources
-
 ## Folders
 
 ```
@@ -110,3 +77,42 @@ Your app is ready to be deployed!
 - Build the final application by running `npm run build`
 - This application can be served locally by installing the Serve package globally and running\
   `serve ./build`
+
+## Branches
+
+### `addAPI`
+
+- express API for mockData - configured with firebase cloud functions
+
+  > - [ ] req param validation via typescript
+  > - [ ] update authorization via jwt
+  > - [ ] add all data & files to endpoint
+
+  - GET: /api/data/skills - get all skills
+  - POST: /api/data/updateSkills - update skills
+
+  ```
+  {
+      "Ajax": { "title": "Ajax", "start": 2015, "info": "", "status": "active" },
+      "PHP": { "title": "PHP", "start": 2015, "info": "", "status": "active" }
+  }
+  ```
+
+### `configureTesting`
+
+- restructure files for scalability & initiate testing suite
+
+  > - [ ] test all components
+  > - [ ] utilize cypress
+
+### `configureCI/CD`
+
+- added yaml configuration for github actions
+
+  > - [ ] add deploy to multiple hosting sources
+
+### `decoupleComponents`
+
+- separate logic from component
+
+  > - [ ] move theme variables to logic

src/App.jsx

@@ -15,9 +15,9 @@ import FAQ from "./views/faq";
 import Geography from "./views/geographyChart";
 import Memes from "./views/memes";
 import NotFound from "./views/notFound";
+import Calendar from "./views/calendar";
 import { CssBaseline, ThemeProvider } from "@mui/material";
 import { ColorModeContext, useMode } from "./theme";
-import Calendar from "./views/calendar/calendar";
 import Loading from "./components/Global/Loading";
 
 function App() {
@@ -32,7 +32,7 @@ function App() {
         <div className="app">
           <Sidebar isSidebar={isSidebar} />
           <main className="content">
-            <Topbar setIsSidebar={setIsSidebar} setIsLoading={setIsLoading} />
+            <Topbar setIsSidebar={setIsSidebar} />
             <Loading isLoading={isLoading} />
             <Routes>
               <Route path="*" element={<NotFound />} />

src/components/Charts/Bar/index.jsx

@@ -4,6 +4,7 @@ import { themeMode } from "../../../theme";
 import { mockBarData as data } from "../../../data/mockData";
 
 const BarChart = ({ isDashboard = false }) => {
+  // set variables
   const theme = useTheme();
   const colors = themeMode(theme.palette.mode);
 

src/components/Charts/Geography/index.jsx

@@ -5,6 +5,7 @@ import { themeMode } from "../../../theme";
 import { mockGeographyData as data } from "../../../data/mockData";
 
 const GeographyChart = ({ isDashboard = false }) => {
+  // set variables
   const theme = useTheme();
   const colors = themeMode(theme.palette.mode);
   return (

src/components/Charts/Line/index.jsx

@@ -4,6 +4,7 @@ import { themeMode } from "../../../theme";
 import { mockLineData as data } from "../../../data/mockData";
 
 const LineChart = ({ isCustomLineColors = false, isDashboard = false }) => {
+  // set variables
   const theme = useTheme();
   const colors = themeMode(theme.palette.mode);
 

src/components/Charts/Pie/index.jsx

@@ -4,6 +4,7 @@ import { useTheme } from "@mui/material";
 import { mockPieData as data } from "../../../data/mockData";
 
 const PieChart = () => {
+  // set variables
   const theme = useTheme();
   const colors = themeMode(theme.palette.mode);
   return (

src/components/DataDisplay/StatBox/index.jsx

@@ -3,6 +3,7 @@ import { themeMode } from "../../../theme";
 import ProgressCircle from "../../Misc/ProgressCircle";
 
 const StatBox = ({ title, subtitle, icon, progress, increase }) => {
+  // set variables
   const theme = useTheme();
   const colors = themeMode(theme.palette.mode);
 

src/components/Elements/DragDropList/index.jsx

@@ -7,11 +7,11 @@ import {
   ListItemText,
   Paper,
 } from "@mui/material";
-
-import React, { useState } from "react";
 import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
+import { data, handleDragEnd } from "./logic";
 
-const ItemsList = () => {
+const ItemsList = ({ itemData }) => {
+  /* pass data as prop instead
   const itemData = [
     {
       id: 0,
@@ -24,36 +24,10 @@ const ItemsList = () => {
       img: "https://images.unsplash.com/photo-1551782450-a2132b4ba21d",
       title: "Burger",
       author: "@rollelflex_graphy726",
-    },
-    {
-      id: 2,
-      img: "https://images.unsplash.com/photo-1522770179533-24471fcdba45",
-      title: "Camera",
-      author: "@helloimnik",
-    },
-    {
-      id: 3,
-      img: "https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c",
-      title: "Coffee",
-      author: "@nolanissac",
-    },
-    {
-      id: 4,
-      img: "https://images.unsplash.com/photo-1533827432537-70133748f5c8",
-      title: "Hats",
-      author: "@hjrc33",
-    },
+    }
   ];
+  */
 
-  const [data, setData] = useState(itemData);
-  const handleDragEnd = (result) => {
-    if (!result.destination) return;
-    const items = Array.from(data);
-    const [reorderedItem] = items.splice(result.source.index, 1);
-    items.splice(result.destination.index, 0, reorderedItem);
-    console.log(items);
-    setData(items);
-  };
   return (
     <div>
       <Container maxWidth="sm">

src/components/Elements/DragDropList/logic.jsx

@@ -0,0 +1,12 @@
+import { useState } from "react";
+
+export const [data, setData] = useState(itemData);
+
+export const handleDragEnd = (result) => {
+  if (!result.destination) return;
+  const items = Array.from(data);
+  const [reorderedItem] = items.splice(result.source.index, 1);
+  items.splice(result.destination.index, 0, reorderedItem);
+  console.log(items);
+  setData(items);
+};

src/components/Global/Sidebar/index.jsx

@@ -1,9 +1,7 @@
 import { useState } from "react";
 import { ProSidebar, Menu, MenuItem } from "react-pro-sidebar";
-import { Box, IconButton, Typography, useTheme } from "@mui/material";
 import { Link } from "react-router-dom";
-import "react-pro-sidebar/dist/css/styles.css";
-import { themeMode } from "../../../theme";
+import { Box, IconButton, Typography, useTheme } from "@mui/material";
 import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
 import PeopleOutlinedIcon from "@mui/icons-material/PeopleOutlined";
 import ContactsOutlinedIcon from "@mui/icons-material/ContactsOutlined";
@@ -16,8 +14,12 @@ import TimelineOutlinedIcon from "@mui/icons-material/TimelineOutlined";
 import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined";
 import MapOutlinedIcon from "@mui/icons-material/MapOutlined";
 import TagFacesIcon from "@mui/icons-material/TagFaces";
+import "react-pro-sidebar/dist/css/styles.css";
+import { themeMode } from "../../../theme";
 
-const Item = ({ title, to, icon, selected, setSelected }) => {
+// internal component for styling sidebar list item
+const SidebarItem = ({ title, to, icon, selected, setSelected }) => {
+  // set variables
   const theme = useTheme();
   const colors = themeMode(theme.palette.mode);
   return (
@@ -36,6 +38,7 @@ const Item = ({ title, to, icon, selected, setSelected }) => {
 };
 
 const Sidebar = () => {
+  // set variables
   const theme = useTheme();
   const colors = themeMode(theme.palette.mode);
   const [isCollapsed, setIsCollapsed] = useState(false);
@@ -119,7 +122,7 @@ const Sidebar = () => {
 
           {/* Links with Icons */}
           <Box paddingLeft={isCollapsed ? undefined : "10%"}>
-            <Item
+            <SidebarItem
               title="Dashboard"
               to="/"
               icon={<HomeOutlinedIcon />}
@@ -134,21 +137,21 @@ const Sidebar = () => {
             >
               Data
             </Typography>
-            <Item
+            <SidebarItem
               title="Meme Generator"
               to="/memes"
               icon={<TagFacesIcon />}
               selected={selected}
               setSelected={setSelected}
             />
-            <Item
+            <SidebarItem
               title="Manage Team"
               to="/team"
               icon={<PeopleOutlinedIcon />}
               selected={selected}
               setSelected={setSelected}
             />
-            <Item
+            <SidebarItem
               title="Contacts"
               to="/contacts"
               icon={<ContactsOutlinedIcon />}
@@ -162,21 +165,21 @@ const Sidebar = () => {
             >
               Pages
             </Typography>
-            <Item
+            <SidebarItem
               title="Update Profile"
               to="/profileForm"
               icon={<PersonOutlinedIcon />}
               selected={selected}
               setSelected={setSelected}
             />
-            <Item
+            <SidebarItem
               title="Calendar"
               to="/calendar"
               icon={<CalendarTodayOutlinedIcon />}
               selected={selected}
               setSelected={setSelected}
             />
-            <Item
+            <SidebarItem
               title="FAQ Page"
               to="/faq"
               icon={<HelpOutlineOutlinedIcon />}
@@ -191,28 +194,28 @@ const Sidebar = () => {
             >
               Charts
             </Typography>
-            <Item
+            <SidebarItem
               title="Bar Chart"
               to="/bar"
               icon={<BarChartOutlinedIcon />}
               selected={selected}
               setSelected={setSelected}
             />
-            <Item
+            <SidebarItem
               title="Pie Chart"
               to="/pie"
               icon={<PieChartOutlineOutlinedIcon />}
               selected={selected}
               setSelected={setSelected}
             />
-            <Item
+            <SidebarItem
               title="Line Chart"
               to="/line"
               icon={<TimelineOutlinedIcon />}
               selected={selected}
               setSelected={setSelected}
             />
-            <Item
+            <SidebarItem
               title="Geography Chart"
               to="/geography"
               icon={<MapOutlinedIcon />}