get current user profile info to disable edit and delete submission

src/components/generic/Table/components/TableRowFooter/TableRowFooter.js

@@ -7,6 +7,24 @@ import deleteIco from '../../../../../assets/delete_ico.svg';
 import KeyCloakService from '../../../../../services/KeyCloakService';
 
 const TableRowFooter = ({ rowFooter, item, i, deleteItem, editItem }) => {
+  const [profileInfo, setProfileInfo] = React.useState(null);
+
+  React.useEffect(() => {
+    KeyCloakService.getProfileInfo(setProfileInfo);
+  }, []);
+
+  const isActive = () => {
+    if (!KeyCloakService.isLoggedIn()) return false;
+    if (profileInfo) {
+      if (
+        profileInfo?.preferred_username !== item.submitter &&
+        profileInfo?.name !== item.submitter
+      )
+        return false;
+    }
+    return true;
+  };
+
   if (rowFooter) {
     return (
       <FlexRow className="TableStyle__row-footer">
@@ -16,7 +34,7 @@ const TableRowFooter = ({ rowFooter, item, i, deleteItem, editItem }) => {
             { icon: pensilIco, handler: () => editItem() },
             { icon: deleteIco, handler: () => deleteItem() },
           ]}
-          active={KeyCloakService.isLoggedIn()}
+          active={isActive()}
           i={i}
         />
       </FlexRow>

src/pages/Challenge/Challenge.js

@@ -4,10 +4,10 @@ import { useParams } from 'react-router-dom';
 import { H1, Medium } from '../../utils/fonts';
 import theme from '../../utils/theme';
 import MobileChallengeMenu from './components/MobileChallengeMenu';
-import Leaderboard from '../Leaderboard/Leaderboard';
+import Leaderboard from '../Leaderboard';
 import Readme from '../Readme';
-import HowTo from '../HowTo/HowTo';
-import MyEntries from '../MyEntries/MyEntries';
+import HowTo from '../HowTo';
+import MyEntries from '../MyEntries';
 import Submit from '../Submit';
 import Media from 'react-media';
 import DesktopChallengeMenu from './components/DesktopChallengeMenu';
@@ -15,7 +15,7 @@ import { CHALLENGE_SECTIONS, RENDER_ICO } from '../../utils/globals';
 import textIco from '../../assets/text_ico.svg';
 import getChallengeInfo from '../../api/getChallengeInfo';
 import Loading from '../../components/generic/Loading';
-import AllEntries from '../AllEntries/AllEntries';
+import AllEntries from '../AllEntries';
 
 const Challenge = (props) => {
   const challengeName = useParams().challengeId;
@@ -37,7 +37,11 @@ const Challenge = (props) => {
         );
       case CHALLENGE_SECTIONS.ALL_ENTRIES:
         return (
-          <AllEntries challengeName={challengeName}  setLoading={setLoading} popUpMessageHandler={props.popUpMessageHandler} />
+          <AllEntries
+            challengeName={challengeName}
+            setLoading={setLoading}
+            popUpMessageHandler={props.popUpMessageHandler}
+          />
         );
       case CHALLENGE_SECTIONS.README:
         return (
@@ -56,7 +60,12 @@ const Challenge = (props) => {
           />
         );
       case CHALLENGE_SECTIONS.MY_ENTRIES:
-        return <MyEntries challengeName={challengeName} popUpMessageHandler={props.popUpMessageHandler} />;
+        return (
+          <MyEntries
+            challengeName={challengeName}
+            popUpMessageHandler={props.popUpMessageHandler}
+          />
+        );
       case CHALLENGE_SECTIONS.SUBMIT:
         return <Submit challengeName={challengeName} setLoading={setLoading} />;
       default:

src/pages/Readme/Readme.js

@@ -1,65 +1,13 @@
 import React from 'react';
-import { FlexColumn } from '../utils/containers';
-import { Body, H2 } from '../utils/fonts';
+import { FlexColumn } from '../../utils/containers';
+import { H2 } from '../../utils/fonts';
 import Media from 'react-media';
-import theme from '../utils/theme';
-import getChallengeFullDescription from '../api/getChallengeFullDescription';
-import styled from 'styled-components';
-import InfoList from '../components/generic/InfoList';
-import Loading from '../components/generic/Loading';
+import theme from '../../utils/theme';
+import getChallengeFullDescription from '../../api/getChallengeFullDescription';
+import InfoList from '../../components/generic/InfoList';
+import Loading from '../../components/generic/Loading';
 import { marked } from 'marked';
-
-const ReadmeStyle = styled(Body)`
-  * {
-    font-weight: inherit;
-  }
-
-  h2 {
-    font-family: 'Kanit', sans-serif;
-    margin: 32px 0;
-  }
-
-  h3 {
-    font-family: 'Kanit', sans-serif;
-    font-weight: inherit;
-    font-size: 18px;
-    line-height: 22px;
-    margin: 24px 0;
-
-    @media (min-width: ${({ theme }) => theme.overMobile}) {
-      font-size: 22px;
-      line-height: 26px;
-    }
-  }
-
-  p {
-    font-family: 'Roboto', sans-serif;
-    font-weight: 300;
-    font-size: 14px;
-    line-height: 20px;
-
-    @media (min-width: ${({ theme }) => theme.overMobile}) {
-      font-weight: 400;
-      font-size: 16px;
-      line-height: 22px;
-    }
-  }
-
-  a {
-    font-family: 'Roboto', sans-serif;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 20px;
-    color: ${({ theme }) => theme.colors.dark};
-    text-decoration: none;
-
-    @media (min-width: ${({ theme }) => theme.overMobile}) {
-      font-size: 16px;
-      line-height: 22px;
-      font-weight: 500;
-    }
-  }
-`;
+import ReadmeStyle from './ReadmeStyle';
 
 const Readme = (props) => {
   const [fullDescription, setFullDescription] = React.useState('');
@@ -117,8 +65,13 @@ const Readme = (props) => {
 
   const desktopRender = () => {
     return (
-      <FlexColumn as="section" padding="20px" gap="64px">
-        <FlexColumn gap="32px">
+      <FlexColumn
+        as="section"
+        className="Readme__section"
+        padding="20px"
+        gap="64px"
+      >
+        <FlexColumn className="Readme__info" gap="32px">
           <H2 as="h2">Info</H2>
           <InfoList
             iconsSize="32px"
@@ -126,7 +79,12 @@ const Readme = (props) => {
             deadline={props.deadline}
           />
         </FlexColumn>
-        <FlexColumn alignmentX="flex-start" width="80%" maxWidth="1200px">
+        <FlexColumn
+          className="Readme__container"
+          alignmentX="flex-start"
+          width="80%"
+          maxWidth="1200px"
+        >
           <ReadmeStyle
             as={fullDescription ? 'section' : 'p'}
             dangerouslySetInnerHTML={{

src/pages/Readme/ReadmeStyle.js

@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+
+const ReadmeStyle = styled.section`
+  padding: 20px;
+  gap: 24px;
+
+  @media (min-width: ${({ theme }) => theme.overMobile}) {
+    gap: 64px;
+  }
+
+  /* .ReadmeStyle__content { */
+  * {
+    font-weight: inherit;
+  }
+
+  h2 {
+    font-family: 'Kanit', sans-serif;
+    margin: 32px 0;
+  }
+
+  h3 {
+    font-family: 'Kanit', sans-serif;
+    font-weight: inherit;
+    font-size: 18px;
+    line-height: 22px;
+    margin: 24px 0;
+
+    @media (min-width: ${({ theme }) => theme.overMobile}) {
+      font-size: 22px;
+      line-height: 26px;
+    }
+  }
+
+  p {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 300;
+    font-size: 14px;
+    line-height: 20px;
+
+    @media (min-width: ${({ theme }) => theme.overMobile}) {
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 22px;
+    }
+  }
+
+  a {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    color: ${({ theme }) => theme.colors.dark};
+    text-decoration: none;
+
+    @media (min-width: ${({ theme }) => theme.overMobile}) {
+      font-size: 16px;
+      line-height: 22px;
+      font-weight: 500;
+    }
+  }
+  /* } */
+`;
+
+export default ReadmeStyle;

src/pages/Readme/components/ReadmeDesktop.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { FlexColumn } from '../../../utils/containers';
+import { H2 } from '../../../utils/fonts';
+import InfoList from '../../../components/generic/InfoList';
+import ReadmeStyle from '../ReadmeStyle';
+
+const ReadmeDesktop = (props) => {
+  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={props.fullDescription ? 'section' : 'p'}
+          dangerouslySetInnerHTML={{
+            __html: props.fullDescription
+              ? props.parseMarkdownResponse(props.fullDescription)
+              : props.description,
+          }}
+        />
+      </FlexColumn>
+    </FlexColumn>
+  );
+};
+
+export default ReadmeDesktop;

src/pages/Readme/components/ReadmeMobile.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { FlexColumn } from '../../../utils/containers';
+import { H2 } from '../../../utils/fonts';
+import InfoList from '../../../components/generic/InfoList';
+import ReadmeStyle from '../ReadmeStyle';
+
+const ReadmeMobile = (props) => {
+  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={props.fullDescription ? 'article' : 'p'}
+          dangerouslySetInnerHTML={{
+            __html: props.fullDescription
+              ? props.parseMarkdownResponse(props.fullDescription)
+              : props.description,
+          }}
+        />
+      </FlexColumn>
+    </FlexColumn>
+  );
+};
+
+export default ReadmeMobile;

src/pages/Readme/index.js

@@ -0,0 +1 @@
+export { default } from './Readme';

src/services/KeyCloakService.js

@@ -1,5 +1,6 @@
 import Keycloak from 'keycloak-js';
 import { POLICY_PRIVACY_PAGE, ROOT_URL } from '../utils/globals';
+import SESSION_STORAGE from '../utils/sessionStorage';
 
 const _kc = new Keycloak({
   url: process.env.REACT_APP_KC_URL,
@@ -30,14 +31,17 @@ const doLogin = () => {
   if (privacyPolicyAccept !== 'accept') {
     window.location.replace(`${ROOT_URL}${POLICY_PRIVACY_PAGE}/login`);
   } else {
-    sessionStorage.setItem('logout', '');
+    sessionStorage.setItem(SESSION_STORAGE.LOGOUT, '');
     _kc.login();
   }
 };
 
 const doLogout = () => {
   sessionStorage.clear();
-  sessionStorage.setItem('logout', 'yes');
+  sessionStorage.setItem(
+    SESSION_STORAGE.LOGOUT,
+    SESSION_STORAGE.STATIC_VALUE.YES
+  );
   _kc.logout();
 };
 
@@ -62,10 +66,13 @@ const getUsername = () => _kc.tokenParsed?.preferred_username;
 const hasRole = (roles) => roles.some((role) => _kc.hasRealmRole(role));
 
 const goToProfile = () => {
-  console.log(_kc.loadUserProfile());
   _kc.accountManagement();
 };
 
+const getProfileInfo = async (setProfileInfo) => {
+  _kc.loadUserInfo().then((response) => setProfileInfo(response));
+};
+
 const KeyCloakService = {
   initKeycloak,
   doLogin,
@@ -77,6 +84,7 @@ const KeyCloakService = {
   hasRole,
   doRegister,
   goToProfile,
+  getProfileInfo,
 };
 
 export default KeyCloakService;