Update Notification UI/UX

- Update RunOptions to Play AI and SELF matches
- Integrate Lock Code

Author: kumaran-14

src/app/apiFetch/Submission.ts

@@ -1,4 +1,5 @@
 /* tslint:disable:no-console*/
+import { jsonResponseWrapper, setRequestHeaders } from 'app/apiFetch/utils';
 import { API_BASE_URL } from '../../config/config';
 
 export const codeCompile = (commitHash = 'latest') => {
@@ -101,15 +102,12 @@ export const executeDebugRun = (code: string, mapId: number, type: string, commi
 };
 
 export const lockCode = () => {
-  return fetch(`${API_BASE_URL}code/lock`, {
+  return fetch(`${API_BASE_URL}code/submit`, {
     credentials: 'include',
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-    },
-    method: 'POST',
+    headers: setRequestHeaders(),
+    method: 'PUT',
   })
-    .then((response) => response.json())
+    .then((response) => jsonResponseWrapper(response))
     .then((data) => data)
     .catch((error) => {
       console.error(error);

src/app/components/SocketHandler.tsx

@@ -51,12 +51,20 @@ export class SocketHandler extends React.Component<SocketHandlerInterfaces.Props
               }
             });
 
-            // tslint:disable-next-line: no-shadowed-variable
-            const { updateGameLog, updateMatchPlayerId, userId } = this.props;
+            const {
+              updateGameLog,
+              updateMatchPlayerId,
+              // tslint:disable-next-line: no-shadowed-variable
+              userId,
+              clearDisplayDebugLog,
+              clearAllLogs,
+            } = this.props;
             const matchPlayerId = parseInt(matchDetails.matchPlayerId, 10);
             // tslint:disable-next-line: no-console
             console.log(matchDetails, matchPlayerId, userId);
 
+            clearDisplayDebugLog();
+            clearAllLogs();
             updateGameLog('', '', '');
             updateGameLog(matchDetails.debugLog1, matchDetails.debugLog2, matchDetails.gameLog);
             updateMatchPlayerId(matchPlayerId === userId ? 1 : 2);

src/app/components/SubmitBar/index.tsx

@@ -172,7 +172,10 @@ export class SubmitBar extends React.Component<
           className={classnames(styles.customBtn)}
           title="Submit Code"
           id="submit_button"
-          onClick={this.props.lockCode}
+          onClick={(e) => {
+            this.props.saveCode();
+            this.props.lockCode();
+          }}
         >
           <span className={classnames(styles.icon)}>
             <FontAwesomeIcon icon={faLock} />

src/app/containers/SocketHandler.ts

@@ -11,6 +11,8 @@ const mapStateToProps = (rootState: RootState) => {
 
 const mapDispatchToProps = (dispatch: Dispatch) => {
   return {
+    clearAllLogs: () => GameLogActions.clearAllLogs(),
+    clearDisplayDebugLog: () => GameLogActions.clearDisplayDebugLog(),
     sendCompileError: (error: string) => dispatch(SubmissionActions.handleCompileError(error)),
     sendCompileSuccess: () => dispatch(SubmissionActions.handleCompileSuccess()),
     sendDebugRunError: () => dispatch(SubmissionActions.handleDebugRunError()),

src/app/sagas/Submission.ts

@@ -1,5 +1,5 @@
 /* tslint:disable:no-console*/
-import { CodeActions, GameLogActions, SubmissionActions } from 'app/actions';
+import { CodeActions, GameLogActions, NotificationActions, SubmissionActions } from 'app/actions';
 import * as SubmissionFetch from 'app/apiFetch/Submission';
 import { RootState } from 'app/reducers';
 import { checkAccountActivated, checkAuthentication } from 'app/sagas/utils';
@@ -11,25 +11,15 @@ export const getSubmissionState = (state: RootState) => state.submission;
 export const getUserLatestCode = (state: RootState) => state.code.code;
 
 export function* lockCode(action: ActionType<typeof SubmissionActions.lockCode>) {
-  // try {
-  //   const submissionState = yield select(getSubmissionState);
-  //   if (submissionState.request !== Request.NONE) return;
-  //   yield put(SubmissionActions.updateDebugRunRequest(Request.NONE));
-  //   yield put(CodeActions.save());
-  //   yield put(NotificationActions.info('Code is being locked...'));
-  //   yield put(GameLogActions.clearAllLogs());
-  //   yield put(GameLogActions.setHideDebugLog(false));
-  //   yield put(
-  //     SubmissionActions.changeStateCurrentRequest(
-  //       RequestState.COMPILE_CURRENT_CODE,
-  //       Request.LOCK_CODE,
-  //       '',
-  //       0,
-  //     ),
-  //   );
-  // } catch (err) {
-  //   console.error(err);
-  // }
+  try {
+    yield put(CodeActions.save());
+    // @ts-ignore
+    const res = yield call(SubmissionFetch.lockCode);
+    yield put(NotificationActions.success('Code Locked'));
+    yield put(GameLogActions.clearAllLogs());
+  } catch (err) {
+    console.error(err);
+  }
 }
 
 export function* previousCommitMatch(

src/app/types/SocketHandler.ts

@@ -8,6 +8,36 @@ export interface DispatchProps {
   sendError: (message: string) => void;
   sendInfo: (message: string) => void;
   sendSuccess: (message: string) => void;
+  updateRequest: (request: SubmissionInterfaces.Request) => void;
+  updateGameLog: (player1DebugLog: string, player2DebugLog: string, gameLog: string) => void;
+  updateMatchPlayerId: (matchPlayerId: number) => void;
+  clearDisplayDebugLog: () => void;
+  clearAllLogs: () => void;
+}
+
+export enum MatchMode {
+  AUTO = 'AUTO',
+  SELF = 'SELF',
+  AI = 'AI',
+  PREV_COMMIT = 'PREV_COMMIT',
+  MANUAL = 'MANUAL',
+}
+
+export interface MatchDetails {
+  mapId: number;
+  matchMode: MatchMode;
+  playerId1: number;
+  playerId2: number;
+}
+
+export interface StateProps {
+  commitHash: string;
+  currentAiId: number;
+  mapId: number;
+  playerId1: number;
+  playerId2: number;
+  request: SubmissionInterfaces.Request;
+  userId: number;
 }
 
 export type Props = DispatchProps;