Merge branch 'canvas/doing-stuff' into 'main'

updating names cont. See merge request vkuchenik/website-framework!50
2025-08-05 22:08:49 +00:00
parent c4d9725583 46b27d90dd
commit 1543682add
12 changed files with 33 additions and 35 deletions
@@ -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 />}
        </>
    );
 }
@@ -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,
@@ -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 
@@ -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%" }}>
@@ -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 />
@@ -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
@@ -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%" }}>
@@ -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 
@@ -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 
@@ -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([]);

@@ -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;
@@ -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",