Skip to content

Commit

Permalink
Merge pull request #98 from MargoMarm/loader
Browse files Browse the repository at this point in the history 
Loader
  • Loading branch information
@TaurusVB
TaurusVB committed Sep 27, 2023
2 parents 664e06f + 9ed752e commit a59a079
Show file tree
Hide file tree
Showing 14 changed files with 245 additions and 155 deletions.
1 change: 1 addition & 0 deletions src/components/DayDiaryProductsOrExercises/DayDiaryProductsOrExercises.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ const DayDiaryProductsOrExercises = ({
</ArrowRight>
</AddLink>
</DayDiarySubDiv>

{list.length !== 0 ? (
<>
<TableForDiary
Expand Down
21 changes: 21 additions & 0 deletions src/components/Lodaer/Loader.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { Puff } from 'react-loader-spinner';
const Loader = ({ size }) => {
return (
<Puff
height={size}
width={size}
radius={1}
color="#E6533C"
ariaLabel="puff-loading"
wrapperStyle={{
display: 'flex',
justifyContent: 'center',
margin: '20px auto 0 auto',
}}
wrapperClass=""
visible={true}
/>
);
};

export default Loader;
5 changes: 3 additions & 2 deletions src/components/SharedLayout/SharedLayout.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@ import { Suspense } from 'react';
import { Outlet } from 'react-router-dom';
import { Container } from './SheradLayout.styled';
import Header from '../../components/headersComp/Header/Header';
import Loader from '../../components/Lodaer/Loader';

const SharedLayout = () => {
return (
<Container>
<Header/>
<Suspense fallback={null}>
<Header />
<Suspense fallback={<Loader />}>
<Outlet />
</Suspense>
</Container>
Expand Down
212 changes: 114 additions & 98 deletions src/components/TableForDiary/TableForDiary.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,15 @@ import {
HeaderCell,
Cell,
} from '@table-library/react-table-library/table';
import { useSelector } from 'react-redux';

import Loader from '../Lodaer/Loader';

import PropTypes from 'prop-types';
import {
getIsLoadingExercies,
getIsLoadingPrfoducts,
} from '../../redux/diary/selectors';

const stylesForExercises = { ...BASELINE_THEME, ...BASELINE_THEME_EXERCISES };

Expand All @@ -33,7 +40,8 @@ const TableForDiary = ({
date,
}) => {
const data = { nodes: list };

const isLoadingExercies = useSelector(getIsLoadingExercies);
const isLoadingProducts = useSelector(getIsLoadingPrfoducts);
return (
<>
{productTable && (
Expand All @@ -45,55 +53,59 @@ const TableForDiary = ({
<ColumnNameProducts>Weight</ColumnNameProducts>
<ColumnNameProducts>Recommend</ColumnNameProducts>
</HeaderCont>
<Table data={data} theme={BASELINE_THEME} layout={{ custom: true }}>
{tableList => (
<>
<Header>
<HeaderRow>
<HeaderCell>Title</HeaderCell>
<HeaderCell>Category</HeaderCell>
<HeaderCell>Calories</HeaderCell>
<HeaderCell>Weight</HeaderCell>
<HeaderCell>Recommend</HeaderCell>
<HeaderCell>{''}</HeaderCell>
</HeaderRow>
</Header>
{isLoadingProducts ? (
<Loader size={'60'} />
) : (
<Table data={data} theme={BASELINE_THEME} layout={{ custom: true }}>
{tableList => (
<>
<Header>
<HeaderRow>
<HeaderCell>Title</HeaderCell>
<HeaderCell>Category</HeaderCell>
<HeaderCell>Calories</HeaderCell>
<HeaderCell>Weight</HeaderCell>
<HeaderCell>Recommend</HeaderCell>
<HeaderCell>{''}</HeaderCell>
</HeaderRow>
</Header>

<Body>
{tableList.map(item => (
<Row key={item._id} item={item}>
<Cell>{capitalizeWord(item.title)}</Cell>
<Cell>{capitalizeWord(item.category)}</Cell>
<Cell>{item.calories}</Cell>
<Cell>{item.amount}</Cell>
<Cell>
<BeforeForCell
bgColor={item.recommend ? '#419B09' : '#E9101D'}
/>
{item.recommend ? 'Yes' : 'No'}
</Cell>
<Cell>
<DeleteBtn
onClick={() =>
onDelete({
date,
id: item._id,
calories: item.calories,
time: item.amount,
})
}
>
<DeleteIcon>
<use href={sprite + `#icon-trash`}></use>
</DeleteIcon>
</DeleteBtn>
</Cell>
</Row>
))}
</Body>
</>
)}
</Table>
<Body>
{tableList.map(item => (
<Row key={item._id} item={item}>
<Cell>{capitalizeWord(item.title)}</Cell>
<Cell>{capitalizeWord(item.category)}</Cell>
<Cell>{item.calories}</Cell>
<Cell>{item.amount}</Cell>
<Cell>
<BeforeForCell
bgColor={item.recommend ? '#419B09' : '#E9101D'}
/>
{item.recommend ? 'Yes' : 'No'}
</Cell>
<Cell>
<DeleteBtn
onClick={() =>
onDelete({
date,
id: item._id,
calories: item.calories,
time: item.amount,
})
}
>
<DeleteIcon>
<use href={sprite + `#icon-trash`}></use>
</DeleteIcon>
</DeleteBtn>
</Cell>
</Row>
))}
</Body>
</>
)}
</Table>
)}
</CustomContainer>
)}

Expand All @@ -108,56 +120,60 @@ const TableForDiary = ({
<ColumnNameExercises>Time</ColumnNameExercises>
<ColumnNameExercises>{''}</ColumnNameExercises>
</HeaderCont>
<Table
data={data}
theme={stylesForExercises}
layout={{ custom: true }}
>
{tableList => (
<>
<Header>
<HeaderRow>
<HeaderCell>Body Part</HeaderCell>
<HeaderCell>Equipment</HeaderCell>
<HeaderCell>Name</HeaderCell>
<HeaderCell>Target</HeaderCell>
<HeaderCell>Burned Cal...</HeaderCell>
<HeaderCell>Time</HeaderCell>
<HeaderCell>{''}</HeaderCell>
</HeaderRow>
</Header>
{isLoadingExercies ? (
<Loader size={'60'} />
) : (
<Table
data={data}
theme={stylesForExercises}
layout={{ custom: true }}
>
{tableList => (
<>
<Header>
<HeaderRow>
<HeaderCell>Body Part</HeaderCell>
<HeaderCell>Equipment</HeaderCell>
<HeaderCell>Name</HeaderCell>
<HeaderCell>Target</HeaderCell>
<HeaderCell>Burned Cal...</HeaderCell>
<HeaderCell>Time</HeaderCell>
<HeaderCell>{''}</HeaderCell>
</HeaderRow>
</Header>

<Body>
{tableList.map(item => (
<Row key={item._id} item={item}>
<Cell>{capitalizeWord(item.bodyPart)}</Cell>
<Cell>{capitalizeWord(item.equipment)}</Cell>
<Cell>{capitalizeWord(item.name)}</Cell>
<Cell>{capitalizeWord(item.target)}</Cell>
<Cell>{item.burnedCalories}</Cell>
<Cell>{item.time}</Cell>
<Cell>
<DeleteBtn
onClick={() =>
onDelete({
date,
id: item._id,
calories: item.burnedCalories,
time: item.time,
})
}
>
<DeleteIcon>
<use href={sprite + `#icon-trash`}></use>
</DeleteIcon>
</DeleteBtn>
</Cell>
</Row>
))}
</Body>
</>
)}
</Table>
<Body>
{tableList.map(item => (
<Row key={item._id} item={item}>
<Cell>{capitalizeWord(item.bodyPart)}</Cell>
<Cell>{capitalizeWord(item.equipment)}</Cell>
<Cell>{capitalizeWord(item.name)}</Cell>
<Cell>{capitalizeWord(item.target)}</Cell>
<Cell>{item.burnedCalories}</Cell>
<Cell>{item.time}</Cell>
<Cell>
<DeleteBtn
onClick={() =>
onDelete({
date,
id: item._id,
calories: item.burnedCalories,
time: item.time,
})
}
>
<DeleteIcon>
<use href={sprite + `#icon-trash`}></use>
</DeleteIcon>
</DeleteBtn>
</Cell>
</Row>
))}
</Body>
</>
)}
</Table>
)}
</CustomContainer>
)}
</>
Expand Down
39 changes: 23 additions & 16 deletions src/pages/Diary/Diary.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { mgForDiary } from '../../utils/descriptionTextMargin';
import { mgForTitle } from '../../utils/titleMarginForDairyPage';
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getIsLoadingDiary } from '../../redux/diary/selectors';

import { getDiaryList } from '../../redux/diary/operations';
import {
Expand All @@ -29,14 +30,16 @@ import sprite from '../../assets/sprite.svg';
import CustomInputForCalendar from '../../components/CustomInputForCalendar/CustomInputForCalendar';

import formatDate from '../../utils/formatDate';
import Loader from '../../components/Lodaer/Loader';

const Diary = () => {
const [date, setDate] = useState(new Date());
const [parsedDate, setParsedDate] = useState('');

const productsList = useSelector(getDiaryProducts);
const exercisesList = useSelector(getDiaryExercises);

const isLoadingDairy = useSelector(getIsLoadingDiary);

const dispatch = useDispatch();

useEffect(() => {
Expand Down Expand Up @@ -97,22 +100,26 @@ const Diary = () => {
margin={mgForDiary}
/>
</CustomDivForCards>
<CustomDivForTables>
<DayDiaryProductsOrExercises
marginBottom={40}
list={productsList}
productTable
date={parsedDate}
to={'/products'}
/>
{isLoadingDairy ? (
<Loader size={'100'} />
) : (
<CustomDivForTables>
<DayDiaryProductsOrExercises
marginBottom={40}
list={productsList}
productTable
date={parsedDate}
to={'/products'}
/>

<DayDiaryProductsOrExercises
list={exercisesList}
exerciseTable
date={parsedDate}
to={'/exercises'}
/>
</CustomDivForTables>{' '}
<DayDiaryProductsOrExercises
list={exercisesList}
exerciseTable
date={parsedDate}
to={'/exercises'}
/>
</CustomDivForTables>
)}
</DiaryPageContainer>
</DiaryWrapper>
);
Expand Down

0 comments on commit a59a079

Please sign in to comment.