Quest backend integration (#72)

* feat: Quest Dropdown

* Add Pagination for notification messages

* Added StoryModeModal component and actions to open and close the modal.
Added isStoryModeModalOpen and storyModeModalLevel to global state

* fix snapshot error

* feat: rebase StoryModeModal and QuestDropDown

* Change in UI of quest dropdown

* Added startMatch onclick to StoryModeModal to run AI Matches

* Fixed Lint Errors

* Add Pagination for notification messages

* Added StoryModeModal component and actions to open and close the modal.
Added isStoryModeModalOpen and storyModeModalLevel to global state

* chore: integrate with backend user-quest status api

* Fix bug in quest dropdown menu

* Add file questLevels to store quest data

* Fix StoryModeModal to show description from questLevels.ts

Co-authored-by: Sriram <sriram01201@gmail.com>
Co-authored-by: Dipesh Kafle <dipesh.kaphle111@gmail.com>
Co-authored-by: Ram <ram2091999@users.noreply.github.com>

Author: 4 people

__tests__/app/components/EditPassword.test.tsx

@@ -21,6 +21,8 @@ describe('EditPassword Component', () => {
         avatar: '',
         college: '',
         country: 'IN',
+        current_level: 1,
+        current_stars: 1,
         email: '',
         errorMessage: '',
         fullName: '',
@@ -30,9 +32,12 @@ describe('EditPassword Component', () => {
         isLoginLoading: false,
         isNotificationPresent: false,
         isSocketPresent: false,
+        isStoryModeModalOpen: false,
         isUserProfileModalOpen: false,
         notification: '',
+        ratings: [],
         socketMessage: '',
+        storyModeModalLevel: 0,
         userId: 0,
         userType: UserType.STUDENT,
         username: '',

__tests__/app/components/__snapshots__/EditPassword.test.tsx.snap

@@ -140,6 +140,8 @@ exports[`EditPassword Component Should render 1`] = `
       "avatar": "",
       "college": "",
       "country": "IN",
+      "current_level": 1,
+      "current_stars": 1,
       "email": "",
       "errorMessage": "",
       "fullName": "",
@@ -149,9 +151,12 @@ exports[`EditPassword Component Should render 1`] = `
       "isLoginLoading": false,
       "isNotificationPresent": false,
       "isSocketPresent": false,
+      "isStoryModeModalOpen": false,
       "isUserProfileModalOpen": false,
       "notification": "",
+      "ratings": Array [],
       "socketMessage": "",
+      "storyModeModalLevel": 0,
       "userId": 0,
       "userType": "STUDENT",
       "username": "",

src/app/actions/User.ts

@@ -8,6 +8,9 @@ export namespace UserActions {
     LOGOUT = 'LOGOUT',
     REGISTER = 'REGISTER',
     GET_USER_DETAILS = 'GET_USER_DETAILS',
+    GET_USER_QUESTSTATUS = 'GET_USER_QUESTSTATUS',
+    UPDATE_USER_QUESTSTATUS = 'UPDATE_USER_QUESTSTATUS',
+    SET_CURRENT_LEVEL = 'SET_CURRENT_LEVEL',
     EDIT_USER_PROFILE = 'EDIT_USER_PROFILE',
     EDIT_USER_PASSWORD = 'EDIT_USER_PASSWORD',
     UPDATE_ERROR_MESSAGE = 'UPDATE_ERROR_MESSAGE',
@@ -23,6 +26,8 @@ export namespace UserActions {
     RESET_APP_STATE = 'RESET_APP_STATE',
     SET_IS_AUTHENTICATION_OPEN = 'SET_IS_AUTHENTICATION_OPEN',
     SET_IS_LOGIN_LOADING = 'SET_IS_LOGIN_LOADING',
+    OPEN_STORY_MODE_MODAL = 'OPEN_STORY_MODE_MODAL',
+    CLOSE_STORY_MODE_MODAL = 'CLOSE_STORY_MODE_MODAL',
   }
 
   export const activateUser = (authToken: string, userId: number) =>
@@ -65,6 +70,14 @@ export namespace UserActions {
 
   export const getUserDetails = () => action(Type.GET_USER_DETAILS);
 
+  export const getQuestStatus = () => action(Type.GET_USER_QUESTSTATUS);
+
+  export const updateQuestStatus = (ratings: object) =>
+    action(Type.UPDATE_USER_QUESTSTATUS, { ratings });
+
+  export const setCurrentLevel = (level: number, stars: number) =>
+    action(Type.SET_CURRENT_LEVEL, { level, stars });
+
   export const editUserProfile = (editUserDetails: UserInterfaces.EditUserDetails) =>
     action(Type.EDIT_USER_PROFILE, { editUserDetails });
 
@@ -98,4 +111,9 @@ export namespace UserActions {
 
   export const setIsLoginLoading = (isLoginLoading: boolean) =>
     action(Type.SET_IS_LOGIN_LOADING, { isLoginLoading });
+
+  export const openStoryModeModal = (level: number) =>
+    action(Type.OPEN_STORY_MODE_MODAL, { level });
+
+  export const closeStoryModeModal = () => action(Type.CLOSE_STORY_MODE_MODAL);
 }

src/app/apiFetch/User.ts

@@ -180,3 +180,20 @@ export const checkUsernameExists = (username: string) => {
       console.error(error);
     });
 };
+
+export const userGetQuestStatus = () => {
+  console.log('Inside apiFetch');
+  return fetch(`${API_BASE_URL}user/quest-status`, {
+    credentials: 'include',
+    method: 'GET',
+  })
+    .then((response) => {
+      return jsonResponseWrapper(response);
+    })
+    .then((data) => {
+      return data;
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+};

src/app/components/GameLog.tsx

@@ -40,6 +40,9 @@ export class GameLog extends React.Component<GameLogInterfaces.Props, {}> {
 
     return (
       <AceEditor
+        style={{
+          zIndex: 0,
+        }}
         ref={this.editorRef}
         cursorStart={20}
         mode="c_cpp"

src/app/components/Notification/index.tsx

@@ -6,11 +6,9 @@ import * as NotificationInterfaces from 'app/types/Notification';
 import classnames from 'classnames';
 import * as React from 'react';
 import { Col, Grid, Row } from 'react-bootstrap';
-// tslint:disable-next-line
-import ReactPaginate from 'react-paginate';
 
 // tslint:disable-next-line
-
+import ReactPaginate from 'react-paginate';
 export class Notification extends React.Component<
   NotificationInterfaces.Props,
   NotificationInterfaces.State

src/app/components/StoryModeModal.tsx

@@ -0,0 +1,46 @@
+import { faArrowRight, faStar, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as StoryModalPropType from 'app/types/StoryModeModal';
+import * as React from 'react';
+import { Button, Modal } from 'react-bootstrap';
+//
+
+export class StoryModeModal extends React.Component<StoryModalPropType.Props, {}> {
+  public render() {
+    return (
+      <Modal.Dialog
+        style={{
+          marginTop: '10%',
+          zIndex: 10,
+        }}
+      >
+        <Modal.Header>
+          <Modal.Title>
+            <div style={{ margin: 0 }}>
+              <b>Level {this.props.level} !! </b>
+              {[...Array(this.props.stars >= 0 ? this.props.stars : 0)].map(() => (
+                <FontAwesomeIcon icon={faStar} style={{ color: 'gold' }} />
+              ))}
+            </div>
+          </Modal.Title>
+          <button
+            style={{ border: 0, padding: 0, margin: 0, backgroundColor: 'white' }}
+            onClick={() => this.props.closeStoryModeModal()}
+          >
+            <FontAwesomeIcon icon={faTimes} style={{ float: 'right', cursor: 'pointer' }} />
+          </button>
+        </Modal.Header>
+        <Modal.Body>{this.props.description}</Modal.Body>
+        <Modal.Footer>
+          <Button
+            className={this.props.isCompleted ? 'btn-success' : 'btn-primary'}
+            onClick={() => this.props.startMatch(1, this.props.level)}
+          >
+            {this.props.isCompleted ? 'Retry' : 'Start'} &nbsp;
+            <FontAwesomeIcon icon={faArrowRight} />
+          </Button>
+        </Modal.Footer>
+      </Modal.Dialog>
+    );
+  }
+}

src/app/components/SubmitBar/DeltaStarCount.tsx

@@ -0,0 +1,46 @@
+import { faStar } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as styles from 'app/styles/DeltaStarCount.module.css';
+import * as DeltaStarCountInterfaces from 'app/types/DeltaStarCount';
+
+import classnames from 'classnames';
+import * as React from 'react';
+
+export class DeltaStarCount extends React.Component<DeltaStarCountInterfaces.Props, {}> {
+  constructor(props: DeltaStarCountInterfaces.Props) {
+    super(props);
+  }
+
+  public render() {
+    return <span className={classnames(styles.starSpan)}>{this.mapStars()}</span>;
+  }
+
+  private whiteStars() {
+    const { rating } = this.props;
+    const maxRating = 3;
+    return maxRating - rating;
+  }
+
+  private mapStars() {
+    const starsArray = [1, 1, 1];
+    for (let index = 1; index <= this.whiteStars(); index += 1) starsArray[index - 1] = 0;
+    const stars = starsArray.map((starValue) => this.starImage(starValue));
+    return stars;
+  }
+
+  private starImage(value: number) {
+    return value ? (
+      <FontAwesomeIcon
+        className={classnames(styles.star)}
+        icon={faStar}
+        style={{ color: 'gold' }}
+      />
+    ) : (
+      <FontAwesomeIcon
+        className={classnames(styles.star)}
+        icon={faStar}
+        style={{ color: 'gray' }}
+      />
+    );
+  }
+}

src/app/components/SubmitBar/DropDownItem.tsx

@@ -0,0 +1,38 @@
+import { DeltaStarCount } from 'app/components/SubmitBar/DeltaStarCount';
+import * as styles from 'app/styles/SubmitBar.module.css';
+import * as DropDownItemInterfaces from 'app/types/DropDownItem';
+import * as React from 'react';
+
+import { Tooltip } from '@material-ui/core';
+
+export class DropDownItem extends React.Component<DropDownItemInterfaces.Props, {}> {
+  constructor(props: DropDownItemInterfaces.Props) {
+    super(props);
+  }
+
+  public render() {
+    const { level, rating, openStoryModeModal, setCurrentLevel } = this.props;
+    return (
+      <span>
+        {rating !== -1 || Number(level) === 1 ? (
+          <div
+            onClick={(e) => {
+              setCurrentLevel(Number(level), rating);
+              openStoryModeModal(Number(level));
+            }}
+          >
+            <span>LVL {level}</span>
+            <DeltaStarCount rating={rating} />
+          </div>
+        ) : (
+          <Tooltip title={'Unlock the previous level'} placement={'right'}>
+            <div style={{ opacity: 0.2 }}>
+              <span className={styles['dropdown-content-LVL']}>LVL {level}</span>
+              <DeltaStarCount rating={0} />
+            </div>
+          </Tooltip>
+        )}
+      </span>
+    );
+  }
+}