I have a nextjs13 application in which I have mapped over a list of workspaces in Navbar.jsx file.What my main objective is to display the particular workspaces details on the HomePage.jsx which will be distinguished by the workspace_id received in a json object.
When clicked on a particular mapped workspace, HomePage.jsx should be dynamically change accordingly
The relevant info should be passed from the Navbar.jsx to HomePage.jsx as props
I have tried passing the props but it doesn’t work for me
Below are the Navbar.jsx, HomePage.jsx, layout.jsx (navbar component called here for the whole app) page.js (Homepage component called here), Json object example
Navbar.jsx->
import {
Box,
Drawer,
Typography,
Button,
Avatar,
MenuItem,
Menu,
IconButton,
} from "@mui/material";
import React, { useEffect, useState, useContext } from "react";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import PersonAddIcon from "@mui/icons-material/PersonAdd";
import HomeIcon from "@mui/icons-material/Home";
import ReplayIcon from "@mui/icons-material/Replay";
import IosShareIcon from "@mui/icons-material/IosShare";
import UploadIcon from "@mui/icons-material/Upload";
import { useRouter } from "next/navigation";
import { Lock } from "@mui/icons-material";
import services from "../utils/services";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
import get_workspaces_and_roles from "../apis/get_workspaces_and_roles";
import { Workspaces, Workspace } from "../types/workspace_types";
import AddWorkspacePopup from "./AddWorkspacePopup";
const NavBar = ({ onSelectWorkspace }) => {
const [workspaces, setWorkspace] = useState(null);
const [isOpen, setIsOpen] = useState(false);
const [selectedWorkspaceId, setSelectedWorkspaceId] = useState(null);
const [selectedWorkspaceName, setSelectedWorkspaceName] = useState(null);
const get_workspaces_hook = () => {
const user = services.get_user();
var email = user?.email ?? "";
const payload = {
email: "[email protected]",
};
if (payload.email === "") {
alert("Please select an email");
} else {
const workspaces = new Workspaces();
get_workspaces_and_roles(payload)
.then((response) => {
console.log(response.data);
const available_space = response.data.available_space ?? 0.0;
const available_workspace = response.data.available_workspace ?? 0; // your workspaces
const total_workspaces = response?.data?.data ?? []; // your workspaces
total_workspaces.forEach((element) => {
const workspace = new Workspace(
element?.workspace_name ?? "",
element?.created_at ?? 0,
element?.workspace_id ?? "",
element?.role_id ?? "",
element?.role ?? "",
element?.owner ?? ""
);
workspaces.add_workspace(workspace);
});
workspaces.add_meta(available_space, available_workspace);
setWorkspace(workspaces);
})
.catch((error) => {
console.log(error);
// alert(error.response.data.message);
});
}
};
if (!workspaces) get_workspaces_hook();
const router = useRouter();
return (
<>
<Box
display="flex"
flexDirection="column"
overflow="auto"
sx={{ backgroundColor: "#15141D" }}
>
<Typography
sx={{
fontSize: "25px",
fontWeight: "bold",
width: "32vh",
m: "10px",
cursor: "pointer",
}}
onClick={() => router.push("/")}
>
PrevRun
</Typography>
<Box
sx={{
height: "92vh",
width: "40vh",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
justifyContent: "space-between",
p: "10px",
overflow: "auto",
borderRight: ".5px solid black",
}}
>
<Box>
<Box
sx={{ borderBottom: ".5px solid white" }}
display="flex"
alignItems="center"
>
<IconButton
size="large"
aria-label="ac count of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
color="inherit"
>
<Avatar
sx={{
height: "25px",
width: "25px",
}}
/>
</IconButton>
<Typography>Utsav</Typography>
</Box>
<Typography sx={{ color: "white", m: "15px" }}>Menu</Typography>
<Box
sx={{
height: "35vh",
width: "100%",
overflowY: "auto",
}}
>
{workspaces?.get_workspaces().workspaces.map((workspace) => (
<Button
key={workspace.workspace_id}
onClick={() => {
setSelectedWorkspaceId(workspace.workspace_id);
setSelectedWorkspaceName(workspace.workspace_name);
console.log(
"Selected Workspace ID:",
workspace.workspace_id
);
console.log(
"Selected Workspace name:",
workspace.workspace_name
);
console.log("Workspace Object:", workspace);
onSelectWorkspace(workspace.workspace_id);
router.push("/");
}}
sx={{
display: "flex",
justifyContent: "start",
width: "100%",
my: "5px",
fontSize: ".8rem",
}}
>
<AccountCircleIcon sx={{ mr: "8px" }} />
{workspace.workspace_name}
</Button>
))}
</Box>
<Button
style={{ textAlign: "left" }}
sx={{
display: "flex",
justifyContent: "start",
width: "100%",
textAlign: "left",
fontSize: ".8rem",
mt: "30px",
color: "cyan",
}}
onClick={() => setIsOpen(true)}
>
<PersonAddIcon sx={{ mr: "8px" }} />
Add Workspace
</Button>
</Box>
<Box
display="flex"
flexDirection="column"
alignItems="flex-start"
sx={{ mb: "10px" }}
>
<Button
sx={{
fontSize: ".8rem",
width: "100%",
display: "flex",
justifyContent: "start",
}}
onClick={() => router.push("/")}
>
<HomeIcon sx={{ mr: "8px" }} />
Home
</Button>
<Button
sx={{
fontSize: ".8rem",
width: "100%",
display: "flex",
justifyContent: "start",
}}
>
<ReplayIcon sx={{ mr: "8px" }} />
Revision Required
</Button>
<Button
sx={{
fontSize: ".8rem",
width: "100%",
display: "flex",
justifyContent: "start",
}}
>
<IosShareIcon sx={{ mr: "8px" }} />
Sent For Approval
</Button>
<Button
sx={{
fontSize: ".8rem",
width: "100%",
display: "flex",
justifyContent: "start",
}}
onClick={() =>
// view_video("basketball.mp4")
router.push("/uploadvideo")
}
>
<UploadIcon sx={{ mr: "8px" }} />
Upload video
</Button>
<Button
sx={{
fontSize: ".8rem",
width: "100%",
display: "flex",
justifyContent: "start",
}}
onClick={() => router.push("/auth")}
>
<Lock sx={{ mr: "8px" }} />
Login
</Button>
</Box>
</Box>
</Box>
<AddWorkspacePopup isOpen={isOpen} setIsOpen={setIsOpen} />
</>
);
};
export default NavBar;
HomePage.jsx ->
"use client";
import { Box, Drawer, Button, Typography } from "@mui/material";
import React, { useEffect, useState } from "react";
import RevisionRequiredVideos from "./RevisionRequiredVideos";
import Header from "../components/Header";
import SentForApproval from "./SentForApproval";
import ApprovedVideos from "./ApprovedVideos";
import RejectedVideos from "./RejectedVideos";
import FailedVideos from "./FailedVideos";
import UploadedVideos from "./UploadedVideos";
import axios from "axios";
import get_workspace_data from "../apis/get_workspace_data";
import { Upload } from "@mui/icons-material";
const HomePage = () => {
const [revesionRequiredVideos, setRevesionRequiredVideos] = useState([]);
const [approvalRequiredVideos, setApprovalRequiredVideos] = useState([]);
const [approvedVideos, setApprovedVideos] = useState([]);
const [rejectedVideos, setRejectedVideos] = useState([]);
const [failedVideos, setFailedVideos] = useState([]);
const [uploadedVideos, setUploadedVideos] = useState([]);
const [ownerRoleID, setOwnerRoleID] = useState("");
useEffect(() => {
get_workspace_data({ workspace_id: "12121212-e423-r4322-133422r3M" })
//dynamic render of workspace_id
.then((res) => {
console.log(res?.data);
setOwnerRoleID(
res?.data?.members?.filter((member) => {
if (member?.role === "owner") {
return member?.role_id;
}
})
);
setRevesionRequiredVideos(
res?.data?.videos?.filter((video) => {
if (video?.status === "revision_required") {
return video;
}
})
);
setApprovalRequiredVideos(
res?.data?.videos?.filter((video) => {
if (video?.status === "approval_required") {
return video;
}
})
);
setApprovedVideos(
res?.data?.videos?.filter((video) => {
if (video?.status === "approved") {
return video;
}
})
);
setRejectedVideos(
res?.data?.videos?.filter((video) => {
if (video?.status === "rejected") {
return video;
}
})
);
setFailedVideos(
res?.data?.videos?.filter((video) => {
if (video?.status === "failed") {
return video;
}
})
);
setUploadedVideos(
res?.data?.videos?.filter((video) => {
if (video?.status === "uploaded") {
return video;
}
})
);
})
.catch((e) => console.log(e));
}, []);
console.log(revesionRequiredVideos);
console.log(approvalRequiredVideos);
const [user, setUser] = useState("");
const [s3_key, setS3Key] = useState("");
return (
<Box>
<Header title={`${user}'s workspace`} />
<RevisionRequiredVideos
revesionRequiredVideos={revesionRequiredVideos}
s3_key={s3_key}
ownerRoleID={ownerRoleID}
/>
<SentForApproval
approvalRequiredVideos={approvalRequiredVideos}
s3_key={s3_key}
ownerRoleID={ownerRoleID}
/>
<ApprovedVideos
approvedVideos={approvedVideos}
s3_key={s3_key}
ownerRoleID={ownerRoleID}
/>
<RejectedVideos
rejectedVideos={rejectedVideos}
s3_key={s3_key}
ownerRoleID={ownerRoleID}
/>
<FailedVideos
failedVideos={failedVideos}
s3_key={s3_key}
ownerRoleID={ownerRoleID}
/>
<UploadedVideos
uploadedVideos={uploadedVideos}
s3_key={s3_key}
ownerRoleID={ownerRoleID}
/>
</Box>
);
};
export default HomePage;
layout.js->
"use client"
import { Poppins } from "next/font/google";
import "./globals.css";
import ThemeRegistry from "../../theme/ThemeRegistry";
import TestingComponent from "./apis/testing_component";
import NavBar from "./components/Navbar";
import { Box } from "@mui/material";
import Auth from "./components/Auth";
import { useState } from "react";
const poppins = Poppins({
subsets: ["latin"],
weight: ["400", "500", "600", "700", "800", "900"],
});
export default function RootLayout({ children }) {
const [isLogedIn, setIsLogedIn] = useState(true);
const handleSelectWorkspace = (selectedWorkspace) => {
console.log("Selected Workspace in layout.js:", selectedWorkspace);
};
const [selectedWorkspaceId, setSelectedWorkspaceId] = useState(null);
return (
<>
{!isLogedIn ? (
<html>
<head />
<body>
<Box>
<Auth isLogedIn={isLogedIn} setIsLogedIn={setIsLogedIn} />
</Box>
</body>
</html>
) : (
<ThemeRegistry>
<html>
<head />
<body>
<Box display="flex" sx={{ width: "100%", overflow: "auto" }}>
<Box sx={{ width: "20%", position: "sticky" }}>
<NavBar onSelectWorkspace={handleSelectWorkspace} selectedWorkspaceId={selectedWorkspaceId} />
</Box>
<Box sx={{ width: "80%", overflow: "auto" }}>
<main className={poppins.className}>{children}</main>
</Box>
</Box>
{/* <ToastContainer/> */}
</body>
</html>
</ThemeRegistry>
)}
</>
);
}
page.js ->
import HomePage from "./components/HomePage";
export default function Home() {
return <HomePage/>
}
Json object ->
{
workspace_name: 'random',
owner: '[email protected]',
created_at: '1703438656.809325',
workspace_id: '7d3b9f4e-95b1-4c67-8a82-ee9bc6ac8fa0',
role_id: '2f6a8b7d-813c-4a9d-af19-cf67e3d2b5a5',
role: 'owner',
oauth_configured_email: ''
}