mobile NavBar fix and init MyEntries

src/components/navigation/NavBar/NavBar.js

@@ -13,8 +13,6 @@ import { CHALLENGES_PAGE, POLICY_PRIVACY_PAGE } from '../../../utils/globals';
 import cupIco from '../../../assets/cup_ico.svg';
 import NavBarStyle from './NavBarStyle';
 import KeyCloakService from '../../../services/KeyCloakService';
-import Media from 'react-media';
-import theme from '../../../utils/theme';
 import policyIco from '../../../assets/policy_ico.svg';
 
 const MenuButton = styled(Container)`
@@ -54,22 +52,7 @@ const NavBar = (props) => {
     <NavBarStyle as="header">
       <FlexRow height="100%" alignmentX="space-between" as="nav">
         <Logo />
-        {KeyCloakService.isLoggedIn() ? (
+        <MenuButton as="button" onClick={toggleNavMenu} />
-          <Media query={theme.mobile}>
-            <Svg
-              as="button"
-              width="20px"
-              onClick={toggleNavMenu}
-              height="20px"
-              src={userIco}
-              size="cover"
-              cursor="pointer"
-            />
-            POLICY_PRIVACY_PAGE
-          </Media>
-        ) : (
-          <MenuButton as="button" onClick={toggleNavMenu} />
-        )}
         <FlexRow as="ul" className="ul-desktop" gap="32px">
           <FlexRow as={Link} to={CHALLENGES_PAGE} gap="16px">
             <Svg width="16px" height="16px" src={cupIco} />

src/components/specific_challenge/MobileChallengeMenu.js

@@ -1,51 +1,88 @@
 import React from 'react';
-import {FlexRow} from '../../utils/containers';
+import { FlexRow } from '../../utils/containers';
 import styled from 'styled-components';
-import {Medium} from '../../utils/fonts';
+import { Medium } from '../../utils/fonts';
 import PropsTypes from 'prop-types';
+import KeyCloakService from '../../services/KeyCloakService';
 
 const MenuOption = styled(Medium)`
   cursor: pointer;
   transition: color 0.3s ease-in-out;
-  color: ${({theme, active}) => active ? theme.colors.green : theme.colors.dark};
+  color: ${({ theme, active }) =>
+    active ? theme.colors.green : theme.colors.dark};
 
   &:hover {
-    color: ${({theme}) => theme.colors.green};
+    color: ${({ theme }) => theme.colors.green};
   }
 `;
 
 const MobileChallengeMenu = (props) => {
-    return (
+  let options = ['Leaderboard', 'Readme', 'How to'];
-        <>
+  if (KeyCloakService.isLoggedIn())
-            <FlexRow gap='32px'>
+    options = ['Leaderboard', 'Readme', 'How to', 'My entries', 'Submit'];
-                <MenuOption as='button' active={0 === props.section} to='/' onClick={() => props.setSection(0)}>
+  const renderLoggedOptions = () => {
-                    Leaderboard
+    if (options.length > 3) {
-                </MenuOption>
+      return (
-                <MenuOption as='button' active={1 === props.section} to='/' onClick={() => props.setSection(1)}>
+        <FlexRow gap="36px">
-                    Readme
+          <MenuOption
-                </MenuOption>
+            as="button"
-                <MenuOption as='button' active={2 === props.section} to='/' onClick={() => props.setSection(2)}>
+            active={3 === props.section}
-                    How to
+            to="/"
-                </MenuOption>
+            onClick={() => props.setSection(3)}
-            </FlexRow>
+          >
-            <FlexRow gap='36px'>
+            {options[3]}
-                <MenuOption as='button' active={3 === props.section} to='/' onClick={() => props.setSection(3)}>
+          </MenuOption>
-                    My entries
+          <MenuOption
-                </MenuOption>
+            as="button"
-                <MenuOption as='button' active={4 === props.section} to='/' onClick={() => props.setSection(4)}>
+            active={4 === props.section}
-                    Submit
+            to="/"
-                </MenuOption>
+            onClick={() => props.setSection(4)}
-            </FlexRow>
+          >
-        </>
+            {options[4]}
-    );
+          </MenuOption>
+        </FlexRow>
+      );
+    }
+  };
+  return (
+    <>
+      <FlexRow gap="32px">
+        <MenuOption
+          as="button"
+          active={0 === props.section}
+          to="/"
+          onClick={() => props.setSection(0)}
+        >
+          {options[0]}
+        </MenuOption>
+        <MenuOption
+          as="button"
+          active={1 === props.section}
+          to="/"
+          onClick={() => props.setSection(1)}
+        >
+          {options[1]}
+        </MenuOption>
+        <MenuOption
+          as="button"
+          active={2 === props.section}
+          to="/"
+          onClick={() => props.setSection(2)}
+        >
+          {options[2]}
+        </MenuOption>
+      </FlexRow>
+      {renderLoggedOptions()}
+    </>
+  );
 };
 
 MobileChallengeMenu.propTypes = {
-    section: PropsTypes.number,
+  section: PropsTypes.number,
 };
 
 MobileChallengeMenu.defaultProps = {
-    section: 0,
+  section: 0,
 };
 
-export default MobileChallengeMenu;
+export default MobileChallengeMenu;

src/components/specific_challenge/MyEntries/MyEntries.js

@@ -78,8 +78,6 @@ const MyEntries = (props) => {
     );
   };
 
-  const mobileRender = () => {};
-
   const sortByUpdate = (elem, i) => {
     let newEntries = myEntries;
     switch (elem) {
@@ -125,12 +123,59 @@ const MyEntries = (props) => {
     setMyEntries(newEntries);
   };
 
+  const mobileRender = () => {
+    return (
+      <FlexColumn padding="24px 12px" width="70%" as="section" id="start">
+        <H2 as="h2" margin="0 0 12px 0">
+          My Entries
+        </H2>
+        {!loading ? (
+          <>
+            <Search searchQueryHandler={searchQueryHandler} />
+            <Pager
+              pageNr={pageNr}
+              width="48px"
+              borderRadius="64px"
+              pages={CALC_PAGES(myEntries)}
+              nextPage={nextPage}
+              previousPage={previousPage}
+              number={`${pageNr} / ${CALC_PAGES(myEntries)}`}
+            />
+          </>
+        ) : (
+          <Loading />
+        )}
+      </FlexColumn>
+    );
+  };
+
   const desktopRender = () => {
     return (
       <FlexColumn padding="24px" as="section" width="100%" maxWidth="1400px">
         <H2 as="h2" margin="0 0 32px 0">
           My entries
-        </H2>
+        </H2>{' '}
+        <FlexColumn padding="24px 12px" width="70%" as="section" id="start">
+          <H2 as="h2" margin="0 0 12px 0">
+            My Entries
+          </H2>
+          {!loading ? (
+            <>
+              <Search searchQueryHandler={searchQueryHandler} />
+              <Pager
+                pageNr={pageNr}
+                width="48px"
+                borderRadius="64px"
+                pages={CALC_PAGES(myEntries)}
+                nextPage={nextPage}
+                previousPage={previousPage}
+                number={`${pageNr} / ${CALC_PAGES(myEntries)}`}
+              />
+            </>
+          ) : (
+            <Loading />
+          )}
+        </FlexColumn>
         {myEntries && !loading ? (
           <>
             <Search searchQueryHandler={searchQueryHandler} />
@@ -150,6 +195,7 @@ const MyEntries = (props) => {
                 format: EVALUATIONS_FORMAT,
                 order: 2,
                 align: 'left',
+                mobileRender,
               }}
               pageNr={pageNr}
               elements={myEntries}
@@ -158,6 +204,7 @@ const MyEntries = (props) => {
             <Pager
               pageNr={pageNr}
               width="72px"
+              mobileRender
               borderRadius="64px"
               pages={CALC_PAGES(myEntries, 2)}
               nextPage={nextPage}

src/pages/Challanges/Challenges.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import {Body, H1} from '../../utils/fonts';
+import { Body, H1 } from '../../utils/fonts';
-import {FlexColumn, FlexRow, Svg} from '../../utils/containers';
+import { FlexColumn, FlexRow, Svg } from '../../utils/containers';
 import Search from '../../components/generic/Search';
 import Pager from '../../components/generic/Pager';
 import FiltersMenu from '../../components/challenges_list/FiltersMenu';
@@ -10,147 +10,208 @@ 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} from '../../utils/globals';
+import { CALC_PAGES } from '../../utils/globals';
 import Loading from '../../components/generic/Loading';
 
 const Challenges = () => {
-    const [pageNr, setPageNr] = React.useState(1);
+  const [pageNr, setPageNr] = React.useState(1);
-    const [challengesFromAPI, setChallengesFromAPI] = React.useState([]);
+  const [challengesFromAPI, setChallengesFromAPI] = React.useState([]);
-    const [challenges, setChallenges] = React.useState([]);
+  const [challenges, setChallenges] = React.useState([]);
-    const [filtersMenu, setFiltersMenu] = React.useState(false);
+  const [filtersMenu, setFiltersMenu] = React.useState(false);
-    const [sortBy, setSortBy] = React.useState(0);
+  const [sortBy, setSortBy] = React.useState(0);
-    const [status, setStatus] = React.useState(0);
+  const [status, setStatus] = React.useState(0);
-    const [challengeType, setChallengeType] = React.useState(0);
+  const [challengeType, setChallengeType] = React.useState(0);
-    const [commercial, setCommercial] = React.useState(0);
+  const [commercial, setCommercial] = React.useState(0);
-    const [loading, setLoading] = React.useState(true);
+  const [loading, setLoading] = React.useState(true);
 
-    React.useEffect(() => {
+  React.useEffect(() => {
-        challengesRequest();
+    challengesRequest();
-    }, []);
+  }, []);
 
-    const challengesRequest = () => {
+  const challengesRequest = () => {
-        getChallenges(setChallengesFromAPI);
+    getChallenges(setChallengesFromAPI);
-        getChallenges(setChallenges, setLoading);
+    getChallenges(setChallenges, setLoading);
-    };
+  };
 
-    const sortByHandler = (value) => {
+  const sortByHandler = (value) => {
-        setSortBy(value);
+    setSortBy(value);
-    };
+  };
 
-    const statusHandler = (value) => {
+  const statusHandler = (value) => {
-        setStatus(value);
+    setStatus(value);
-    };
+  };
 
-    const challengeTypeHandler = (value) => {
+  const challengeTypeHandler = (value) => {
-        setChallengeType(value);
+    setChallengeType(value);
-    };
+  };
 
-    const commercialHandler = (value) => {
+  const commercialHandler = (value) => {
-        setCommercial(value);
+    setCommercial(value);
-    };
+  };
 
-    const searchQueryHandler = (event) => {
+  const searchQueryHandler = (event) => {
-        challengeSearchQueryHandler(event, challengesFromAPI, setPageNr, setChallenges);
+    challengeSearchQueryHandler(
-    };
+      event,
-
+      challengesFromAPI,
-    const nextPage = () => {
+      setPageNr,
-        if (pageNr !== CALC_PAGES(challenges)) {
+      setChallenges
-            let newPage = pageNr + 1;
-            setPageNr(newPage);
-        }
-    };
-
-    const previousPage = () => {
-        if (pageNr !== 1) {
-            let newPage = pageNr - 1;
-            setPageNr(newPage);
-        }
-    };
-
-    const renderChallenges = () => {
-        return _renderChallenges(pageNr, challenges);
-    };
-
-    const toggleFiltersMenu = () => {
-        let newFiltersMenu = !filtersMenu;
-        setFiltersMenu(newFiltersMenu);
-    };
-
-    const mobileRender = () => {
-        return (
-            <>
-                <FiltersMenu translateX={filtersMenu ? '0' : '100vw'} opacity={filtersMenu ? '1' : '0'}
-                             toggleFiltersMenu={toggleFiltersMenu}
-                             sortByHandler={sortByHandler} statusHandler={statusHandler}
-                             challengeTypeHandler={challengeTypeHandler} commercialHandler={commercialHandler}
-                             sortBy={sortBy} status={status} challengeType={challengeType} commercial={commercial}/>
-                <FlexColumn as='main' alignmentY='flex-start' width='100%'
-                            minHeight='100vh' padding='90px 0 32px 0'>
-                    <FlexColumn alignmentX='flex-start' width='80%'>
-                        <H1 as='h1' margin='0 0 20px 0'>
-                            Challenges
-                        </H1>
-                        <Search searchQueryHandler={searchQueryHandler} filterButton
-                                toggleFiltersMenu={toggleFiltersMenu}/>
-                        <FlexColumn width='100%'>
-                            <Loading visible={loading}/>
-                            {renderChallenges()}
-                        </FlexColumn>
-                    </FlexColumn>
-                    {!loading ? <Pager pageNr={pageNr} pages={CALC_PAGES(challenges)} width='48px'
-                                       nextPage={nextPage} previousPage={previousPage} borderRadius='64px'
-                                       number={`${pageNr} / ${CALC_PAGES(challenges)}`}/> : ''}
-                </FlexColumn>
-            </>
-        );
-    };
-
-    const desktopRender = () => {
-        return (
-            <>
-                <FiltersMenu toggleFiltersMenu={toggleFiltersMenu} transBackDisplay='none'
-                             sortByHandler={sortByHandler} statusHandler={statusHandler}
-                             challengeTypeHandler={challengeTypeHandler} commercialHandler={commercialHandler}
-                             sortBy={sortBy} status={status} challengeType={challengeType} commercial={commercial}/>
-                <FlexColumn as='main' alignmentY='flex-start' width='100%' id='start'
-                            minHeight='100vh' padding='112px 0 82px 310px'>
-                    <FlexColumn alignmentX='flex-start' width='80%'>
-                        <FlexRow width='100%' gap='32px'>
-                            <FlexColumn alignmentX='flex-start' gap='32px' width='75%' maxWidth='720px'>
-                                <H1 as='h1'>
-                                    Challenges
-                                </H1>
-                                <Body margin='0 0 12px 0' maxWidth='400px'>
-                                    Increase your machine learning skills by competing in our exciting challenges.
-                                </Body>
-                                <Search searchQueryHandler={searchQueryHandler}/>
-                            </FlexColumn>
-                            <Svg src={cupIco} size='contain' width='25%'
-                                 height='160px' backgroundColor={theme.colors.green}/>
-                        </FlexRow>
-                        <FlexColumn width='100%'>
-                            <Loading visible={loading}/>
-                            {renderChallenges()}
-                        </FlexColumn>
-                    </FlexColumn>
-                    {!loading ? <Pager pageNr={pageNr} pages={CALC_PAGES(challenges)} borderRadius='64px'
-                                       nextPage={nextPage} previousPage={previousPage} width='72px'
-                                       number={`${pageNr} / ${CALC_PAGES(challenges)}`}/> : ''}
-                </FlexColumn>
-            </>
-        );
-    };
-
-    return (
-        <>
-            <Media query={theme.mobile}>
-                {mobileRender()}
-            </Media>
-            <Media query={theme.desktop}>
-                {desktopRender()}
-            </Media>
-        </>
     );
+  };
+
+  const nextPage = () => {
+    if (pageNr !== CALC_PAGES(challenges)) {
+      let newPage = pageNr + 1;
+      setPageNr(newPage);
+    }
+  };
+
+  const previousPage = () => {
+    if (pageNr !== 1) {
+      let newPage = pageNr - 1;
+      setPageNr(newPage);
+    }
+  };
+
+  const renderChallenges = () => {
+    return _renderChallenges(pageNr, challenges);
+  };
+
+  const toggleFiltersMenu = () => {
+    let newFiltersMenu = !filtersMenu;
+    setFiltersMenu(newFiltersMenu);
+  };
+
+  const mobileRender = () => {
+    return (
+      <p>siema</p>
+      //   <>
+      //     <FiltersMenu
+      //       translateX={filtersMenu ? '0' : '100vw'}
+      //       opacity={filtersMenu ? '1' : '0'}
+      //       toggleFiltersMenu={toggleFiltersMenu}
+      //       sortByHandler={sortByHandler}
+      //       statusHandler={statusHandler}
+      //       challengeTypeHandler={challengeTypeHandler}
+      //       commercialHandler={commercialHandler}
+      //       sortBy={sortBy}
+      //       status={status}
+      //       challengeType={challengeType}
+      //       commercial={commercial}
+      //     />
+      //     <FlexColumn
+      //       as="main"
+      //       alignmentY="flex-start"
+      //       width="100%"
+      //       minHeight="100vh"
+      //       padding="90px 0 32px 0"
+      //     >
+      //       <FlexColumn alignmentX="flex-start" width="80%">
+      //         <H1 as="h1" margin="0 0 20px 0">
+      //           Challenges
+      //         </H1>
+      //         <Search
+      //           searchQueryHandler={searchQueryHandler}
+      //           filterButton
+      //           toggleFiltersMenu={toggleFiltersMenu}
+      //         />
+      //         <FlexColumn width="100%">
+      //           <Loading visible={loading} />
+      //           {renderChallenges()}
+      //         </FlexColumn>
+      //       </FlexColumn>
+      //       {!loading ? (
+      //         <Pager
+      //           pageNr={pageNr}
+      //           pages={CALC_PAGES(challenges)}
+      //           width="48px"
+      //           nextPage={nextPage}
+      //           previousPage={previousPage}
+      //           borderRadius="64px"
+      //           number={`${pageNr} / ${CALC_PAGES(challenges)}`}
+      //         />
+      //       ) : (
+      //         ''
+      //       )}
+      //     </FlexColumn>
+      //   </>
+    );
+  };
+
+  const desktopRender = () => {
+    return (
+      <>
+        <FiltersMenu
+          toggleFiltersMenu={toggleFiltersMenu}
+          transBackDisplay="none"
+          sortByHandler={sortByHandler}
+          statusHandler={statusHandler}
+          challengeTypeHandler={challengeTypeHandler}
+          commercialHandler={commercialHandler}
+          sortBy={sortBy}
+          status={status}
+          challengeType={challengeType}
+          commercial={commercial}
+        />
+        <FlexColumn
+          as="main"
+          alignmentY="flex-start"
+          width="100%"
+          id="start"
+          minHeight="100vh"
+          padding="112px 0 82px 310px"
+        >
+          <FlexColumn alignmentX="flex-start" width="80%">
+            <FlexRow width="100%" gap="32px">
+              <FlexColumn
+                alignmentX="flex-start"
+                gap="32px"
+                width="75%"
+                maxWidth="720px"
+              >
+                <H1 as="h1">Challenges</H1>
+                <Body margin="0 0 12px 0" maxWidth="400px">
+                  Increase your machine learning skills by competing in our
+                  exciting challenges.
+                </Body>
+                <Search searchQueryHandler={searchQueryHandler} />
+              </FlexColumn>
+              <Svg
+                src={cupIco}
+                size="contain"
+                width="25%"
+                height="160px"
+                backgroundColor={theme.colors.green}
+              />
+            </FlexRow>
+            <FlexColumn width="100%">
+              <Loading visible={loading} />
+              {renderChallenges()}
+            </FlexColumn>
+          </FlexColumn>
+          {!loading ? (
+            <Pager
+              pageNr={pageNr}
+              pages={CALC_PAGES(challenges)}
+              borderRadius="64px"
+              nextPage={nextPage}
+              previousPage={previousPage}
+              width="72px"
+              number={`${pageNr} / ${CALC_PAGES(challenges)}`}
+            />
+          ) : (
+            ''
+          )}
+        </FlexColumn>
+      </>
+    );
+  };
+
+  return (
+    <>
+      <Media query={theme.mobile}>{mobileRender()}</Media>
+      <Media query={theme.desktop}>{desktopRender()}</Media>
+    </>
+  );
 };
 
-export default Challenges;
+export default Challenges;