fix: updated profile page, added dcEnable env (#39)

* fix: updated profile page, added dcEnable env

* fix: hid dc leaderboard

* fix: fixed dc Enable and Name

Author: ZaBarudo

src/components/Leaderboard/MainLeaderboard.tsx

@@ -5,6 +5,7 @@ import styles from './Leaderboard.module.css';
 import { CurrentUserApi } from '@codecharacter-2023/client';
 import { useTour } from '@reactour/tour';
 import { apiConfig } from '../../api/ApiConfig';
+import { dcEnable } from '../../config/config';
 
 export default function BattleTV(): JSX.Element {
   const [isDailyChallengeLeaderboard, setIsDailyChallengeLeaderboard] =
@@ -36,21 +37,25 @@ export default function BattleTV(): JSX.Element {
       ) : (
         <Leaderboard />
       )}
-      <button
-        type="button"
-        className={styles.button}
-        onClick={() => {
-          if (!isDailyChallengeLeaderboard) {
-            setIsDailyChallengeLeaderboard(true);
-            setLeaderboardType('Match Leaderboard');
-          } else {
-            setIsDailyChallengeLeaderboard(false);
-            setLeaderboardType('Daily Challenge Leaderboard');
-          }
-        }}
-      >
-        {leaderboardType}
-      </button>
+      {dcEnable ? (
+        <button
+          type="button"
+          className={styles.button}
+          onClick={() => {
+            if (!isDailyChallengeLeaderboard) {
+              setIsDailyChallengeLeaderboard(true);
+              setLeaderboardType('Match Leaderboard');
+            } else {
+              setIsDailyChallengeLeaderboard(false);
+              setLeaderboardType('Daily Challenge Leaderboard');
+            }
+          }}
+        >
+          {leaderboardType}
+        </button>
+      ) : (
+        <></>
+      )}
     </div>
   );
 }

src/components/NavBar/NavBar.tsx

@@ -16,18 +16,18 @@ import { AuthApi } from '@codecharacter-2023/client';
 import { apiConfig, ApiError } from '../../api/ApiConfig';
 import Toast from 'react-hot-toast';
 import DashboardOptions from '../DashboardOptions/DashboardOptions';
-import { cookieDomain } from '../../config/config';
+import { cookieDomain, dcEnable } from '../../config/config';
 
 import signUpIcon from '../../assets/sign_up.svg';
 import signInIcon from '../../assets/sign_in.svg';
-// import challengeDone from '../../assets/challenge_done.png';
-// import challengeAvailable from '../../assets/challenge_available.png';
+import challengeDone from '../../assets/challenge_done.png';
+import challengeAvailable from '../../assets/challenge_available.png';
 import DcCompleted from '../DcModals/DcCompleted';
 import DcAvailable from '../DcModals/DcAvailable';
 import {
   changePageState,
   changeSimulationState,
-  // dailyChallengeCompletionState,
+  dailyChallengeCompletionState,
 } from '../../store/DailyChallenge/dailyChallenge';
 
 const NavBar: React.FunctionComponent = () => {
@@ -37,7 +37,7 @@ const NavBar: React.FunctionComponent = () => {
   const loggedInUser = useAppSelector(user);
   const isLogged = useAppSelector(isloggedIn);
   const loadingAuth = useAppSelector(loading);
-  // const dcCompletionstatus = useAppSelector(dailyChallengeCompletionState);
+  const dcCompletionstatus = useAppSelector(dailyChallengeCompletionState);
   useEffect(() => {
     const cookieValue = document.cookie;
     const bearerToken = cookieValue.split(';');
@@ -157,16 +157,20 @@ const NavBar: React.FunctionComponent = () => {
       location.pathname != '/' ? (
         <div className={styles.profileIcons}>
           <div className={styles.notifIconContainer}>
-            {/* <img
-              src={dcCompletionstatus ? challengeDone : challengeAvailable}
-              className={styles.dcIcon}
-              title="Daily Challenge"
-              onClick={() => {
-                dcCompletionstatus
-                  ? setShowCompleted(true)
-                  : setShowAvailable(true);
-              }}
-            /> */}
+            {dcEnable ? (
+              <img
+                src={dcCompletionstatus ? challengeDone : challengeAvailable}
+                className={styles.dcIcon}
+                title="Daily Challenge"
+                onClick={() => {
+                  dcCompletionstatus
+                    ? setShowCompleted(true)
+                    : setShowAvailable(true);
+                }}
+              />
+            ) : (
+              <></>
+            )}
           </div>
           <div className={styles.notifIcon}>
             <Notifs />

src/components/Profile/Profile.tsx

@@ -45,7 +45,6 @@ const Profile = (): JSX.Element => {
     confirmPassword: 'password',
   });
   const err = useAppSelector(isCreditionalError);
-  const profileScrollRef = useRef<HTMLDivElement>(null);
   const oldpasswordTypeAction = () => {
     if (passwordType.oldpassword === 'password') {
       setPasswordType({
@@ -197,6 +196,8 @@ const Profile = (): JSX.Element => {
     setSelectedAvatar(id);
   };
 
+  const profileScrollRef = useRef<HTMLDivElement>(null);
+
   const handleGoToCreds = () => {
     if (profileScrollRef.current) {
       profileScrollRef.current.scrollTo({
@@ -215,6 +216,15 @@ const Profile = (): JSX.Element => {
     }
   };
 
+  const handleGoToRatingChart = () => {
+    if (profileScrollRef.current) {
+      profileScrollRef.current.scrollTo({
+        top: 1900,
+        behavior: 'smooth',
+      });
+    }
+  };
+
   return (
     <div
       className={styles.profileScrollBody}
@@ -241,7 +251,7 @@ const Profile = (): JSX.Element => {
                 className={classnames('mb-4', styles.formField)}
                 controlId="formBasicUserName"
               >
-                <Form.Label className={styles.label}>USERNAME</Form.Label>
+                <Form.Label className={styles.label}>NAME</Form.Label>
                 <Form.Control
                   type="text"
                   placeholder={loggedInUser.name || 'Full Name'}
@@ -331,20 +341,16 @@ const Profile = (): JSX.Element => {
                 </Button>
               </div>
               <div className={styles.footer}>
-                {
-                  <>
-                    <Button
-                      variant="link"
-                      onClick={() => {
-                        handleGoToCreds();
-                        dispatch(creditionals());
-                      }}
-                      className={styles.linkButton}
-                    >
-                      {'CHANGE CREDENTIALS '}
-                    </Button>
-                  </>
-                }
+                <Button
+                  variant="link"
+                  onClick={() => {
+                    handleGoToCreds();
+                    dispatch(creditionals());
+                  }}
+                  className={styles.linkButton}
+                >
+                  {'CHANGE CREDENTIALS '}
+                </Button>
               </div>
             </div>
             <div>
@@ -459,23 +465,39 @@ const Profile = (): JSX.Element => {
                   SUBMIT{' '}
                 </Button>
               </div>
+              <div className={styles.footer}>
+                <Button
+                  variant="link"
+                  onClick={handleGoBacktoProfile}
+                  className={styles.linkButton}
+                >
+                  {' EDIT PROFILE'}
+                </Button>
+                <Button
+                  variant="link"
+                  onClick={handleGoToRatingChart}
+                  className={styles.linkButton}
+                >
+                  {' RATING CHART'}
+                </Button>
+              </div>
             </div>
           </Form>
+          <RatingChart />
           <div className={styles.footer}>
             <Button
               variant="link"
-              onClick={handleGoBacktoProfile}
+              onClick={() => {
+                handleGoToCreds();
+                dispatch(creditionals());
+              }}
               className={styles.linkButton}
             >
-              {' EDIT PROFILE'}
+              {'CHANGE CREDENTIALS '}
             </Button>
           </div>
         </div>
       </div>
-      <div>
-        <RatingChart />
-        <div className={styles.emptyspace}></div>
-      </div>
     </div>
   );
 };

src/components/Profile/profile.module.css

@@ -2,7 +2,7 @@
     display: flex;
     margin-top: 2rem;
     flex-direction: column;
-    height: 1900px;
+    height: 2700px;
 }
 
 .Container {
@@ -13,7 +13,9 @@
     flex-direction: column;
     overflow: hidden;
 }
-
+.Container > .footer {
+    height: 10rem;
+}
 .header {
     color: white;
     padding: 1rem;
@@ -102,8 +104,9 @@
 .footer {
     text-align: center;
     display: flex;
-    flex-direction: column-reverse;
     align-items: center;
+    justify-content: space-evenly;
+
 }
 
 
@@ -253,6 +256,9 @@
 .formContainer > div:nth-child(1) {
     height: 55rem;
 }
+.formContainer > div:nth-child(2) {
+    height: 50rem;
+}
 
 .profileScrollBody {
     height: 100%;
@@ -265,6 +271,3 @@
     top: 10px;
 }
 
-.emptyspace {
-    height: 13vw;
-}

src/config/config.example.ts

@@ -5,5 +5,6 @@ export const SECRET_KEY = 'YOUR SECRET KEY';
 export const accessUrl = 'ACCESS URL FOR CORS';
 export const homeUrl = 'http://localhost:3000';
 export const lspUrl = 'ws://localhost:8000/ws';
+export const dcEnable = false;
 
 export const cookieDomain = 'localhost';

src/pages/Dashboard/Dashboard.tsx

@@ -67,6 +67,7 @@ import Tour from '../../components/TourProvider/TourProvider';
 import { EditorSteps } from '../../components/TourProvider/EditorSteps';
 import { useNavigate } from 'react-router-dom';
 import TourIntroModal from '../../components/TourIntroModal/TourIntroModal';
+import { dcEnable } from '../../config/config';
 
 type SplitPaneState = {
   horizontalPercent: string;
@@ -140,14 +141,16 @@ export default function Dashboard(): JSX.Element {
         dispatch(loggedIn());
       }
     });
-    dailyChallengeAPI
-      .getDailyChallenge()
-      .then(response => {
-        dispatch(initializeDailyChallengeState(response));
-      })
-      .catch(err => {
-        if (err instanceof ApiError) Toast.error(err.message);
-      });
+    if (dcEnable) {
+      dailyChallengeAPI
+        .getDailyChallenge()
+        .then(response => {
+          dispatch(initializeDailyChallengeState(response));
+        })
+        .catch(err => {
+          if (err instanceof ApiError) Toast.error(err.message);
+        });
+    }
   }, []);
 
   useEffect(() => {