Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: refactor Dashboard components and create TutorialCard for better modularity

Browse Source
This commit is contained in:
Vishnu
2025-09-15 17:04:21 +05:30
parent 9b2c33ffe8
commit b967ee585d
4 changed files with 69 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
app/src/components/Dashboard/DasboardUseCases.tsx
View File

@@ -1,36 +1,35 @@
import React, { useEffect, useState } from "react";
import DashboardNavBar from "./DashboardNavBar";
import { projectTutorialApi } from "../../services/dashboard/projectTutorialApi";
import { TutorialCard } from "./DashboardTutorial";
import { TutorialCard } from "./TutorialCard";
import { getUserData } from "../../functions/getUserData";
import { ALPHA_ORG } from "../../pages/Dashboard";
interface Tutorial {
_id: string;
name: string;
thumbnail?: string;
updatedAt: string;
}
const DUMMY_DATA = [
//remove later
{
_id: "1",
name: "Robotic Arm Control",
thumbnail: "https://signfix.com.au/wp-content/uploads/2017/09/placeholder-600x400.png",
updatedAt: new Date().toISOString(),
},
{
_id: "2",
name: "Simulation Basics",
thumbnail: "https://signfix.com.au/wp-content/uploads/2017/09/placeholder-600x400.png",
updatedAt: new Date().toISOString(),
},
{
_id: "3",
name: "3D Visualization",
thumbnail: "https://signfix.com.au/wp-content/uploads/2017/09/placeholder-600x400.png",
updatedAt: new Date().toISOString(),
},
];
const DashboardUseCases: React.FC = () => {
const [useCases, setUseCases] = useState<Tutorial[]>([
{
_id: "1",
name: "Robotic Arm Control",
thumbnail: "https://signfix.com.au/wp-content/uploads/2017/09/placeholder-600x400.png",
updatedAt: new Date().toISOString(),
},
{
_id: "2",
name: "Simulation Basics",
thumbnail: "https://signfix.com.au/wp-content/uploads/2017/09/placeholder-600x400.png",
updatedAt: new Date().toISOString(),
},
{
_id: "3",
name: "3D Visualization",
thumbnail: "https://signfix.com.au/wp-content/uploads/2017/09/placeholder-600x400.png",
updatedAt: new Date().toISOString(),
},
]);
const [useCases, setUseCases] = useState<Tutorial[]>(DUMMY_DATA || []); // default []
const { organization } = getUserData();
useEffect(() => {
const fetchTutorials = async () => {
@@ -52,13 +51,15 @@ const DashboardUseCases: React.FC = () => {
<DashboardNavBar page="tutorial" />
<div className="dashboard-container" style={{ height: "calc(100% - 87px)" }}>
<div className="tutorials-list">
<div className="tutorials-main-header">
<div className="tutorial-buttons-container">
<button className="add-tutorials-button">
<span>+</span>
</button>
{organization === ALPHA_ORG && (
<div className="tutorials-main-header">
<div className="tutorial-buttons-container">
<button className="add-tutorials-button">
<span>+</span>
</button>
</div>
</div>
</div>
)}
{useCases.length > 0 ? (
useCases.map((tut) => <TutorialCard key={tut._id} tutorial={tut} />)
) : (

28
app/src/components/Dashboard/DashboardTutorial.tsx
View File

@@ -2,33 +2,7 @@ import React, { useEffect, useState } from "react";
import DashboardNavBar from "./DashboardNavBar";
import { projectTutorialApi } from "../../services/dashboard/projectTutorialApi";
import { AIIcon } from "../icons/ExportCommonIcons";
import { DeleteIcon } from "../icons/ContextMenuIcons";
export const TutorialCard: React.FC<{ tutorial: Tutorial }> = ({ tutorial }) => {
return (
<div className="tutorial-card-container">
<div
className="preview-container"
style={{
backgroundImage: tutorial.thumbnail
? `url(${tutorial.thumbnail})`
: "linear-gradient(135deg, #ddd, #bbb)",
}}
></div>
<div className="tutorial-details">
<div className="context">
<div className="tutorial-name">{tutorial.name}</div>
<div className="updated-date">
{new Date(tutorial.updatedAt).toLocaleDateString()}
</div>
</div>
<div className="delete-option">
<DeleteIcon />
</div>
</div>
</div>
);
};
import { TutorialCard } from "./TutorialCard";
const DashboardTutorial: React.FC = () => {
const [tutorials, setTutorials] = useState<Tutorial[]>([]);

32
app/src/components/Dashboard/TutorialCard.tsx Normal file
View File

@@ -0,0 +1,32 @@
import { getUserData } from "../../functions/getUserData";
import { ALPHA_ORG } from "../../pages/Dashboard";
import { DeleteIcon } from "../icons/ContextMenuIcons";
export const TutorialCard: React.FC<{ tutorial: Tutorial }> = ({ tutorial }) => {
const { organization } = getUserData();
return (
<div className="tutorial-card-container">
<div
className="preview-container"
style={{
backgroundImage: tutorial.thumbnail
? `url(${tutorial.thumbnail})`
: "linear-gradient(135deg, #ddd, #bbb)",
}}
></div>
<div className="tutorial-details">
<div className="context">
<div className="tutorial-name">{tutorial.name}</div>
<div className="updated-date">
{new Date(tutorial.updatedAt).toLocaleDateString()}
</div>
</div>
{organization === ALPHA_ORG && (
<div className="delete-option">
<DeleteIcon />
</div>
)}
</div>
</div>
);
};

2
app/src/pages/Dashboard.tsx
View File

@@ -6,6 +6,8 @@ import DashboardTutorial from "../components/Dashboard/DashboardTutorial";
import DashboardMain from "../components/Dashboard/DashboardMain";
import DashboardUseCases from "../components/Dashboard/DasboardUseCases";
export const ALPHA_ORG = "hexrfactory";
const Dashboard: React.FC = () => {
const [activeTab, setActiveTab] = useState<string>("Home");
const { socket } = useSocketStore();