fix: added tutorial icon, change tutorial number

delta · Jan 28, 2024 · e9643c2 · e9643c2
1 parent 72294a7
commit e9643c2
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 31 deletions.
diff --git a/src/assets/book (1).png:Zone.Identifier b/src/assets/book (1).png:Zone.Identifier
@@ -0,0 +1,4 @@
+[ZoneTransfer]
+ZoneId=3
+ReferrerUrl=https://www.flaticon.com/free-icon/book_13637888?term=code+tutorials&page=1&position=1&origin=search&related_id=13637888
+HostUrl=https://www.flaticon.com/download/icon/edited
diff --git a/src/assets/tutorial.png b/src/assets/tutorial.png
diff --git a/src/components/MapDesigner/MapDesigner.tsx b/src/components/MapDesigner/MapDesigner.tsx
@@ -162,7 +162,7 @@ export default function MapDesigner(props: MapDesignerProps): JSX.Element {
           tutorialAPI
             .createCodeTutorialMatch({
               value: JSON.stringify(stagedMap),
-              codeTutorialNumber: 6,
+              codeTutorialNumber: 4,
             })
             .then(() => {
               Toast.success('Code Tutorial submitted succesfully');

diff --git a/src/components/NavBar/NavBar.module.css b/src/components/NavBar/NavBar.module.css
@@ -124,6 +124,19 @@
   opacity: 0.8;
 }
 
+.tutorialIcon {
+  height: 37px;
+  width: auto;
+  margin-top: 5px;
+  position: relative;
+  margin-right: 2rem;
+}
+
+.tutorialIcon:hover{
+  cursor: pointer;
+  opacity: 0.8;
+}
+
 .navbarTextButton {
   background-color: #374043; 
   color: #fff; 

diff --git a/src/components/NavBar/NavBar.tsx b/src/components/NavBar/NavBar.tsx
@@ -21,6 +21,7 @@ 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 tutorialIcon from '../../assets/tutorial.png';
 import DcCompleted from '../DcModals/DcCompleted';
 import DcAvailable from '../DcModals/DcAvailable';
 import {
@@ -188,21 +189,14 @@ const NavBar: React.FunctionComponent = () => {
         <div className={styles.profileIcons}>
           <div className={styles.notifIconContainer}>
             {pageState == 'Dashboard' ? (
-              <button
-                className={styles.navbarTextButton}
+              <img
+                src={tutorialIcon}
+                className={styles.tutorialIcon}
+                title="Code Tutorials"
                 onClick={() => {
                   setShowTutorial(true);
                 }}
-              >
-                Launch Tutorial
-              </button>
-            ) : pageState == 'Tutorials' ? (
-              <button
-                className={styles.navbarTextButton}
-                onClick={handleTutorialClose}
-              >
-                Close Tutorial
-              </button>
+              />
             ) : (
               <></>
             )}

diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
@@ -190,6 +190,7 @@ export default function Dashboard(): JSX.Element {
         .getLatestCode()
         .then(response => {
           dispatch(initializeEditorStates(response));
+          console.log(response);
         })
         .catch(err => {
           if (err instanceof ApiError) Toast.error(err.message);
@@ -289,7 +290,7 @@ export default function Dashboard(): JSX.Element {
     if (isInfoOpen === true) dispatch(isInfoOpened(false));
     else dispatch(isInfoOpened(true));
   }
-
+  console.log(userCode);
   const handleSubmit = () => {
     let languageType: Language = Language.Cpp;
     if (userLanguage === 'c_cpp') languageType = Language.Cpp;
@@ -357,8 +358,10 @@ export default function Dashboard(): JSX.Element {
   const currentUserApi = new CurrentUserApi(apiConfig);
 
   const User = useAppSelector(user);
+  const codeTutorialInitialLevel = User.codeTutorialNumber;
+  console.log(codeTutorialInitialLevel);
   const navigate = useNavigate();
-
+  console.log(codeTutorialNumber);
   const setOpened = (opened: boolean) => {
     if (opened === false) {
       currentUserApi
@@ -581,19 +584,23 @@ export default function Dashboard(): JSX.Element {
                       </Form.Select>
                     </Col>
                     <div className={styles.midDiv}>
-                      <Col className={styles.toolbarColumn} sm="1">
-                        <button
-                          className={styles.toolbarButton}
-                          onClick={handleSubmit}
-                          ref={submitButtonRef}
-                          id="SubmitButton"
-                        >
-                          <FontAwesomeIcon
-                            title="Submit"
-                            icon={faCloudUploadAlt as IconProp}
-                          />{' '}
-                        </button>
-                      </Col>
+                      {codeTutorialNumber == 4 ? (
+                        <></>
+                      ) : (
+                        <Col className={styles.toolbarColumn} sm="1">
+                          <button
+                            className={styles.toolbarButton}
+                            onClick={handleSubmit}
+                            ref={submitButtonRef}
+                            id="SubmitButton"
+                          >
+                            <FontAwesomeIcon
+                              title="Submit"
+                              icon={faCloudUploadAlt as IconProp}
+                            />{' '}
+                          </button>
+                        </Col>
+                      )}
                       <>
                         {codeTutorialNumber == 1 ? (
                           <></>
@@ -605,7 +612,7 @@ export default function Dashboard(): JSX.Element {
                             Prev Tutorial
                           </button>
                         )}
-                        {codeTutorialNumber == 6 ? (
+                        {codeTutorialNumber == 4 ? (
                           <> </>
                         ) : (
                           <button
@@ -768,7 +775,7 @@ export default function Dashboard(): JSX.Element {
             >
               <div className={styles.rightPane} id="MAP">
                 {pageState == 'Dashboard' ||
-                (pageState == 'Tutorials' && codeTutorialNumber != 6) ||
+                (pageState == 'Tutorials' && codeTutorialNumber != 4) ||
                 dailyChallengeSimulationState ? (
                   <RendererComponent />
                 ) : dailyChallenge.challType == 'MAP' ? (
@@ -783,7 +790,7 @@ export default function Dashboard(): JSX.Element {
                       ></img>
                     </div>
                   </>
-                ) : pageState == 'Tutorials' && codeTutorialNumber == 6 ? (
+                ) : pageState == 'Tutorials' && codeTutorialNumber == 4 ? (
                   <MapDesigner pageType={'Tutorials'} />
                 ) : (
                   <MapDesigner pageType={'DailyChallenge'} />

diff --git a/src/store/Tutorials/tutorials.ts b/src/store/Tutorials/tutorials.ts
@@ -5,7 +5,12 @@ import { CodeAndLanguage, languagesAvailable } from '../editor/code';
 import defaultCppCode from '../../assets/codes/cpp/run.cpp?raw';
 import defaultPythonCode from '../../assets/codes/python/run.py?raw';
 import defaultJavaCode from '../../assets/codes/java/Run.java?raw';
+// import { user } from '../../store/User/UserSlice';
+// import { useAppSelector } from '../hooks';
 
+// const User = useAppSelector(user);
+// const codeTutorialInitialLevel = User.codeTutorialNumber;
+// console.log(codeTutorialInitialLevel);
 export interface TutorialStateType {
   tutorials: TutorialsGetRequest;
   tutorialCode: string | undefined;

diff --git a/src/store/User/UserApi.ts b/src/store/User/UserApi.ts
@@ -66,6 +66,7 @@ export const getUserDetails = (): Promise<{
   country: string;
   avatarId: number;
   isTutorialComplete: boolean;
+  codeTutorialNumber: number | undefined;
 }> => {
   return new Promise((resolve, reject) => {
     const currentUserapi = new CurrentUserApi(apiConfig);
@@ -82,6 +83,7 @@ export const getUserDetails = (): Promise<{
           country: res.country,
           avatarId: res.avatarId,
           isTutorialComplete: res.isTutorialComplete,
+          codeTutorialNumber: res.codeTutorialLevel,
         });
       })
       .catch(error => {

diff --git a/src/store/User/UserSlice.ts b/src/store/User/UserSlice.ts
@@ -20,6 +20,7 @@ export interface User {
   college: string;
   avatarId: number;
   recaptchaCode: string;
+  codeTutorialNumber: number;
 }
 
 interface register {
@@ -48,6 +49,7 @@ const initialState: register = {
     college: '',
     avatarId: 0,
     recaptchaCode: '',
+    codeTutorialNumber: 1,
   },
   loading: false,
   isRegistered: false,