updating names cont.

client/src/components/Canvas/Canvas.jsx

@@ -1,11 +1,10 @@
-import { Box } from "@chakra-ui/react";
-import GlobalMapCanvas from "./views/GlobalMap";
-import RegionalMapCanvas from "./views/RegionalMap";
-import VolcanoCanvas from "./views/Volcano";
-import AdminCanvas from "./views/Admin";
-import AccountCanvas from "./views/Account"
-import SettingsCanvas from "./views/Settings"
-import { HomeCanvas } from "./views/Home";
+import GlobalMap from "./views/GlobalMap";
+import RegionalMap from "./views/RegionalMap";
+import Volcano from "./views/Volcano";
+import Admin from "./views/Admin";
+import Account from "./views/Account"
+import Settings from "./views/Settings"
+import Home from "./views/Home";
 import { DASHBOARD_VIEWS } from "@/constants/viewKeys";
 
 export default function Canvas({...props}) {
@@ -14,14 +13,14 @@ export default function Canvas({...props}) {
         <>
             {/* Check if view is a tab inside the Canvas Header */}
             { DASHBOARD_VIEWS.includes(view) && (
-                <HomeCanvas width="100%" height="100%" {...props}/>
+                <Home width="100%" height="100%" {...props}/>
             )}
-            {view === "global" && <GlobalMapCanvas />}
-            {view === "regional" && <RegionalMapCanvas />}
-            {view === "volcano" && <VolcanoCanvas />}
-            {view === "admin" && <AdminCanvas />}
-            {view === "account" && <AccountCanvas />}
-            {view === "settings" && <SettingsCanvas />}
+            {view === "global" && <GlobalMap />}
+            {view === "regional" && <RegionalMap />}
+            {view === "volcano" && <Volcano />}
+            {view === "admin" && <Admin />}
+            {view === "account" && <Account />}
+            {view === "settings" && <Settings />}
         </>
     );
 }

client/src/components/Canvas/views/Account.jsx

@@ -1,7 +1,7 @@
 import { Box, Flex, Field, Input, Stack, Heading, Button } from "@chakra-ui/react"
 import { useForm } from 'react-hook-form';
 
-export default function AccountCanvas()  {
+export default function Account()  {
   const { 
     register, 
     handleSubmit,

client/src/components/Canvas/views/Admin.jsx

@@ -1,6 +1,6 @@
 import { Box, Text } from '@chakra-ui/react';
 
-export default function AdminCanvas() {
+export default function Admin() {
   return (
     <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
       <Box 

client/src/components/Canvas/views/GlobalMap.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
 
-export default function GlobalMapCanvas() {
+export default function GlobalMap() {
   const position = [45.61142478054226, -122.49630033167544]; // [latitude, longitude]
   return (
       <MapContainer center={position} zoom={3} style={{ height: "100%", width: "100%" }}>

client/src/components/Canvas/views/Home.jsx

@@ -1,6 +1,5 @@
 import { HStack, Flex, Tabs } from "@chakra-ui/react";
-import { useState } from "react";
-import WidgetCanvas from "./HomeTabs/MyDashboard";
+import MyDashboard from "./HomeTabs/MyDashboard";
 import { SearchBar } from "../CanvasComponents/SearchBar";
 import { SettingsButton } from "../CanvasComponents/SettingsButton";
 import { DailyActivity } from "./HomeTabs/DailyActivity";
@@ -11,7 +10,7 @@ import { CancelButton } from "../CanvasComponents/CancelButton";
 import { SaveButton } from "../CanvasComponents/SaveButton";
 import DeleteAllButton from "../CanvasComponents/DeleteAllButton";
 
-export function HomeCanvas({...props}) {
+export default function Home({...props}) {
   // deconstructing props
   const { width, height, view, layout, setLayout, setOriginalLayout, onLayoutChange, onChangeView, onCancel, 
     isDelete, setIsDelete, isEditable, setIsEditable, widgetArray, setWidgetArray } = props;
@@ -84,7 +83,7 @@ export function HomeCanvas({...props}) {
   }
 
   // Prop Forwarding
-  const widgetCanvasProps = { layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray };
+  const MyDashboardProps = { layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray };
   const settingsButtonProps = { onAddWidget, onEditWidgets, onDeleteWidgets, setWidgetArray, widgetArray };
   
   return (
@@ -113,7 +112,7 @@ export function HomeCanvas({...props}) {
 				justify="space-between"
       >
         <Tabs.List>
-          <Tabs.Trigger value="widget" fontSize="lg">
+          <Tabs.Trigger value="mydashboard" fontSize="lg">
             My Dashboard
           </Tabs.Trigger>
           <Tabs.Trigger value="gas" fontSize="lg">
@@ -150,8 +149,8 @@ export function HomeCanvas({...props}) {
       </Flex>
 
       {/* CANVAS */}
-      <Tabs.Content value="widget">
-        <WidgetCanvas {...widgetCanvasProps}/>
+      <Tabs.Content value="mydashboard">
+        <MyDashboard {...MyDashboardProps}/>
       </Tabs.Content>
       <Tabs.Content value="gas">
         <Gas />

client/src/components/Canvas/views/HomeTabs/MyDashboard.jsx

@@ -1,7 +1,7 @@
 import GridLayout, { WidthProvider } from 'react-grid-layout';
 import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';
 
-export default function WidgetCanvas({layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray}) {
+export default function MyDashboard({layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray}) {
   console.log("rendering MyDashboard");
   const recipe = useSlotRecipe({ key: "widget" });
   const styles = recipe(); // using root recipe for widget below

client/src/components/Canvas/views/RegionalMap.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
 
-export default function GlobalMapCanvas() {
+export default function RegionalMap() {
   const position = [45.61142478054226, -122.49630033167544]; // [latitude, longitude]
   return (
       <MapContainer center={position} zoom={13} style={{ height: "100%", width: "100%" }}>

client/src/components/Canvas/views/Settings.jsx

@@ -1,6 +1,6 @@
 import { Box, Text } from '@chakra-ui/react';
 
-export default function SettingsCanvas() {
+export default function Settings() {
   return (
     <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
       <Box 

client/src/components/Canvas/views/Volcano.jsx

@@ -1,6 +1,6 @@
 import { Box, Text } from '@chakra-ui/react';
 
-export default function VolcanoCanvas() {
+export default function Volcano() {
     return (
         <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
             <Box 

client/src/components/Dashboard.jsx

@@ -12,7 +12,7 @@ export default function Dashboard() {
   const [isEditable, setIsEditable] = useState(false); // editable=true means static=false (vice versa)
   const [isDelete, setIsDelete] = useState(false);
   const [originalLayout, setOriginalLayout] = useState([]);
-  const [view, setView] = useState("widget");
+  const [view, setView] = useState("mydashboard");
   const [layout, setLayout] = useState([]);
   const [widgetArray, setWidgetArray] = useState([]);
 

client/src/components/Sidebar/Sidebar.jsx

@@ -19,7 +19,7 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
 
     // this list of btns will come from the db (not every usr will have access to admin)
   const buttons = [
-    {icon: FaHome, name: "Home", view: "widget"},
+    {icon: FaHome, name: "Home", view: "mydashboard"},
     {icon: FaGlobeAmericas, name: "Global Map", view: "global"},
     {icon: FaMapMarkerAlt, name: "Regional Map", view: "regional"},
     {icon: FaVolcano, name: "Volcano", view: "volcano"},
@@ -35,7 +35,7 @@ export default function Sidebar({ view, onChangeView, darkMode, setDarkMode }) {
   useEffect(() => {
     console.log("Current view = ", view);
     const newIndex = buttons.findIndex((btn) => {
-      if (btn.view === "widget") {
+      if (btn.view === "mydashboard") {
         return DASHBOARD_VIEWS.includes(view);
       }
       return btn.view === view;

client/src/constants/viewKeys.js

@@ -1,9 +1,9 @@
 // Main views called from Sidebar
-export const DASHBOARD_VIEWS = ["widget", "gas", "seismic", "remote", "daily"]
+export const DASHBOARD_VIEWS = ["mydashboard", "gas", "seismic", "remote", "daily"]
 
-// Sub views called from inside DashboardCanvas
+// Sub views called from inside Home.jsx
 export const VIEW_LABELS = {
-    widget: "My Dashboard",
+    mydashboard: "My Dashboard",
     gas: "Gas", 
     seismic: "Seismic", 
     remote: "Remote Sensing",