challenges files structure refactor

Merge branch 'master' of https://github.com/mattyl006/gonito
challenges components reducer and useMemo/useCallback refactor
2023-05-05 11:27:23 +02:00 · 2023-05-05 11:20:32 +02:00 · 2023-05-05 11:20:23 +02:00 · 2023-04-26 20:46:31 +02:00 · 2023-04-26 20:46:16 +02:00 · 2023-04-18 11:49:25 +02:00
16 changed files with 594 additions and 414 deletions
--- a/src/api/getChallenges.js
+++ b/src/api/getChallenges.js
@ -1,11 +1,14 @@
+import CHALLENGES_ACTION from '../pages/Challanges/model/ChallengesActionEnum';
 import { API } from '../utils/globals';

-const getChallenges = (setDataStates, setLoadingState) => {
+const getChallenges = (dispatch) => {
  fetch(`${API}/list-challenges`)
    .then((response) => response.json())
    .then((data) => {
-      for (let setState of setDataStates) setState(data);
-      if (setLoadingState) setLoadingState(false);
+      dispatch({
+        type: CHALLENGES_ACTION.LOAD_CHALLENGES_FROM_API,
+        payload: data,
+      });
    });
 };

--- a/src/components/challenges_list/FilterBy.js
+++ b/src/components/challenges_list/FilterBy.js
@ -1,66 +1,75 @@
 import React from 'react';
-import {FlexColumn, Grid, Svg} from '../../utils/containers';
+import { FlexColumn, Grid, Svg } from '../../utils/containers';
 import Filter from '../generic/Filter';
-import {Body, H3, Medium} from '../../utils/fonts';
+import { Body, H3, Medium } from '../../utils/fonts';
 import arrow from '../../assets/arrow.svg';
 import Media from 'react-media';
 import theme from '../../utils/theme';
-import PropsTypes from 'prop-types';

 const FilterBy = (props) => {
-    const renderFilterOptions = () => {
-        return (
-            props.options.map((option, index) => {
-                return (
-                    <Filter key={`filter_option-${index}`}
-                            option={props.option} handler={props.handler}
-                            id={`${props.header}-${option.name}-${index}`} name={props.header} index={index}>
-                        <Body as='p'>
-                            {option.name}
-                        </Body>
-                        {option.sort ?
-                            <Svg as='span' src={arrow} rotate={option.rotate ? option.rotate : '0'}
-                                 margin={option.rotate ? '2px 0 0 0' : '0 0 2px 0'}/>
-                            : ''}
-                    </Filter>
-                );
-            })
-        );
-    };
+  const renderFilterOptions = () => {
+    return props.options.map((option, index) => {
+      return (
+        <Filter
+          key={`filter_option-${index}`}
+          option={props.option}
+          handler={props.handler}
+          id={`${props.header}-${option.name}-${index}`}
+          name={props.header}
+          index={index}
+        >
+          <Body as="p">{option.name}</Body>
+          {option.sort && (
+            <Svg
+              as="span"
+              src={arrow}
+              rotate={option.rotate ? option.rotate : '0'}
+              margin={option.rotate ? '2px 0 0 0' : '0 0 2px 0'}
+            />
+          )}
+        </Filter>
+      );
+    });
+  };

-    return (
-        <FlexColumn as='fieldset' width='100%' padding='8px' margin={props.margin ? props.margin : '0'}
-                    alignmentX={props.alignmentX ? props.alignmentX : 'flex-start'}>
-            <Media query={theme.mobile}>
-                <Medium as='legend' textTransform='uppercase' margin='0 0 12px 0'>
-                    {props.header}
-                </Medium>
-            </Media>
-            <Media query={theme.desktop}>
-                <H3 as='legend' textTransform='uppercase' width='100%'
-                    textAlign={props.textAlign ? props.textAlign : 'left'} margin='0 0 24px 0'>
-                    {props.header}
-                </H3>
-            </Media>
-            <Grid gridTemplateColumns={props.gridTemplateColumns ? props.gridTemplateColumns : 'auto auto'}
-                  gridTemplateRows={props.gridTemplateRows ? props.gridTemplateRows : 'auto'}
-                  gridGap='12px' position='relative'>
-                {renderFilterOptions()}
-            </Grid>
-        </FlexColumn>
-    );
-};
-
-FilterBy.propTypes = {
-    options: PropsTypes.arrayOf(PropsTypes.shape({
-        name: PropsTypes.string,
-        sort: PropsTypes.bool,
-        rotate: PropsTypes.string
-    }))
-};
-
-FilterBy.defaultProps = {
-    options: [],
+  return (
+    <FlexColumn
+      as="fieldset"
+      width="100%"
+      padding="8px"
+      margin={props.margin ? props.margin : '0'}
+      alignmentX={props.alignmentX ? props.alignmentX : 'flex-start'}
+    >
+      <Media query={theme.mobile}>
+        <Medium as="legend" textTransform="uppercase" margin="0 0 12px 0">
+          {props.header}
+        </Medium>
+      </Media>
+      <Media query={theme.desktop}>
+        <H3
+          as="legend"
+          textTransform="uppercase"
+          width="100%"
+          textAlign={props.textAlign ? props.textAlign : 'left'}
+          margin="0 0 24px 0"
+        >
+          {props.header}
+        </H3>
+      </Media>
+      <Grid
+        gridTemplateColumns={
+          props.gridTemplateColumns ? props.gridTemplateColumns : 'auto auto'
+        }
+        gridTemplateRows={
+          props.gridTemplateRows ? props.gridTemplateRows : 'auto'
+        }
+        gridGap="12px"
+        position="relative"
+      >
+        {renderFilterOptions()}
+      </Grid>
+    </FlexColumn>
+  );
 };

 export default FilterBy;
--- a/src/components/challenges_list/FiltersMenu/FiltersMenu.js
+++ b/src/components/challenges_list/FiltersMenu/FiltersMenu.js
@ -1,12 +1,12 @@
 import React from 'react';
-import {FlexColumn, FlexRow, TransBack} from '../../../utils/containers';
+import { FlexColumn, FlexRow, TransBack } from '../../../utils/containers';
 import Button from '../../generic/Button';
 import theme from '../../../utils/theme';
 import styled from 'styled-components';
 import FilterBy from '../FilterBy';
 import filterOptions from './filterOptions';
 import Media from 'react-media';
-import PropsTypes from 'prop-types';
+import CHALLENGES_ACTION from '../../../pages/Challanges/model/ChallengesActionEnum';

 const FiltersMenuStyle = styled(FlexColumn)`
  position: fixed;
@ -18,8 +18,8 @@ const FiltersMenuStyle = styled(FlexColumn)`
  max-height: 650px;
  justify-content: flex-start;
  padding: 14px 16px 14px 24px;
-  box-shadow: ${({theme}) => theme.shadowLeft};
-  background-color: ${({theme}) => theme.colors.white};
+  box-shadow: ${({ theme }) => theme.shadowLeft};
+  background-color: ${({ theme }) => theme.colors.white};
  transition: transform 0.5s ease-in-out;
  z-index: 5;

@ -27,89 +27,122 @@ const FiltersMenuStyle = styled(FlexColumn)`
    display: none;
  }

-  @media (min-width: ${({theme}) => theme.overMobile}) {
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
    width: 310px;
    max-height: none;
    top: 50px;
    right: auto;
    left: 0;
-    box-shadow: ${({theme}) => theme.shadowRight};
+    box-shadow: ${({ theme }) => theme.shadowRight};
    padding: 32px 32px 64px;
  }
 `;

 const FiltersMenu = (props) => {
-    const resetHandler = () => {
-        props.sortByHandler(0);
-        props.statusHandler(0);
-        props.challengeTypeHandler(0);
-        props.commercialHandler(0);
-    };
+  const sortByHandler = (value) => {
+    props.dispatch({ type: CHALLENGES_ACTION.SET_SORT_BY, payload: value });
+  };

-    return (
-        <>
-            <TransBack backgroundColor={theme.colors.dark03} translateX={props.translateX}
-                       opacity={props.opacity} onClick={props.toggleFiltersMenu}
-                       display={props.transBackDisplay ? props.transBackDisplay : 'flex'}/>
-            <FiltersMenuStyle translateX={props.translateX} gap='16px'>
-                <FilterBy header='Sort by' options={filterOptions[0]}
-                          handler={props.sortByHandler} option={props.sortBy}/>
-                <FilterBy header='Status' options={filterOptions[1]}
-                          handler={props.statusHandler} option={props.status}/>
-                <FilterBy header='Challenge type' options={filterOptions[2]}
-                          handler={props.challengeTypeHandler} option={props.challengeType}/>
-                <FilterBy header='Commercial' options={filterOptions[3]}
-                          handler={props.commercialHandler} option={props.commercial}/>
-                <Media query={theme.mobile}>
-                    <FlexRow gap='16px' margin='14px 0 0 0'>
-                        <Button width='64px' height='28px' handler={props.toggleFiltersMenu}>
-                            Done
-                        </Button>
-                        <Button width='64px' height='28px' backgroundColor={theme.colors.dark} handler={resetHandler}>
-                            Reset
-                        </Button>
-                    </FlexRow>
-                </Media>
-                <Media query={theme.desktop}>
-                    <FlexRow margin='8px 0 0 0' width='94%' alignmentX='flex-start'>
-                        <Button width='72px' height='34px' backgroundColor={theme.colors.green} handler={resetHandler}>
-                            Reset
-                        </Button>
-                    </FlexRow>
-                </Media>
-            </FiltersMenuStyle>
-        </>
-    );
-};
+  const statusHandler = (value) => {
+    props.dispatch({
+      type: CHALLENGES_ACTION.SET_STATUS_FILTER,
+      payload: value,
+    });
+  };

-FiltersMenu.propTypes = {
-    translateX: PropsTypes.string,
-    opacity: PropsTypes.string,
-    transBackDisplay: PropsTypes.string,
-    toggleFiltersMenu: PropsTypes.func,
-    sortByHandler: PropsTypes.func,
-    statusHandler: PropsTypes.func,
-    challengeTypeHandler: PropsTypes.func,
-    commercialHandler: PropsTypes.func,
-    sortBy: PropsTypes.number,
-    status: PropsTypes.number,
-    challengeType: PropsTypes.number,
-    commercial: PropsTypes.number,
-};
+  const challengeTypeHandler = (value) => {
+    props.dispatch({
+      type: CHALLENGES_ACTION.SET_CHALLENGE_TYPE_FILTER,
+      payload: value,
+    });
+  };

-FiltersMenu.defaultProps = {
-    translateX: '',
-    opacity: '',
-    transBackDisplay: 'flex',
-    toggleFiltersMenu: null,
-    sortByHandler: null,
-    statusHandler: null,
-    challengeTypeHandler: null,
-    commercialHandler: null,
-    sortBy: 0,
-    status: 0,
-    challengeType: 0,
-    commercial: 0,
+  const commercialHandler = (value) => {
+    props.dispatch({
+      type: CHALLENGES_ACTION.SET_COMMERCIAL_FILTER,
+      payload: value,
+    });
+  };
+
+  const resetHandler = () => {
+    sortByHandler(0);
+    statusHandler(0);
+    challengeTypeHandler(0);
+    commercialHandler(0);
+  };
+
+  return (
+    <>
+      <TransBack
+        backgroundColor={theme.colors.dark03}
+        translateX={props.translateX}
+        opacity={props.opacity}
+        onClick={() =>
+          props.dispatch({ type: CHALLENGES_ACTION.TOGGLE_FILTERS_MENU })
+        }
+        display={props.transBackDisplay ? props.transBackDisplay : 'flex'}
+      />
+      <FiltersMenuStyle translateX={props.translateX} gap="16px">
+        <FilterBy
+          header="Sort by"
+          options={filterOptions[0]}
+          handler={sortByHandler}
+          option={props.sortBy}
+        />
+        <FilterBy
+          header="Status"
+          options={filterOptions[1]}
+          handler={statusHandler}
+          option={props.status}
+        />
+        <FilterBy
+          header="Challenge type"
+          options={filterOptions[2]}
+          handler={challengeTypeHandler}
+          option={props.challengeTypeFilter}
+        />
+        <FilterBy
+          header="Commercial"
+          options={filterOptions[3]}
+          handler={commercialHandler}
+          option={props.commercialFilter}
+        />
+        <Media query={theme.mobile}>
+          <FlexRow gap="16px" margin="14px 0 0 0">
+            <Button
+              width="64px"
+              height="28px"
+              handler={() =>
+                props.dispatch({ type: CHALLENGES_ACTION.TOGGLE_FILTERS_MENU })
+              }
+            >
+              Done
+            </Button>
+            <Button
+              width="64px"
+              height="28px"
+              backgroundColor={theme.colors.dark}
+              handler={resetHandler}
+            >
+              Reset
+            </Button>
+          </FlexRow>
+        </Media>
+        <Media query={theme.desktop}>
+          <FlexRow margin="8px 0 0 0" width="94%" alignmentX="flex-start">
+            <Button
+              width="72px"
+              height="34px"
+              backgroundColor={theme.colors.green}
+              handler={resetHandler}
+            >
+              Reset
+            </Button>
+          </FlexRow>
+        </Media>
+      </FiltersMenuStyle>
+    </>
+  );
 };

 export default FiltersMenu;
--- a/src/components/generic/Filter.js
+++ b/src/components/generic/Filter.js
@ -1,31 +1,35 @@
 import React from 'react';
 import styled from 'styled-components';
-import {FlexRow} from '../../utils/containers';
-import PropsTypes from 'prop-types';
+import { FlexRow } from '../../utils/containers';

 const FilterStyle = styled(FlexRow)`
  width: fit-content;
  height: 36px;
  padding: 8px 16px;
-  border-radius: ${({borderRadius}) => borderRadius ? borderRadius : '32px'};
-  border: 1px solid ${({theme}) => theme.colors.dark};
-  box-shadow: ${({theme}) => theme.shadow};
+  border-radius: ${({ borderRadius }) =>
+    borderRadius ? borderRadius : '32px'};
+  border: 1px solid ${({ theme }) => theme.colors.dark};
+  box-shadow: ${({ theme }) => theme.shadow};
  cursor: pointer;
-  background-color: ${({theme, active}) => active ? theme.colors.dark : theme.colors.white};
+  background-color: ${({ theme, active }) =>
+    active ? theme.colors.dark : theme.colors.white};
  transition: transform 0.3s ease-in-out;
  z-index: 2;
-  color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
+  color: ${({ theme, active }) =>
+    active ? theme.colors.white : theme.colors.dark};

  &:hover {
    transform: scale(1.1);
  }

  p {
-    color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
+    color: ${({ theme, active }) =>
+      active ? theme.colors.white : theme.colors.dark};
  }

  span {
-    background-color: ${({theme, active}) => active ? theme.colors.white : theme.colors.dark};
+    background-color: ${({ theme, active }) =>
+      active ? theme.colors.white : theme.colors.dark};
  }

  * {
@ -34,36 +38,32 @@ const FilterStyle = styled(FlexRow)`
 `;

 const Filter = (props) => {
-    const onCheckHandler = (e) => {
-        if (e.target.checked)
-            props.handler(Number(e.target.value));
-    };
+  const onCheckHandler = (e) => {
+    if (e.target.checked) props.handler(Number(e.target.value));
+  };

-    return (
-        <>
-            <FilterStyle as='label' borderRadius={props.borderRadius} htmlFor={props.id}
-                         active={props.option === props.index}>
-                {props.children}
-            </FilterStyle>
-            <FlexRow display='none' as='input' type='radio' value={props.index}
-                     id={props.id} name={props.name} checked={props.option === props.index}
-                     onChange={(e) => onCheckHandler(e)}/>
-        </>
-    );
-};
-
-Filter.propTypes = {
-    index: PropsTypes.number.isRequired,
-    option: PropsTypes.number.isRequired,
-    handler: PropsTypes.func,
-    id: PropsTypes.string.isRequired,
-    name: PropsTypes.string.isRequired,
-    children: PropsTypes.node,
-};
-
-Filter.defaultProps = {
-    handler: null,
-    children: '',
+  return (
+    <>
+      <FilterStyle
+        as="label"
+        borderRadius={props.borderRadius}
+        htmlFor={props.id}
+        active={props.option === props.index}
+      >
+        {props.children}
+      </FilterStyle>
+      <FlexRow
+        display="none"
+        as="input"
+        type="radio"
+        value={props.index}
+        id={props.id}
+        name={props.name}
+        checked={props.option === props.index}
+        onChange={(e) => onCheckHandler(e)}
+      />
+    </>
+  );
 };

 export default Filter;
--- a/src/components/generic/Pager.js
+++ b/src/components/generic/Pager.js
@ -1,37 +1,35 @@
 import React from 'react';
-import {FlexRow, Svg} from '../../utils/containers';
+import { FlexRow, Svg } from '../../utils/containers';
 import CircleNumber from './CircleNumber';
 import polygon from '../../assets/polygon.svg';
 import styled from 'styled-components';
 import theme from '../../utils/theme';
-import PropsTypes from 'prop-types';
 import { NEXT_PAGE, PREVIOUS_PAGE } from '../../utils/globals';

-
 const PagerStyle = styled(FlexRow)`
  gap: 14px;

-  @media (min-width: ${({theme}) => theme.overMobile}) {
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
    gap: 20px;
  }
 `;

 const LeftArrow = styled(Svg)`
-  background-color: ${({backgroundColor}) => backgroundColor};
-  cursor: ${({backgroundColor}) => (backgroundColor === 'transparent') ? 'auto' : 'pointer'};
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  cursor: ${({ backgroundColor }) =>
+    backgroundColor === 'transparent' ? 'auto' : 'pointer'};
  width: 10px;
  height: 10px;
  transition: background-color, transform 0.3s ease-in-out;

-  &:hover, &:focus {
-    background-color: ${({
-                           theme,
-                           backgroundColor
-                         }) => (backgroundColor === 'transparent') ? 'transparent' : theme.colors.green};
+  &:hover,
+  &:focus {
+    background-color: ${({ theme, backgroundColor }) =>
+      backgroundColor === 'transparent' ? 'transparent' : theme.colors.green};
    transform: scale(1.1);
  }

-  @media (min-width: ${({theme}) => theme.overMobile}) {
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
    width: 12px;
    height: 12px;
  }
@ -40,57 +38,50 @@ const LeftArrow = styled(Svg)`
 const RightArrow = styled(LeftArrow)`
  transform: rotate(180deg);

-  &:hover, &:focus {
-    background-color: ${({
-                           theme,
-                           backgroundColor
-                         }) => (backgroundColor === 'transparent') ? 'transparent' : theme.colors.green};
+  &:hover,
+  &:focus {
+    background-color: ${({ theme, backgroundColor }) =>
+      backgroundColor === 'transparent' ? 'transparent' : theme.colors.green};
    transform: scale(1.1) rotate(180deg);
  }
 `;

 const Pager = (props) => {
-    const leftArrowVisible = () => {
-        if (props.pageNr === 1)
-            return 'transparent';
-        return theme.colors.dark;
-    };
+  const leftArrowVisible = () => {
+    if (props.pageNr === 1) return 'transparent';
+    return theme.colors.dark;
+  };

-    const rightArrowVisible = () => {
-        if (props.pageNr === props.pages)
-            return 'transparent';
-        return theme.colors.dark;
-    };
+  const rightArrowVisible = () => {
+    if (props.pageNr === props.pages) return 'transparent';
+    return theme.colors.dark;
+  };

-    return (
-        <PagerStyle>
-            <LeftArrow as='a' href='#start' src={polygon} onClick={() => PREVIOUS_PAGE(props.pageNr, props.setPageNr)} size='cover'
-                       backgroundColor={leftArrowVisible()}/>
-            <CircleNumber number={props.number} width={props.width} borderRadius={props.borderRadius}/>
-            <RightArrow as='a' href='#start' src={polygon} onClick={() => NEXT_PAGE(props.elements, props.pageNr, props.setPageNr)} size='cover'
-                        backgroundColor={rightArrowVisible()}/>
-        </PagerStyle>
-    );
-};
-
-Pager.propTypes = {
-    previousPage: PropsTypes.func,
-    pageNr: PropsTypes.number,
-    nextPage: PropsTypes.func,
-    pages: PropsTypes.number,
-    number: PropsTypes.string,
-    width: PropsTypes.string,
-    borderRadius: PropsTypes.string
-};
-
-Pager.defaultProps = {
-    previousPage: null,
-    pageNr: 1,
-    nextPage: null,
-    pages: 1,
-    number: '',
-    width: null,
-    borderRadius: null
+  return (
+    <PagerStyle>
+      <LeftArrow
+        as="a"
+        href="#start"
+        src={polygon}
+        onClick={() => PREVIOUS_PAGE(props.pageNr, props.setPage)}
+        size="cover"
+        backgroundColor={leftArrowVisible()}
+      />
+      <CircleNumber
+        number={props.number}
+        width={props.width}
+        borderRadius={props.borderRadius}
+      />
+      <RightArrow
+        as="a"
+        href="#start"
+        src={polygon}
+        onClick={() => NEXT_PAGE(props.elements, props.pageNr, props.setPage)}
+        size="cover"
+        backgroundColor={rightArrowVisible()}
+      />
+    </PagerStyle>
+  );
 };

 export default Pager;
--- a/src/components/specific_challenge/Table.js
+++ b/src/components/specific_challenge/Table.js
@ -7,6 +7,10 @@ import { Body, Medium } from '../../utils/fonts';
 import styled from 'styled-components';
 import ColumnFilterIcon from './ColumnFilterIcon';

+const TableStyle = styled(FlexColumn)`
+  overflow-x: ${({metrics}) => metrics > 10 ? 'scroll' : 'auto'};
+`;
+
 const Line = styled(FlexRow)`
  position: absolute;
  top: ${({ top }) => (top ? top : 'auto')};
@ -105,7 +109,7 @@ const Table = (props) => {
          as="td"
          order={props.iterableColumnElement.order}
          textAlign={props.iterableColumnElement.align}
-          minWidth="72px"
+          minWidth="88px"
          margin="auto 0"
          overflowWrap="anywhere"
        >
@ -133,6 +137,7 @@ const Table = (props) => {
          order={elemName.order}
          textAlign={elemName.align}
          margin="auto 0"
+          minWidth="88px"
          overflowWrap="anywhere"
        >
          {IS_MOBILE() && (
@ -153,7 +158,7 @@ const Table = (props) => {
    let elementsToMap = props.elements.slice(n, n + ELEMENTS_PER_PAGE * 2);
    if (elementsToMap.length > 0) {
      return (
-        <FlexColumn as="table" margin="32px 0 72px 0" width="100%">
+        <TableStyle as="table" margin="32px 0 72px 0" width="100%">
          <FlexColumn as="tbody" width="100%">
            <Grid
              as="tr"
@ -190,7 +195,9 @@ const Table = (props) => {
                      width={elem === 'when' ? '100%' : 'auto'}
                      padding="0 4px 0 0"
                      overflowWrap="anywhere"
-                      minWidth={elem === 'result' ? '72px' : 'none'}
+                      minWidth="72px"
+
+                      // minWidth={elem === 'result' ? '72px' : 'none'}
                    >
                      {elem.replace('.', ' ')}
                    </Medium>
@ -233,7 +240,7 @@ const Table = (props) => {
              );
            })}
          </FlexColumn>
-        </FlexColumn>
+        </TableStyle>
      );
    }
    return <Medium margin="72px 0">No results ;c</Medium>;
--- a/src/pages/Challanges/Challenges.js
+++ b/src/pages/Challanges/Challenges.js
@ -1,163 +1,102 @@
 import React from 'react';
-import { Body, H1 } from '../../utils/fonts';
-import { FlexColumn, FlexRow, Svg } from '../../utils/containers';
-import Search from '../../components/generic/Search';
-import Pager from '../../components/generic/Pager';
-import challengeSearchQueryHandler from './challengeSearchQueryHandler';
-import renderChallenges from './renderChallenges';
 import Media from 'react-media';
 import theme from '../../utils/theme';
-import cupIco from '../../assets/cup_ico.svg';
 import getChallenges from '../../api/getChallenges';
-import { CALC_PAGES, CHALLENGES_STATUS_FILTER } from '../../utils/globals';
-import Loading from '../../components/generic/Loading';
-import ChallengesStyle from './ChallengesStyle';
+import { CHALLENGES_STATUS_FILTER } from '../../utils/globals';
 import FiltersMenu from '../../components/challenges_list/FiltersMenu';
-import statusFilter from './statusFilter';
+import statusFilterHandle from './functions/statusFilterHandle';
+import ChallengesMobile from './components/ChallengesMobile';
+import ChallengesDesktop from './components/ChallengesDesktop';
+import challengeSearchQueryHandler from './functions/challengeSearchQueryHandler';
+import ChallengesReducer from './model/ChallengesReducer';
+import CHALLENGES_ACTION from './model/ChallengesActionEnum';

 const Challenges = () => {
-  const [pageNr, setPageNr] = React.useState(1);
-  const [challengesFromAPI, setChallengesFromAPI] = React.useState([]);
-  const [challenges, setChallenges] = React.useState([]);
-  const [challengesFiltered, setChallengesFiltered] = React.useState([]);
-  const [filtersMenu, setFiltersMenu] = React.useState(false);
-  const [sortBy, setSortBy] = React.useState(0);
-  const [status, setStatus] = React.useState(CHALLENGES_STATUS_FILTER.BOTH);
-  const [challengeType, setChallengeType] = React.useState(0);
-  const [commercial, setCommercial] = React.useState(0);
-  const [loading, setLoading] = React.useState(true);
+  const [state, dispatch] = React.useReducer(ChallengesReducer, {
+    pageNr: 1,
+    challengesFromAPI: [],
+    challenges: [],
+    challengesFiltered: [],
+    filtersMenu: false,
+    sortBy: 0,
+    statusFilter: CHALLENGES_STATUS_FILTER.BOTH,
+    challengeTypeFilter: 0,
+    commercialFilter: 0,
+    loading: true,
+  });

-  React.useEffect(() => {
-    challengesRequest();
+  React.useMemo(() => {
+    getChallenges(dispatch);
  }, []);

  React.useEffect(() => {
-    statusFilter(status, challenges, setChallengesFiltered);
-  }, [status, challenges]);
+    statusFilterHandle(state.statusFilter, state.challenges, dispatch);
+  }, [state.statusFilter, state.challenges]);

-  const challengesRequest = () => {
-    getChallenges(
-      [setChallengesFromAPI, setChallenges, setChallengesFiltered],
-      setLoading
-    );
-  };
+  const setPage = React.useCallback((value) => {
+    dispatch({ type: CHALLENGES_ACTION.SET_PAGE, payload: value });
+  }, []);

-  const searchQueryHandler = (event) => {
-    challengeSearchQueryHandler(
-      event,
-      challengesFromAPI,
-      setPageNr,
-      setChallenges
-    );
-  };
+  const searchQueryHandler = React.useCallback(
+    (event) =>
+      challengeSearchQueryHandler(
+        event,
+        state.challengesFromAPI,
+        state.setPageNr,
+        dispatch
+      ),
+    [state.challengesFromAPI, state.setPageNr]
+  );

-  const toggleFiltersMenu = () => {
-    let newFiltersMenu = !filtersMenu;
-    setFiltersMenu(newFiltersMenu);
-  };
-
-  const filtersMenuRender = (
-    translateX = '0',
-    opacity = '1',
-    transBackDisplay = 'none'
-  ) => {
-    return (
-      <FiltersMenu
-        toggleFiltersMenu={toggleFiltersMenu}
-        sortByHandler={setSortBy}
-        statusHandler={setStatus}
-        challengeTypeHandler={setChallengeType}
-        commercialHandler={setCommercial}
-        sortBy={sortBy}
-        status={status}
-        challengeType={challengeType}
-        commercial={commercial}
-        translateX={translateX}
-        opacity={opacity}
-        transBackDisplay={transBackDisplay}
-      />
-    );
-  };
-
-  const mobileRender = () => {
-    return (
-      <>
-        {filtersMenuRender(
-          filtersMenu ? '0' : '100vw',
-          filtersMenu ? '1' : '0',
-          'flex'
-        )}
-        <ChallengesStyle as="main" id="start">
-          <FlexColumn className="ChallengesStyle__page-container">
-            <H1 as="h1">Challenges</H1>
-            <Search
-              searchQueryHandler={searchQueryHandler}
-              filterButton
-              toggleFiltersMenu={toggleFiltersMenu}
-            />
-            <FlexColumn width="100%">
-              <Loading visible={loading} />
-              {renderChallenges(pageNr, challengesFiltered)}
-            </FlexColumn>
-          </FlexColumn>
-          {!loading && (
-            <Pager
-              elements={challengesFiltered}
-              pageNr={pageNr}
-              setPageNr={setPageNr}
-              pages={CALC_PAGES(challengesFiltered)}
-              width="48px"
-              borderRadius="64px"
-              number={`${pageNr} / ${CALC_PAGES(challengesFiltered)}`}
-            />
-          )}
-        </ChallengesStyle>
-      </>
-    );
-  };
-
-  const desktopRender = () => {
-    return (
-      <>
-        {filtersMenuRender()}
-        <ChallengesStyle as="main" id="start">
-          <FlexColumn className="ChallengesStyle__page-container">
-            <FlexRow className="ChallengesStyle__page-header-container">
-              <FlexColumn className="ChallengesStyle__page-header">
-                <H1 as="h1">Challenges</H1>
-                <Body className="ChallengesStyle__header-content">
-                  Increase your machine learning skills by competing in our
-                  exciting challenges.
-                </Body>
-                <Search searchQueryHandler={searchQueryHandler} />
-              </FlexColumn>
-              <Svg src={cupIco} className="ChallengesStyle__main-image" />
-            </FlexRow>
-            <FlexColumn width="100%">
-              <Loading visible={loading} />
-              {renderChallenges(pageNr, challengesFiltered)}
-            </FlexColumn>
-          </FlexColumn>
-          {!loading && (
-            <Pager
-              pageNr={pageNr}
-              setPageNr={setPageNr}
-              elements={challengesFiltered}
-              pages={CALC_PAGES(challengesFiltered)}
-              width="72px"
-              borderRadius="64px"
-              number={`${pageNr} / ${CALC_PAGES(challengesFiltered)}`}
-            />
-          )}
-        </ChallengesStyle>
-      </>
-    );
-  };
+  const filtersMenuRender = React.useCallback(
+    (translateX = '0', opacity = '1', transBackDisplay = 'none') => {
+      return (
+        <FiltersMenu
+          dispatch={dispatch}
+          sortBy={state.sortBy}
+          status={state.statusFilter}
+          challengeTypeFilter={state.challengeTypeFilter}
+          commercialFilter={state.commercialFilter}
+          translateX={translateX}
+          opacity={opacity}
+          transBackDisplay={transBackDisplay}
+        />
+      );
+    },
+    [
+      state.sortBy,
+      state.statusFilter,
+      state.challengeTypeFilter,
+      state.commercialFilter,
+    ]
+  );

  return (
    <>
-      <Media query={theme.mobile}>{mobileRender()}</Media>
-      <Media query={theme.desktop}>{desktopRender()}</Media>
+      <Media query={theme.mobile}>
+        <ChallengesMobile
+          dispatch={dispatch}
+          filtersMenuRender={filtersMenuRender}
+          searchQueryHandler={searchQueryHandler}
+          setPage={setPage}
+          filtersMenu={state.filtersMenu}
+          loading={state.loading}
+          pageNr={state.pageNr}
+          challengesFiltered={state.challengesFiltered}
+        />
+      </Media>
+      <Media query={theme.desktop}>
+        <ChallengesDesktop
+          dispatch={dispatch}
+          filtersMenuRender={filtersMenuRender}
+          searchQueryHandler={searchQueryHandler}
+          setPage={setPage}
+          filtersMenu={state.filtersMenu}
+          loading={state.loading}
+          pageNr={state.pageNr}
+          challengesFiltered={state.challengesFiltered}
+        />
+      </Media>
    </>
  );
 };
--- a/src/pages/Challanges/challengeSearchQueryHandler.js
+++ b/src/pages/Challanges/challengeSearchQueryHandler.js
@ -1,19 +0,0 @@
-const challengeSearchQueryHandler = (event, challengesFromAPI, setPageNr, setChallenges) => {
-    let searchQuery = event.target.value;
-    let challengesToRender = [];
-    setPageNr(1);
-    if (searchQuery === '')
-        setChallenges(challengesFromAPI);
-    else {
-        for (let challenge of challengesFromAPI) {
-            const {title, description, type, mainMetric, bestScore, deadline, baseline, prize} = challenge;
-            const str = `${title} ${description} ${type} ${mainMetric} ${bestScore} 
-            ${deadline ? deadline.slice(11, 16) : ''} ${deadline ? deadline.slice(0, 10) : ''} ${baseline} ${prize}`;
-            if (str.toLowerCase().includes(searchQuery.toLowerCase()))
-                challengesToRender.push(challenge);
-        }
-        setChallenges(challengesToRender);
-    }
-};
-
-export default challengeSearchQueryHandler;
--- a/src/pages/Challanges/components/ChallengesDesktop.js
+++ b/src/pages/Challanges/components/ChallengesDesktop.js
@ -0,0 +1,51 @@
+import React from 'react';
+import ChallengesStyle from '../ChallengesStyle';
+import { FlexColumn, FlexRow } from '../../../utils/containers';
+import Pager from '../../../components/generic/Pager';
+import { H1, Body } from '../../../utils/fonts';
+import Search from '../../../components/generic/Search';
+import { CALC_PAGES } from '../../../utils/globals';
+import renderChallenges from '../functions/renderChallenges';
+import Loading from '../../../components/generic/Loading';
+import cupIco from '../../../assets/cup_ico.svg';
+import { Svg } from '../../../utils/containers';
+
+const ChallengesDesktop = (props) => {
+  return (
+    <>
+      {props.filtersMenuRender()}
+      <ChallengesStyle as="main" id="start">
+        <FlexColumn className="ChallengesStyle__page-container">
+          <FlexRow className="ChallengesStyle__page-header-container">
+            <FlexColumn className="ChallengesStyle__page-header">
+              <H1 as="h1">Challenges</H1>
+              <Body className="ChallengesStyle__header-content">
+                Increase your machine learning skills by competing in our
+                exciting challenges.
+              </Body>
+              <Search searchQueryHandler={props.searchQueryHandler} />
+            </FlexColumn>
+            <Svg src={cupIco} className="ChallengesStyle__main-image" />
+          </FlexRow>
+          <FlexColumn width="100%">
+            <Loading visible={props.loading} />
+            {renderChallenges(props.pageNr, props.challengesFiltered)}
+          </FlexColumn>
+        </FlexColumn>
+        {!props.loading && (
+          <Pager
+            pageNr={props.pageNr}
+            setPage={props.setPage}
+            elements={props.challengesFiltered}
+            pages={CALC_PAGES(props.challengesFiltered)}
+            width="72px"
+            borderRadius="64px"
+            number={`${props.pageNr} / ${CALC_PAGES(props.challengesFiltered)}`}
+          />
+        )}
+      </ChallengesStyle>
+    </>
+  );
+};
+
+export default ChallengesDesktop;
--- a/src/pages/Challanges/components/ChallengesMobile.js
+++ b/src/pages/Challanges/components/ChallengesMobile.js
@ -0,0 +1,53 @@
+import React from 'react';
+import ChallengesStyle from '../ChallengesStyle';
+import { FlexColumn } from '../../../utils/containers';
+import Pager from '../../../components/generic/Pager';
+import { H1 } from '../../../utils/fonts';
+import Search from '../../../components/generic/Search';
+import { CALC_PAGES } from '../../../utils/globals';
+import renderChallenges from '../functions/renderChallenges';
+import Loading from '../../../components/generic/Loading';
+import CHALLENGES_ACTION from '../model/ChallengesActionEnum';
+
+const ChallengesMobile = (props) => {
+  return (
+    <>
+      {props.filtersMenuRender(
+        props.filtersMenu ? '0' : '100vw',
+        props.filtersMenu ? '1' : '0',
+        'flex'
+      )}
+      <ChallengesStyle as="main" id="start">
+        <FlexColumn className="ChallengesStyle__page-container">
+          <H1 as="h1">Challenges</H1>
+          <Search
+            searchQueryHandler={props.searchQueryHandler}
+            filterButton
+            toggleFiltersMenu={() =>
+              props.dispatch({
+                type: CHALLENGES_ACTION.TOGGLE_FILTERS_MENU,
+              })
+            }
+          />
+          <FlexColumn width="100%">
+            <Loading visible={props.loading} />
+            {renderChallenges(props.pageNr, props.challengesFiltered)}
+          </FlexColumn>
+        </FlexColumn>
+        {!props.loading && (
+          <Pager
+            width="48px"
+            borderRadius="64px"
+            elements={props.challengesFiltered}
+            pageNr={props.pageNr}
+            setPage={props.setPage}
+            pages={CALC_PAGES(props.challengesFiltered)}
+            number={`${props.pageNr} / ${CALC_PAGES(props.challengesFiltered)}`}
+          />
+        )}
+      </ChallengesStyle>
+    </>
+  );
+};
+
+export default ChallengesMobile;
--- a/src/pages/Challanges/functions/challengeSearchQueryHandler.js
+++ b/src/pages/Challanges/functions/challengeSearchQueryHandler.js
@ -0,0 +1,38 @@
+import CHALLENGES_ACTION from '../model/ChallengesActionEnum';
+
+const challengeSearchQueryHandler = (event, challengesFromAPI, dispatch) => {
+  let searchQuery = event.target.value;
+  let challengesToRender = [];
+  dispatch({ type: CHALLENGES_ACTION.SET_PAGE, payload: 1 });
+  if (searchQuery === '')
+    dispatch({
+      type: CHALLENGES_ACTION.SET_CHALLENGES,
+      payload: challengesFromAPI,
+    });
+  else {
+    for (let challenge of challengesFromAPI) {
+      const {
+        title,
+        description,
+        type,
+        mainMetric,
+        bestScore,
+        deadline,
+        baseline,
+        prize,
+      } = challenge;
+      const str = `${title} ${description} ${type} ${mainMetric} ${bestScore} 
+            ${deadline ? deadline.slice(11, 16) : ''} ${
+        deadline ? deadline.slice(0, 10) : ''
+      } ${baseline} ${prize}`;
+      if (str.toLowerCase().includes(searchQuery.toLowerCase()))
+        challengesToRender.push(challenge);
+    }
+    dispatch({
+      type: CHALLENGES_ACTION.SET_CHALLENGES,
+      payload: challengesToRender,
+    });
+  }
+};
+
+export default challengeSearchQueryHandler;
--- a/src/pages/Challanges/functions/renderChallenges.js
+++ b/src/pages/Challanges/functions/renderChallenges.js
@ -1,6 +1,6 @@
-import { ELEMENTS_PER_PAGE } from '../../utils/globals';
-import MiniChallenge from '../../components/challenges_list/MiniChallenge';
-import { Grid } from '../../utils/containers';
+import { ELEMENTS_PER_PAGE } from '../../../utils/globals';
+import MiniChallenge from '../../../components/challenges_list/MiniChallenge';
+import { Grid } from '../../../utils/containers';
 import styled from 'styled-components';

 const ChallengesGrid = styled(Grid)`
@ -18,7 +18,7 @@ const ChallengesGrid = styled(Grid)`
  }
 `;

-const renderChallenges = (pageNr, challenges, statusFilter) => {
+const renderChallenges = (pageNr, challenges) => {
  const n = (pageNr - 1) * ELEMENTS_PER_PAGE;
  if (challenges && challenges !== []) {
    return (
--- a/src/pages/Challanges/functions/statusFilterHandle.js
+++ b/src/pages/Challanges/functions/statusFilterHandle.js
@ -1,8 +1,7 @@
-import { CHALLENGES_STATUS_FILTER } from '../../utils/globals';
+import { CHALLENGES_STATUS_FILTER } from '../../../utils/globals';
+import CHALLENGES_ACTION from '../model/ChallengesActionEnum';

 const dateIsOlder = (newerDate, olderDate) => {
-  console.log(newerDate);
-  console.log(olderDate);
  if (newerDate.year > olderDate.year) return true;
  else if (newerDate.month > olderDate.month) return true;
  else if (newerDate.day > olderDate.day) return true;
@ -19,7 +18,7 @@ const getDeadlineTime = (deadline) => {
  }
 };

-const statusFilter = (status, challenges, setChallengesFiltered) => {
+const statusFilterHandle = (status, challenges, dispatch) => {
  let result = challenges;
  const date = new Date();
  const currentDate = {
@ -49,7 +48,10 @@ const statusFilter = (status, challenges, setChallengesFiltered) => {
      result = challenges;
      break;
  }
-  setChallengesFiltered(result);
+  dispatch({
+    type: CHALLENGES_ACTION.SET_CHALLENGES_FILTERED,
+    payload: result,
+  });
 };

-export default statusFilter;
+export default statusFilterHandle;
--- a/src/pages/Challanges/model/ChallengesActionEnum.js
+++ b/src/pages/Challanges/model/ChallengesActionEnum.js
@ -0,0 +1,16 @@
+const CHALLENGES_ACTION = {
+  NEXT_PAGE: 'next_page',
+  PREVIOUS_PAGE: 'previous_page',
+  SET_PAGE: 'set_page',
+  LOAD_CHALLENGES_FROM_API: 'load_challenges_from_api',
+  SET_CHALLENGES: 'set_challenges',
+  SET_CHALLENGES_FILTERED: 'set_challenges_filtered',
+  TOGGLE_FILTERS_MENU: 'toggle_filters_menu',
+  TOGGLE_LOADING: 'toggle_loading',
+  SET_SORT_BY: 'set_sort_by',
+  SET_STATUS_FILTER: 'set_status_filter',
+  SET_CHALLENGE_TYPE_FILTER: 'set_challenge_type_filter',
+  SET_COMMERCIAL_FILTER: 'set_commercial_filter',
+};
+
+export default CHALLENGES_ACTION;
--- a/src/pages/Challanges/model/ChallengesReducer.js
+++ b/src/pages/Challanges/model/ChallengesReducer.js
@ -0,0 +1,58 @@
+import CHALLENGES_ACTION from './ChallengesActionEnum';
+
+const ChallengesReducer = (state, action) => {
+  switch (action.type) {
+    case CHALLENGES_ACTION.NEXT_PAGE:
+      return { ...state, pageNr: state.pageNr + 1 };
+    case CHALLENGES_ACTION.PREVIOUS_PAGE:
+      return { ...state, pageNr: state.pageNr - 1 };
+    case CHALLENGES_ACTION.SET_PAGE:
+      return { ...state, pageNr: action.payload };
+    case CHALLENGES_ACTION.LOAD_CHALLENGES_FROM_API:
+      return {
+        ...state,
+        challengesFromAPI: action.payload,
+        challenges: action.payload,
+        challengesFiltered: action.payload,
+        loading: !state.loading,
+      };
+    case CHALLENGES_ACTION.SET_CHALLENGES:
+      return {
+        ...state,
+        challenges: action.payload,
+      };
+    case CHALLENGES_ACTION.SET_CHALLENGES_FILTERED:
+      return {
+        ...state,
+        challengesFiltered: action.payload,
+      };
+    case CHALLENGES_ACTION.TOGGLE_FILTERS_MENU:
+      return { ...state, filtersMenu: !state.filtersMenu };
+    case CHALLENGES_ACTION.TOGGLE_LOADING:
+      return { ...state, loading: !state.loading };
+    case CHALLENGES_ACTION.SET_SORT_BY:
+      return {
+        ...state,
+        sortBy: action.payload,
+      };
+    case CHALLENGES_ACTION.SET_STATUS_FILTER:
+      return {
+        ...state,
+        statusFilter: action.payload,
+      };
+    case CHALLENGES_ACTION.SET_CHALLENGE_TYPE_FILTER:
+      return {
+        ...state,
+        challengeTypeFilter: action.payload,
+      };
+    case CHALLENGES_ACTION.SET_COMMERCIAL_FILTER:
+      return {
+        ...state,
+        commercialFilter: action.payload,
+      };
+    default:
+      throw new Error('Undefined action in ChallengesReducer!');
+  }
+};
+
+export default ChallengesReducer;
--- a/src/utils/globals.js
+++ b/src/utils/globals.js
@ -92,18 +92,17 @@ const RENDER_DEADLINE_TIME = (time) => {
  }
  return '';
 };
-const NEXT_PAGE = (elements, pageNr, setPageNr) => {
+const NEXT_PAGE = (elements, pageNr, setPage) => {
  if (pageNr !== CALC_PAGES(elements ? elements : [])) {
    let newPage = pageNr + 1;
-    setPageNr(newPage);
+    setPage(newPage);
  }
 };

-
-const PREVIOUS_PAGE = (pageNr, setPageNr) => {
+const PREVIOUS_PAGE = (pageNr, setPage) => {
  if (pageNr !== 1) {
    let newPage = pageNr - 1;
-    setPageNr(newPage);
+    setPage(newPage);
  }
 };

@ -142,5 +141,5 @@ export {
  RENDER_WHEN,
  EVALUATIONS_FORMAT,
  PREVIOUS_PAGE,
-  NEXT_PAGE
+  NEXT_PAGE,
 };
Author	SHA1	Message	Date
Mateusz Tylka	6c65af9bd7	challenges files structure refactor	2023-05-05 11:27:23 +02:00
Mateusz Tylka	84160ce939	Merge branch 'master' of https://github.com/mattyl006/gonito	2023-05-05 11:20:32 +02:00
Mateusz Tylka	ab50b57918	challenges components reducer and useMemo/useCallback refactor	2023-05-05 11:20:23 +02:00
Mateusz Tylka	e6d4e1fc98	Merge branch 'master' of https://github.com/mattyl006/gonito	2023-04-26 20:46:31 +02:00
Mateusz Tylka	da775bda3b	fix table style with many metrics	2023-04-26 20:46:16 +02:00
Mateusz Tylka	fb2b9dbe03	Challenges refactor, renderMobile and renderDesktop replaced by separated components	2023-04-18 11:49:25 +02:00