Skip to content

MGC-JUL-24 | Syed Arslan Haider| React-Router|WEEK3 #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SyedArslanHaider wants to merge 3 commits into
base: main
Choose a base branch
from
Open

MGC-JUL-24 | Syed Arslan Haider| React-Router|WEEK3 #1

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4e562da
add react router and add some links for multiple pages
SyedArslanHaider Feb 16, 2025
297e3dc
Add MSW (#6)
nicostuhlfauth Feb 22, 2025
75adaf6
handle data with handler.js file
SyedArslanHaider Feb 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 80 additions & 0 deletions web/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
/* Main Container for Layout */
.container {
display: flex;
height: 100vh;
/* Full height of the viewport */
}

/* Sidebar Styles */
.sidebar {
width: 300px;
/* Set sidebar width */
background-color: #f4f4f4;
/* Background color for the sidebar */
display: flex;
flex-direction: column;
/* Stack the logo and links vertically */
align-items: center;
/* Center the items horizontally */
padding: 20px;
gap: 20px;
/* Space between the items */
}

/* Logo Styles */
.logo {
margin-top: 30px;
width: 146px;
/* Set width of the logo */
height: 63px;
/* Set height of the logo */
}

/* Nav links container */
.nav-links {
margin-top: 40px;
list-style: none;
/* Remove default list styling */
padding: 0;
/* Remove padding */
display: flex;
/* Use flexbox to align items */
flex-direction: column;
/* Stack links vertically */
gap: 25px;
/* Add space between the links */
align-items: center;
/* Center links horizontally */
}

/* Link styles */
.nav-links a {
text-decoration: none;
/* Remove underline from links */
color: black;
/* Set text color */
font-weight: bold;
/* Make text bold */
font-size: 18px;
/* Set font size */
padding: 5px 10px;
/* Add padding to links */
transition: background-color 0.3s ease;
/* Add smooth transition effect */
}

/* Link hover effect */
.nav-links a:hover {
background-color: #ddd;
/* Light background color on hover */
border-radius: 5px;
/* Rounded corners */
}

/* Content Area */
.content {
flex-grow: 1;
/* Make content area take up remaining space */
padding: 20px;
/* Add padding to content */
}
78 changes: 22 additions & 56 deletions web/src/App.jsx
View file
Open in desktop
Copy link

@aniolg aniolg Feb 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This component is a Layout now. The implementation is alright!

But could be nice trying to follow the conventions and relocate this file to the pages folder.

The recommendation from React Router library is set a name with an underscore sign in the begging of the file name of the layout component. Also recommend using a specific naming for the different page component files.

An example of can we name our pages directory is the following:

 src/
├── pages/
│   ├── _task-dashboard.add-task.jsx // This is your AddToTask page component (your current TaskManager.jsx file)
│   ├── _task-dashboard.task-manager.jsx // This is your TaskManager page component (your current TaskManager.jsx file)
│   └── _task-dashboard.jsx // This is your navigation bar layout component (your current App.jsx file)

📄 You can find more information about React Router convention in the official documentation: https://reactrouter.com/how-to/file-route-conventions#nested-layouts-without-nested-urls

Original file line number Diff line number Diff line change
@@ -1,62 +1,28 @@
import { useState } from 'react';
import { TaskList } from './components/domains/task/TaskList/TaskList';
import { NewTaskForm } from './components/domains/task/TaskItem/NewFormTask';
import { Link, Outlet } from 'react-router';
import './App.css';
import logo from './logo.svg';

function App() {
const [taskList, setTaskList] = useState([
{
id: 1,
title: 'Re-work UI/UX',
priority: 'low',
dueDate: '12/04/2021',
members: ['Said', 'Rechal'],
description: 'Timmer App',
},
{
id: 2,
title: 'Dark Mode Toggle',
priority: 'low',
dueDate: '12/05/2025',
members: ['Umair', 'Precious'],
description: 'Asa Dark Mode Feature',
},
{
id: 3,
title: 'Assessibility Checks',
priority: 'high',
dueDate: '11/03/2025',
members: ['Ebtesam', 'Deborah'],
description: 'Timer App',
},
{
id: 4,
title: 'Notification Checks',
priority: 'medium',
dueDate: '15/04/2025',
members: ['Michel', 'Ricardo'],
description: 'Timer App',
},
]);
const newTask = (taskName, projectName, event) => {
event.preventDefault();
setTaskList((prevTaskInfo) => [
...prevTaskInfo,
{
id: `${prevTaskInfo.length + 1}`,
title: taskName,
priority: 'High',
dueDate: '11/03/2025',
members: ['Syed', 'Said'],
description: projectName,
},
]);
};
return (
<>
<TaskList tasks={taskList} />
<NewTaskForm handelButton={newTask} />
</>
<div className="container">
{/* Sidebar */}
<div className="sidebar">
<img src={logo} alt="Logo" className="logo" />
<ul className="nav-links">
<li>
<Link to="/task-manager">Task Manager</Link>
Copy link

@aniolg aniolg Feb 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The implementation is good and works as expected. But the library has a specific NavLink component with more advanced features.

📄 If you are keen to learn more about these advanced features, you can consult the React Router documentation: https://reactrouter.com/start/library/navigating#navlink

</li>
<li>
<Link to="/add-task">Add to Task</Link>
</li>
</ul>
</div>

{/* Content Area */}
<div className="content">
<Outlet />
</div>
</div>
);
}

export default App;
54 changes: 46 additions & 8 deletions web/src/components/domains/task/TaskItem/TaskItem.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,90 @@
/* General Styling for the Task Item */
.itemWrapper {
position: relative;
width: 1100px;
/* Adjusted width */
height: 62px;
/* Adjusted height */
background: #E0E4EA;
/* Background color */
border: 1px solid #000000;
/* Border color */
border-radius: 17px;
/* Border radius to match the design */
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
font-size: 16px;
font-weight: 500;
color: rgb(12, 12, 12);
box-sizing: border-box;
/* Ensures padding doesn't affect width/height */
}

/* Styling for the Title */
.itemWrapper h3 {
margin: 0;
font-size: 18px;
font-weight: 600;
/* Adjusted weight for consistency */
color: #000;
/* Default color for the title */
}

/* Styling for the Paragraphs */
.itemWrapper p {
margin: 0 15px;
font-size: 14px;
/* Adjusted font size */
color: #333;
/* Slightly lighter color */
}

/* Background Colors Based on Priority */
/* Priority Styling */
.priority {
font-weight: bold;
padding: 3px 8px;
border-radius: 5px;

}

/* Colors for priority text */
/* Priority Colors */
.low {
background-color: lightgreen;
color: green;
}

.medium {
color: orange;
background-color: rgb(233, 184, 94);
color: rgb(255, 165, 0);
}

.high {
background-color: lightcoral;
color: red;
}

/* Information Wrapper for Icons and Text */
.infoWrapper {
display: flex;
align-items: center;
gap: 5px;
/* Space between icon and text */
}

/* Icon Styling */
.icon {
width: 16px;
height: 16px;
}

/* Styling for the Members Section */
.membersWrapper {
display: flex;
align-items: center;
gap: 5px;
}

/* Adjusted spacing for icons and text in members */
.membersWrapper p {
margin: 0;
font-size: 14px;
}
9 changes: 9 additions & 0 deletions web/src/logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 6 additions & 3 deletions web/src/main.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,17 @@ import { BrowserRouter, Route, Routes } from 'react-router';
import App from './App.jsx';

import './index.css';
import { TempPage } from './pages/TempPage.jsx';
import { TaskManager } from './pages/TaskManager.jsx';
import { AddToTask } from './pages/AddToTask.jsx';

createRoot(document.getElementById('root')).render(
<StrictMode>
<BrowserRouter>
<Routes>
<Route path="/" element={<App />} />
<Route path="/temppage" element={<TempPage />} />
<Route path="/" element={<App />}>
<Route path="/task-manager" element={<TaskManager />} />
<Route path="/add-task" element={<AddToTask />} />
</Route>
</Routes>
</BrowserRouter>
</StrictMode>,
Expand Down
0 ...nts/domains/task/TaskItem/NewFormTask.css → web/src/pages/AddToTask.css
View file
Open in desktop
File renamed without changes.
4 changes: 2 additions & 2 deletions ...nts/domains/task/TaskItem/NewFormTask.jsx → web/src/pages/AddToTask.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useState } from 'react';
import './NewFormTask.css';
import './AddToTask.css';
// eslint-disable-next-line react/prop-types
export function NewTaskForm({ handelButton }) {
export function AddToTask({ handelButton }) {
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');

Expand Down
58 changes: 58 additions & 0 deletions web/src/pages/TaskManager.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { TaskList } from '../components/domains/task/TaskList/TaskList';
import { useState } from 'react';
//import { NewFormTask } from '../components/domains/task/TaskItem/NewFormTask';
export const TaskManager = () => {
const [taskList, setTaskList] = useState([
{
id: 1,
title: 'Re-work UI/UX',
priority: 'low',
dueDate: '12/04/2021',
members: ['Said', 'Rechal'],
description: 'Timmer App',
},
{
id: 2,
title: 'Dark Mode Toggle',
priority: 'low',
dueDate: '12/05/2025',
members: ['Umair', 'Precious'],
description: 'Asa Dark Mode Feature',
},
{
id: 3,
title: 'Assessibility Checks',
priority: 'high',
dueDate: '11/03/2025',
members: ['Ebtesam', 'Deborah'],
description: 'Timer App',
},
{
id: 4,
title: 'Notification Checks',
priority: 'medium',
dueDate: '15/04/2025',
members: ['Michel', 'Ricardo'],
description: 'Timer App',
},
]);
const newTask = (taskName, projectName, event) => {
event.preventDefault();
setTaskList((prevTaskInfo) => [
...prevTaskInfo,
{
id: `${prevTaskInfo.length + 1}`,
title: taskName,
priority: 'High',
dueDate: '11/03/2025',
members: ['Syed', 'Said'],
description: projectName,
},
]);
};
return (
<div>
<TaskList tasks={taskList} />
</div>
);
};
7 changes: 0 additions & 7 deletions web/src/pages/TempPage.jsx
View file
Open in desktop

This file was deleted.