Skip to content

Commit

Permalink
Merge pull request #10 from AndraTodor/main
Browse files Browse the repository at this point in the history
navigation component
  • Loading branch information
AndraTodor authored Nov 1, 2024
2 parents 9927e69 + 925b68f commit 3c0ac3a
Show file tree
Hide file tree
Showing 25 changed files with 405 additions and 60 deletions.
12 changes: 12 additions & 0 deletions src/Pages/CurrencyTab/CurrencyTab.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import Currency from '../../components/Currency/Currency';
import React from 'react';
import { useMediaQuery } from 'react-responsive';

const CurrencyTab = () => {
const isDesktopOrLaptop = useMediaQuery({
query: '(min-width: 768px)',
});
return <>{!isDesktopOrLaptop && <Currency />}</>;
};

export default CurrencyTab;
25 changes: 10 additions & 15 deletions src/Pages/Home/Home.jsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,15 @@
import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import {
fetchTransactions,
fetchCategories,
} from '../../redux/operations/transactionsOperations';
import ButtonAddTransactions from '../../components/ButtonAddTransactions/ButtonAddTransactions';
import TransactionsList from '../../components/TransactionsList/TransactionsList';
import React from 'react';
import styles from './Home.module.css';

const Home = () => {
const dispatch = useDispatch();

useEffect(() => {
dispatch(fetchTransactions());

dispatch(fetchCategories());
}, [dispatch]);

return <div>{/*aici restul paginii*/}</div>;
return (
<div className={styles.homeTabContainer}>
<TransactionsList />
<ButtonAddTransactions />
</div>
);
};

export default Home;
11 changes: 11 additions & 0 deletions src/Pages/Home/Home.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
.homeTabContainer {
width: 100%;
margin: 0 auto;
padding: 20px;
}

@media only screen and (min-width: 768px) {
.homeTabContainer {
padding: 0;
}
}
13 changes: 7 additions & 6 deletions src/components/App/App.jsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,20 @@
// src/App.jsx
import React, { useEffect } from 'react';
import { Routes, Route, useNavigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import LoginPage from 'Pages/LoginPage/LoginPage';
// import RegisterFormModal from 'components/RegistrationForm/RegistrationForm';
import DashboardPage from 'Pages/DashboardPage/DashboardPage';
import Home from 'Pages/Home/Home';
import Statistics from 'Pages/Statistics/Statistics';
import RegisterPage from 'Pages/RegisterPage/RegisterPage';
import CurrencyTab from 'Pages/CurrencyTab/CurrencyTab';

const App = () => {
const user = useSelector(state => state.auth.user); // Obține starea autentificării din Redux
const user = useSelector(state => state.auth.user);
const navigate = useNavigate();

useEffect(() => {
if (user) {
navigate('/dashboard');
} else {
navigate('/login');
}
}, [user, navigate]);

Expand All @@ -29,11 +26,15 @@ const App = () => {
path="/dashboard"
element={user ? <DashboardPage /> : <LoginPage />}
/>
<Route path="/home" element={<Home />} />
<Route path="/home" element={user ? <Home /> : <LoginPage />} />
<Route
path="/statistics"
element={user ? <Statistics /> : <LoginPage />}
/>
<Route
path="/currency"
element={user ? <CurrencyTab /> : <LoginPage />}
/>
<Route path="*" element={<Home />} />
</Routes>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
const ButtonAddTransactions = () => {};
export default ButtonAddTransactions;
2 changes: 2 additions & 0 deletions src/components/Chart/Chart.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
const Chart = () => {};
export default Chart;
Empty file.
71 changes: 71 additions & 0 deletions src/components/DashboardComponent/DashboadComponent.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import React, { useEffect, useState } from 'react';
import Select from 'react-select';
import styles from './DashboardComponent.module.css';
import { useDispatch } from 'react-redux';
import { fetchTransactionsSummary } from '../../redux/transactions/operations';

const StatisticsDashboard = () => {
const dispatch = useDispatch();
const [selectedMonth, setSelectedMonth] = useState({
value: 3,
label: 'March',
});
const [selectedYear, setSelectedYear] = useState({
value: 2024,
label: '2024',
});

const onMonthChange = month => setSelectedMonth(month);
const onYearClick = year => setSelectedYear(year);

const optionsYears = [
{ value: 2024, label: '2024' },
{ value: 2023, label: '2023' },
{ value: 2022, label: '2022' },
{ value: 2021, label: '2021' },
{ value: 2019, label: '2019' },
{ value: 2018, label: '2018' },
{ value: 2017, label: '2017' },
];

const optionsMonth = [
{ value: 1, label: 'January' },
{ value: 2, label: 'February' },
{ value: 3, label: 'March' },
{ value: 4, label: 'April' },
{ value: 5, label: 'May' },
{ value: 6, label: 'June' },
{ value: 7, label: 'July' },
{ value: 8, label: 'August' },
{ value: 9, label: 'September' },
{ value: 10, label: 'October' },
{ value: 11, label: 'November' },
{ value: 12, label: 'December' },
];

useEffect(() => {
const data = { month: selectedMonth.value, year: selectedYear.value };
dispatch(fetchTransactionsSummary(data));
}, [dispatch, selectedMonth, selectedYear]);

return (
<div className={styles.mainDiv}>
<Select
value={selectedMonth}
onChange={onMonthChange}
options={optionsMonth}
placeholder={selectedMonth.label}
// styles={customStyles}
/>
<Select
value={selectedYear}
onChange={onYearClick}
options={optionsYears}
placeholder={selectedYear.label}
// styles={customStyles}
/>
</div>
);
};

export default StatisticsDashboard;
30 changes: 30 additions & 0 deletions src/components/DashboardComponent/DashboardComponent.modules.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/* DashboardComponent.module.css */
.mainDiv {
display: flex;
flex-direction: column;
gap: 20px;
padding: 16px 0;
min-width: 280px;
max-width: 280px;
margin: 0 auto;
}

@media only screen and (min-width: 768px) {
.mainDiv {
flex-direction: row;
gap: 16px;
padding: 20px 0 0 0;
min-width: 192px;
max-width: 192px;
margin: 0;
}
}

@media only screen and (min-width: 1280px) {
.mainDiv {
margin-top: 60px;
min-width: 213px;
max-width: 213px;
gap: 32px;
}
}
53 changes: 52 additions & 1 deletion src/components/Navigation/Navigation.jsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,54 @@
const Navigation = () => {};
import React from 'react';
import { NavLink } from 'react-router-dom';
import sprite from './sprite.svg';
import { useMediaQuery } from 'react-responsive';
import styles from './Navigation.module.css';

const Navigation = () => {
const isDesktopOrLaptop = useMediaQuery({ query: '(min-width: 768px)' });
const isMobile = useMediaQuery({ query: '(max-width: 767px)' });

return (
<nav className={styles.navStyledContainer}>
<ul className={styles.navList}>
<li>
<NavLink to="/home" className={styles.styledNavLink}>
<div>
<svg width="38" height="38">
<use href={`${sprite}#homepage`} />
</svg>
</div>
{isDesktopOrLaptop && (
<span className={styles.styledNavText}>Home</span>
)}
</NavLink>
</li>
<li>
<NavLink to="/statistics" className={styles.styledNavLink}>
<div>
<svg width="38" height="38">
<use href={`${sprite}#statistics`} />
</svg>
</div>
{isDesktopOrLaptop && (
<span className={styles.styledNavText}>Statistics</span>
)}
</NavLink>
</li>
{isMobile && (
<li>
<NavLink to="/currency" className={styles.styledNavLink}>
<div>
<svg width="38" height="38">
<use href={`${sprite}#dollar`} />
</svg>
</div>
</NavLink>
</li>
)}
</ul>
</nav>
);
};

export default Navigation;
73 changes: 73 additions & 0 deletions src/components/Navigation/Navigation.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
.navStyledContainer {
padding-top: 40px;
padding-bottom: 28px;
}

.navList {
display: flex;
flex-direction: row;
gap: 32px;
align-items: center;
justify-content: center;
}

.styledNavLink {
display: flex;
justify-content: center;
align-items: center;
color: grey;
transition: all 0.3s;
}

.styledNavLink:hover {
filter: drop-shadow(0px 3px 10px rgba(255, 255, 255, 0.6));
}

.styledNavLink div {
border-radius: 6px;
width: 37px;
height: 37px;
overflow: hidden;
}

.styledNavLink.active {
color: blue;
border-radius: 5px;
transition: all 0.3s;
}

.styledNavLink.active div {
background: white;
border-radius: 6px;
width: 37px;
height: 37px;
filter: drop-shadow(0px 3px 10px rgba(74, 86, 226, 0.5));
}

.styledNavLink svg {
fill: currentColor;
}

.styledNavText {
color: white;
font-size: 18px;
margin-left: 20px;
}

@media only screen and (min-width: 768px) {
.navList {
flex-direction: column;
align-items: baseline;
gap: 12px;
}

.styledNavLink.active {
font-weight: 600;
}

.styledNavLink div,
.styledNavLink svg {
width: 24px;
height: 24px;
}
}
Loading

0 comments on commit 3c0ac3a

Please sign in to comment.