refactor: CHALLENGE_SECTIONS ENUM

2023-04-04 10:51:20 +02:00 · 2023-04-04 10:51:20 +02:00 · e13671f885
commit e13671f885
parent 3e66cfa3a9
6 changed files with 124 additions and 136 deletions
--- a/.env
+++ b/.env
@ -2,4 +2,4 @@ REACT_APP_KC_URL=https://auth-dev.csi.wmi.amu.edu.pl/
 REACT_APP_KC_REALM=gonito-dev
 REACT_APP_KC_CLIENT_ID=gonito-dev-localhost

-REACT_APP_API=https://gonito-back-dev.csi.wmi.amu.edu.pl/api
+REACT_APP_API=https://gonito.net/api
--- a/src/App.js
+++ b/src/App.js
@ -11,6 +11,7 @@ import {
  POLICY_PRIVACY_PAGE,
  LOGIN_REQUIRED_PAGES,
  ROOT_URL,
+  CHALLENGE_SECTIONS,
 } from './utils/globals';
 import KeyCloakService from './services/KeyCloakService';
 import React from 'react';
@ -121,36 +122,36 @@ const App = () => {
          <Routes>
            <Route
              path={`${CHALLENGE_PAGE}/:challengeId`}
-              element={<Challenge section={0} />}
+              element={<Challenge section={CHALLENGE_SECTIONS.LEADERBOARD} />}
            />
            <Route
              path={`${CHALLENGE_PAGE}/:challengeId/leaderboard`}
-              element={<Challenge section={0} />}
+              element={<Challenge section={CHALLENGE_SECTIONS.LEADERBOARD} />}
            />
            <Route
              path={`${CHALLENGE_PAGE}/:challengeId/allentries`}
-              element={<Challenge section={1} />}
+              element={<Challenge section={CHALLENGE_SECTIONS.ALL_ENTRIES} />}
            />
            <Route
              path={`${CHALLENGE_PAGE}/:challengeId/readme`}
-              element={<Challenge section={2} />}
+              element={<Challenge section={CHALLENGE_SECTIONS.README} />}
            />
            <Route
              path={`${CHALLENGE_PAGE}/:challengeId/howto`}
              element={
                <Challenge
                  popUpMessageHandler={popUpMessageHandler}
-                  section={3}
+                  section={CHALLENGE_SECTIONS.HOW_TO}
                />
              }
            />
            <Route
              path={`${CHALLENGE_PAGE}/:challengeId/myentries`}
-              element={<Challenge section={4} />}
+              element={<Challenge section={CHALLENGE_SECTIONS.MY_ENTRIES} />}
            />
            <Route
              path={`${CHALLENGE_PAGE}/:challengeId/submit`}
-              element={<Challenge section={5} />}
+              element={<Challenge section={CHALLENGE_SECTIONS.SUBMIT} />}
            />
            <Route path={CHALLENGES_PAGE} element={<Challenges />} />
            <Route
--- a/src/components/specific_challenge/Challenge.js
+++ b/src/components/specific_challenge/Challenge.js
@ -11,7 +11,7 @@ import MyEntries from './MyEntries/MyEntries';
 import Submit from './Submit';
 import Media from 'react-media';
 import DesktopChallengeMenu from './DesktopChallengeMenu';
-import { RENDER_ICO } from '../../utils/globals';
+import { CHALLENGE_SECTIONS, RENDER_ICO } from '../../utils/globals';
 import textIco from '../../assets/text_ico.svg';
 import getChallengeInfo from '../../api/getChallengeInfo';
 import Loading from '../generic/Loading';
@ -31,7 +31,7 @@ const Challenge = (props) => {

  const sectionRender = () => {
    switch (props.section) {
-      case 0:
+      case CHALLENGE_SECTIONS.LEADERBOARD:
        return (
          <Leaderboard
            challengeName={challengeName}
@ -39,11 +39,11 @@ const Challenge = (props) => {
            user={user}
          />
        );
-      case 1:
+      case CHALLENGE_SECTIONS.ALL_ENTRIES:
        return (
          <AllEntries challengeName={challengeName} setLoading={setLoading} />
        );
-      case 2:
+      case CHALLENGE_SECTIONS.README:
        return (
          <Readme
            challengeName={challengeName}
@ -52,7 +52,7 @@ const Challenge = (props) => {
            deadline={challenge.deadline}
          />
        );
-      case 3:
+      case CHALLENGE_SECTIONS.HOW_TO:
        return (
          <HowTo
            popUpMessageHandler={props.popUpMessageHandler}
@ -60,9 +60,9 @@ const Challenge = (props) => {
            user={user}
          />
        );
-      case 4:
+      case CHALLENGE_SECTIONS.MY_ENTRIES:
        return <MyEntries challengeName={challengeName} />;
-      case 5:
+      case CHALLENGE_SECTIONS.SUBMIT:
        return <Submit challengeName={challengeName} setLoading={setLoading} />;
      default:
        return (
--- a/src/components/specific_challenge/DesktopChallengeMenu.js
+++ b/src/components/specific_challenge/DesktopChallengeMenu.js
@ -27,6 +27,7 @@ const Option = styled(FlexColumn)`
  cursor: pointer;
  background-color: ${({ theme, active }) =>
    active ? theme.colors.green05 : theme.colors.white};
+  text-decoration: none;

  * {
    cursor: pointer;
--- a/src/components/specific_challenge/Readme.js
+++ b/src/components/specific_challenge/Readme.js
@ -1,10 +1,9 @@
 import React from 'react';
-import {FlexColumn} from '../../utils/containers';
-import {Body, H2} from '../../utils/fonts';
+import { FlexColumn } from '../../utils/containers';
+import { Body, H2 } from '../../utils/fonts';
 import Media from 'react-media';
 import theme from '../../utils/theme';
 import getChallengeFullDescription from '../../api/getChallengeFullDescription';
-// import {markdown} from 'markdown';
 import styled from 'styled-components';
 import InfoList from '../generic/InfoList';
 import Loading from '../generic/Loading';
@ -29,7 +28,7 @@ const ReadmeStyle = styled(Body)`
    line-height: 22px;
    margin: 24px 0;

-    @media (min-width: ${({theme}) => theme.overMobile}) {
+    @media (min-width: ${({ theme }) => theme.overMobile}) {
      font-size: 22px;
      line-height: 26px;
    }
@ -41,7 +40,7 @@ const ReadmeStyle = styled(Body)`
    font-size: 14px;
    line-height: 20px;

-    @media (min-width: ${({theme}) => theme.overMobile}) {
+    @media (min-width: ${({ theme }) => theme.overMobile}) {
      font-weight: 400;
      font-size: 16px;
      line-height: 22px;
@ -53,10 +52,10 @@ const ReadmeStyle = styled(Body)`
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
-    color: ${({theme}) => theme.colors.dark};
+    color: ${({ theme }) => theme.colors.dark};
    text-decoration: none;

-    @media (min-width: ${({theme}) => theme.overMobile}) {
+    @media (min-width: ${({ theme }) => theme.overMobile}) {
      font-size: 16px;
      line-height: 22px;
      font-weight: 500;
@ -65,127 +64,104 @@ const ReadmeStyle = styled(Body)`
 `;

 const Readme = (props) => {
-    const [fullDescription, setFullDescription] = React.useState('');
-    const [loading, setLoading] = React.useState(true);
+  const [fullDescription, setFullDescription] = React.useState('');
+  const [loading, setLoading] = React.useState(true);

-    React.useEffect(() => {
-        getChallengeFullDescription(setFullDescription, setLoading, props.challengeName);
-    }, [props.challengeName]);
-
-    const parseMarkdownResponse = (response) => {
-        let result = marked.parse(response);
-        let regex = /<h3 /g;
-        result = result.replace(regex, '<h4 ');
-        regex = /<\/h3>/g;
-        result = result.replace(regex, '</h4>');
-        regex = /<h2 /g;
-        result = result.replace(regex, '<h3 ');
-        regex = /<\/h2>/g;
-        result = result.replace(regex, '</h3>');
-        regex = /<h1 /g;
-        result = result.replace(regex, '<h2 ');
-        regex = /<\/h1>/g;
-        result = result.replace(regex, '</h2>');
-        return result;
-    };
-
-    const mobileRender = () => {
-        return (
-            <FlexColumn as='section' padding='20px' gap='24px'>
-                <FlexColumn gap='12px' alignmentX='flex-start'>
-                    <H2 as='h2'>
-                        Info
-                    </H2>
-                    <InfoList iconsSize='24px' metric={props.metric} deadline={props.deadline}/>
-                </FlexColumn>
-                <FlexColumn alignmentX='flex-start' maxWidth='260px'>
-                    {/* <H2 as='h2'>
-                        Description
-                    </H2> */}
-                    <ReadmeStyle as={fullDescription ? 'article' : 'p'} dangerouslySetInnerHTML={{
-                        __html: fullDescription
-                            ? parseMarkdownResponse(fullDescription) : props.description
-                    }}/>
-                </FlexColumn>
-                {/* <FlexColumn gap='16px' alignmentX='flex-start' maxWidth='260px'>
-                    <H2 as='h2'>
-                        Baseline
-                    </H2>
-                    <FlexColumn gap='12px' alignmentX='flex-start'>
-                        <Body as='p'>
-                            In metus ex, venenatis quis risus eget, sodales venenatis nibh. Sed ullamcorper leo non nunc
-                            euismod, id faucibus justo finibus. Nullam malesuada eros quam, eu lobortis leo feugiat non.
-                        </Body>
-                        <Body as='p'>
-                            See notebook&nbsp;
-                            <Medium as='a' href='#' display='inline-block' cursor='pointer'>
-                                here.
-                            </Medium>
-                        </Body>
-                    </FlexColumn>
-                </FlexColumn> */}
-            </FlexColumn>
-        );
-    };
-
-    const desktopRender = () => {
-        return (
-            <FlexColumn as='section' padding='20px' gap='64px'>
-                <FlexColumn gap='32px'>
-                    <H2 as='h2'>
-                        Info
-                    </H2>
-                    <InfoList iconsSize='32px' metric={props.metric} deadline={props.deadline}/>
-                </FlexColumn>
-                <FlexColumn alignmentX='flex-start' width='80%' maxWidth='1200px'>
-                    {/* <H2 as='h2'>
-                        Description
-                    </H2> */}
-                    <ReadmeStyle as={fullDescription ? 'section' : 'p'} dangerouslySetInnerHTML={{
-                        __html: fullDescription ? parseMarkdownResponse(fullDescription) : props.description
-                    }}/>
-                </FlexColumn>
-                {/* <FlexColumn gap='16px' alignmentX='flex-start' width='80%' maxWidth='1000px'>
-                    <H2 as='h2'>
-                        Baseline
-                    </H2>
-                    <FlexColumn gap='12px' alignmentX='flex-start'>
-                        <Body as='p'>
-                            In metus ex, venenatis quis risus eget, sodales venenatis nibh. Sed ullamcorper leo non nunc
-                            euismod, id faucibus justo finibus. Nullam malesuada eros quam, eu lobortis leo feugiat non.
-                        </Body>
-                        <Body as='p'>
-                            See notebook&nbsp;
-                            <Medium as='a' href='#' display='inline-block' cursor='pointer'>
-                                here.
-                            </Medium>
-                        </Body>
-                    </FlexColumn>
-                </FlexColumn> */}
-            </FlexColumn>
-        );
-    };
-
-    return (
-        <>
-            <Media query={theme.mobile}>
-                {!loading ? mobileRender() : <Loading visible={loading}/>}
-            </Media>
-            <Media query={theme.desktop}>
-                {!loading ? desktopRender() : <Loading visible={loading}/>}
-            </Media>
-        </>
+  React.useEffect(() => {
+    getChallengeFullDescription(
+      setFullDescription,
+      setLoading,
+      props.challengeName
    );
+  }, [props.challengeName]);
+
+  const parseMarkdownResponse = (response) => {
+    let result = marked.parse(response);
+    let regex = /<h3 /g;
+    result = result.replace(regex, '<h4 ');
+    regex = /<\/h3>/g;
+    result = result.replace(regex, '</h4>');
+    regex = /<h2 /g;
+    result = result.replace(regex, '<h3 ');
+    regex = /<\/h2>/g;
+    result = result.replace(regex, '</h3>');
+    regex = /<h1 /g;
+    result = result.replace(regex, '<h2 ');
+    regex = /<\/h1>/g;
+    result = result.replace(regex, '</h2>');
+    return result;
+  };
+
+  const mobileRender = () => {
+    return (
+      <FlexColumn as="section" padding="20px" gap="24px">
+        <FlexColumn gap="12px" alignmentX="flex-start">
+          <H2 as="h2">Info</H2>
+          <InfoList
+            iconsSize="24px"
+            metric={props.metric}
+            deadline={props.deadline}
+          />
+        </FlexColumn>
+        <FlexColumn alignmentX="flex-start" maxWidth="260px">
+          <ReadmeStyle
+            as={fullDescription ? 'article' : 'p'}
+            dangerouslySetInnerHTML={{
+              __html: fullDescription
+                ? parseMarkdownResponse(fullDescription)
+                : props.description,
+            }}
+          />
+        </FlexColumn>
+      </FlexColumn>
+    );
+  };
+
+  const desktopRender = () => {
+    return (
+      <FlexColumn as="section" padding="20px" gap="64px">
+        <FlexColumn gap="32px">
+          <H2 as="h2">Info</H2>
+          <InfoList
+            iconsSize="32px"
+            metric={props.metric}
+            deadline={props.deadline}
+          />
+        </FlexColumn>
+        <FlexColumn alignmentX="flex-start" width="80%" maxWidth="1200px">
+          <ReadmeStyle
+            as={fullDescription ? 'section' : 'p'}
+            dangerouslySetInnerHTML={{
+              __html: fullDescription
+                ? parseMarkdownResponse(fullDescription)
+                : props.description,
+            }}
+          />
+        </FlexColumn>
+      </FlexColumn>
+    );
+  };
+
+  return (
+    <>
+      <Media query={theme.mobile}>
+        {!loading ? mobileRender() : <Loading visible={loading} />}
+      </Media>
+      <Media query={theme.desktop}>
+        {!loading ? desktopRender() : <Loading visible={loading} />}
+      </Media>
+    </>
+  );
 };

 MiniChallenge.propTypes = {
-    challengeName: PropsTypes.string,
-    description: PropsTypes.string,
+  challengeName: PropsTypes.string,
+  description: PropsTypes.string,
 };

 MiniChallenge.defaultProps = {
-    challengeName: '',
-    description: '',
+  challengeName: '',
+  description: '',
 };

-export default Readme;
+export default Readme;
--- a/src/utils/globals.js
+++ b/src/utils/globals.js
@ -18,6 +18,15 @@ const ROOT_URL = window.location.origin;

 const LOGIN_REQUIRED_PAGES = ['myentries', 'submit'];

+const CHALLENGE_SECTIONS = {
+  LEADERBOARD: 0,
+  ALL_ENTRIES: 1,
+  README: 2,
+  HOW_TO: 3,
+  MY_ENTRIES: 4,
+  SUBMIT: 5,
+};
+
 const MINI_DESCRIPTION_RENDER = (description) => {
  if (description) {
    if (description.length <= MINI_DESCRIPTION_LENGTH) return description;
@ -86,6 +95,7 @@ export {
  POLICY_PRIVACY_PAGE,
  ROOT_URL,
  LOGIN_REQUIRED_PAGES,
+  CHALLENGE_SECTIONS,
  MINI_DESCRIPTION_RENDER,
  RENDER_ICO,
  CALC_PAGES,