Generate game report after the game ends.

frontend/src/api/Room.ts

@@ -3,6 +3,7 @@ import { axiosErrorHandler } from './Error';
 import { User } from './User';
 import { Difficulty } from './Difficulty';
 import { ProblemIdParam, SelectableProblem } from './Problem';
+import { getAuthHttpHeader } from '../util/Utility';
 
 export type Room = {
   roomId: string,
@@ -63,15 +64,15 @@ const routes = {
   setSpectator: (roomId: string) => `${basePath}/${roomId}/spectator`,
 };
 
-export const createRoom = (roomParams: CreateRoomParams):
-  Promise<Room> => axios.post<Room>(routes.createRoom, roomParams)
+export const createRoom = (roomParams: CreateRoomParams, token: string | null):
+  Promise<Room> => axios.post<Room>(routes.createRoom, roomParams, getAuthHttpHeader(token))
   .then((res) => res.data)
   .catch((err) => {
     throw axiosErrorHandler(err);
   });
 
-export const joinRoom = (roomId: string, roomParams: JoinRoomParams):
-  Promise<Room> => axios.put<Room>(routes.joinRoom(roomId), roomParams)
+export const joinRoom = (roomId: string, roomParams: JoinRoomParams, token: string | null):
+  Promise<Room> => axios.put<Room>(routes.joinRoom(roomId), roomParams, getAuthHttpHeader(token))
   .then((res) => res.data)
   .catch((err) => {
     throw axiosErrorHandler(err);

frontend/src/api/User.ts

@@ -1,6 +1,24 @@
+import axios from 'axios';
+import { getAuthHttpHeader } from '../util/Utility';
+import { AccountUid } from './Account';
+import { axiosErrorHandler } from './Error';
+
 export type User = {
   nickname: string,
   userId?: string,
   spectator?: boolean,
   sessionId?: string,
+  account?: AccountUid,
 };
+
+const basePath = '/api/v1/user';
+const routes = {
+  updateUserAccount: (userId: string) => `${basePath}/${userId}/account`,
+};
+
+export const updateUserAccount = (userId: string, token: string | null):
+  Promise<User> => axios.put<User>(routes.updateUserAccount(userId), {}, getAuthHttpHeader(token))
+  .then((res) => res.data)
+  .catch((err) => {
+    throw axiosErrorHandler(err);
+  });

frontend/src/components/card/ProblemCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Problem } from '../../api/Problem';
-import { LargeText, SelectedItemText, Text } from '../core/Text';
+import { LargeText, SelectedItemText, SingleLineText } from '../core/Text';
 import { getDifficultyDisplayButton } from '../core/Button';
 import { SelectedItemContainer } from '../core/Container';
 import { DivLink } from '../core/Link';
@@ -52,7 +52,7 @@ function ProblemCard(props: ProblemCardProps) {
         <InnerContent>
           <TitleText>{problem.name}</TitleText>
           {getDifficultyDisplayButton(problem.difficulty, true)}
-          <Text>{`${problem.description.substring(0, 80)}...`}</Text>
+          <SingleLineText>{problem.description}</SingleLineText>
 
           {problem.problemTags.map((tag) => (
             <ProblemTagContainer key={tag.name}>

frontend/src/components/core/Text.tsx

@@ -153,3 +153,11 @@ export const SelectedItemText = styled.p`
   display: inline;
   margin: 0 10px;
 `;
+
+export const SingleLineText = styled(Text)`
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+`;

frontend/src/components/game/Console.tsx

@@ -101,6 +101,7 @@ function Console(props: ConsoleProps) {
           if (!firstFailure && !result.correct) {
             firstFailure = result;
           }
+
           if (!firstNonHiddenFailure && !result.correct && !result.hidden) {
             firstNonHiddenFailure = result;
           }

frontend/src/components/navigation/Header.tsx

@@ -13,13 +13,14 @@ const Content = styled.div`
   height: 50px;
   padding: 20px;
   text-align: center;
-  z-index: 1;
+  z-index: 2;
 `;
 
 const MinimalContent = styled.div`
   height: 20px;
   padding: 20px 20px 0 20px;
   text-align: center;
+  z-index: 2;
 `;
 
 const LeftHeader = styled(NavbarLink)`
@@ -51,6 +52,7 @@ const NavButton = styled(TextButton)`
 const RightContainer = styled.div`
   float: right;
   margin-right: 50px;
+  z-index: 1;
 
   @media(max-width: 600px) {
     margin-right: 0;

frontend/src/components/problem/Selector.tsx

@@ -8,7 +8,7 @@ import { TextInput } from '../core/Input';
 import { useAppDispatch, useAppSelector, useClickOutside } from '../../util/Hook';
 import { User } from '../../api/User';
 import { fetchAccount } from '../../redux/Account';
-import { problemMatchesFilterText } from '../../util/Utility';
+import { dedupProblems, problemMatchesFilterText } from '../../util/Utility';
 
 type ProblemSelectorProps = {
   selectedProblems: SelectableProblem[],
@@ -123,7 +123,9 @@ export function ProblemSelector(props: ProblemSelectorProps) {
     let accountProblems = account?.problems || [];
     accountProblems = accountProblems.filter((problem) => problem.testCases.length > 0);
 
-    setAllProblems((accountProblems as SelectableProblem[]).concat(verifiedProblems));
+    // Merge list with verified problems and de-duplicate the result.
+    const problemsWithDupes = (accountProblems as SelectableProblem[]).concat(verifiedProblems);
+    setAllProblems(dedupProblems(problemsWithDupes));
   }, [account, verifiedProblems]);
 
   // Close list of problems if clicked outside of div

frontend/src/components/problem/editor/ProblemDisplay.tsx

@@ -130,10 +130,15 @@ function ProblemDisplay(props: ProblemDisplayParams) {
           <TopButtonsContainer>
             <InvertedSmallButton
               onClick={() => {
-                // eslint-disable-next-line no-alert
                 if (JSON.stringify(problem) === JSON.stringify(newProblem)
+                  // eslint-disable-next-line no-alert
                   || window.confirm('Go back? Your unsaved changes will be lost.')) {
-                  history.goBack();
+                  // Use the return link if available; otherwise, use dashboard.
+                  if (history.action !== 'POP') {
+                    history.goBack();
+                  } else {
+                    history.push('/');
+                  }
                 }
               }}
             >

frontend/src/util/Utility.ts

@@ -87,11 +87,19 @@ export const onEnterAction = (action: () => void, event: React.KeyboardEvent<HTM
   }
 };
 
-export const getAuthHttpHeader = (token: string) => ({
-  headers: {
-    Authorization: token,
-  },
-});
+export const getAuthHttpHeader = (token: string | null) => {
+  // If token is provided, return headers with authorization token.
+  if (token) {
+    return {
+      headers: {
+        Authorization: token,
+      },
+    };
+  }
+
+  // If no token is provided, return undefined.
+  return undefined;
+};
 
 export const problemMatchesFilterText = (problem: Problem | SelectableProblem,
   filterText: string): boolean => {
@@ -134,3 +142,20 @@ export const getSubmissionTime = (bestSubmission: Submission | null,
 };
 
 export const getSubmissionCount = (player: Player | null) => player?.submissions.length || '0';
+
+/**
+ * De-duplicate a list of SelectableProblems.
+ * Solution at: https://stackoverflow.com/a/1584377/7517518.
+ */
+export const dedupProblems = (array: SelectableProblem[]) => {
+  for (let i = 0; i < array.length; i += 1) {
+    for (let j = i + 1; j < array.length; j += 1) {
+      if (array[i].problemId === array[j].problemId) {
+        array.splice(j, 1);
+        j -= 1;
+      }
+    }
+  }
+
+  return array;
+};

frontend/src/views/Create.tsx

@@ -3,7 +3,7 @@ import { useHistory } from 'react-router-dom';
 import EnterNicknamePage from '../components/core/EnterNickname';
 import { createRoom, Room, CreateRoomParams } from '../api/Room';
 import { User } from '../api/User';
-import { useAppDispatch } from '../util/Hook';
+import { useAppDispatch, useAppSelector } from '../util/Hook';
 import { setRoom } from '../redux/Room';
 import { setCurrentUser } from '../redux/User';
 
@@ -12,6 +12,8 @@ function CreateGamePage() {
   const history = useHistory();
   const dispatch = useAppDispatch();
 
+  const { token } = useAppSelector((state) => state.account);
+
   // Creates a room with the user as the host, and joins that same lobby.
   const createJoinLobby = (nickname: string) => new Promise<void>((resolve, reject) => {
     const redirectToLobby = (room: Room, user: User) => {
@@ -24,7 +26,7 @@ function CreateGamePage() {
         spectator: true,
       },
     };
-    createRoom(roomHost)
+    createRoom(roomHost, token)
       .then((res) => {
         dispatch(setRoom(res));
         dispatch(setCurrentUser(res.host));

frontend/src/views/Join.tsx

@@ -11,7 +11,7 @@ import ErrorMessage from '../components/core/Error';
 import { ErrorResponse } from '../api/Error';
 import { checkLocationState, isValidRoomId } from '../util/Utility';
 import { TextLink } from '../components/core/Link';
-import { useAppDispatch } from '../util/Hook';
+import { useAppDispatch, useAppSelector } from '../util/Hook';
 import { setRoom } from '../redux/Room';
 import { setCurrentUser } from '../redux/User';
 
@@ -29,6 +29,8 @@ function JoinGamePage() {
   const location = useLocation<JoinPageLocation>();
   const dispatch = useAppDispatch();
 
+  const { token } = useAppSelector((state) => state.account);
+
   /**
    * Page state variable that defines whether the user is
    * entering a room ID or a nickname.
@@ -94,7 +96,7 @@ function JoinGamePage() {
     let currentUser: User = { nickname };
     const roomParams = { user: currentUser };
 
-    joinRoom(roomId, roomParams)
+    joinRoom(roomId, roomParams, token)
       .then((res) => {
         dispatch(setRoom(res));
 

frontend/src/views/Lobby.tsx

@@ -17,7 +17,7 @@ import {
 import {
   connect, routes, subscribe, disconnect,
 } from '../api/Socket';
-import { User } from '../api/User';
+import { User, updateUserAccount } from '../api/User';
 import { isValidRoomId, leaveRoom, checkLocationState } from '../util/Utility';
 import { Difficulty } from '../api/Difficulty';
 import {
@@ -181,6 +181,7 @@ function LobbyPage() {
   const dispatch = useAppDispatch();
   const { room } = useAppSelector((state) => state);
   const { currentUser } = useAppSelector((state) => state);
+  const { token } = useAppSelector((state) => state.account);
 
   const mousePosition = useMousePosition(true);
 
@@ -240,6 +241,17 @@ function LobbyPage() {
     }
   }, [room, setStateFromRoom]);
 
+  // If the user token changes due to login state, update user account.
+  useEffect(() => {
+    if (currentUser?.userId && Boolean(currentUser?.account) !== Boolean(token)) {
+      updateUserAccount(currentUser?.userId, token).then((user: User) => {
+        dispatch(setCurrentUser(user));
+      }).catch((err) => {
+        setError(err.message);
+      });
+    }
+  }, [currentUser, token, dispatch]);
+
   const kickUser = (user: User) => {
     setLoading(true);
     setError('');

frontend/src/views/ProblemPage.tsx

@@ -37,18 +37,21 @@ function ProblemPage() {
       return;
     }
 
-    setLoading(true);
-    getSingleProblem(params.id, token!)
-      .then((res) => {
-        res.testCases.forEach((testCase) => {
-          // eslint-disable-next-line no-param-reassign
-          testCase.id = generateRandomId();
-        });
-        setProblem(res);
-      })
-      .catch((err) => setError(err.message))
-      .finally(() => setLoading(false));
-  }, [params, token]);
+    // Checks added to ensure problem fetched only once.
+    if (!problem && !loading) {
+      setLoading(true);
+      getSingleProblem(params.id, token!)
+        .then((res) => {
+          res.testCases.forEach((testCase) => {
+            // eslint-disable-next-line no-param-reassign
+            testCase.id = generateRandomId();
+          });
+          setProblem(res);
+        })
+        .catch((err) => setError(err.message))
+        .finally(() => setLoading(false));
+    }
+  }, [params, token, problem, loading]);
 
   if (!problem) {
     if (error && !loading) {

frontend/src/views/VerifiedProblemsPage.tsx

@@ -37,7 +37,7 @@ function VerifiedProblemsPage() {
   return (
     <Content>
       <LargeText>Verified Problems</LargeText>
-      <TextLink to="/game/create">Create new problem &#8594;</TextLink>
+      <TextLink to="/problem/create">Create new problem &#8594;</TextLink>
 
       <FilteredProblemList problems={verifiedProblems} />
 

src/main/java/com/codejoust/main/controller/v1/ProblemController.java

@@ -13,20 +13,16 @@
 import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.RestController;
 
-import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
 
 import com.codejoust.main.dto.problem.CreateProblemRequest;
 import com.codejoust.main.dto.problem.CreateProblemTagRequest;
 import com.codejoust.main.dto.problem.CreateTestCaseRequest;
 import com.codejoust.main.dto.problem.ProblemDto;
-import com.codejoust.main.dto.problem.ProblemMapper;
-import com.codejoust.main.dto.problem.ProblemSettingsDto;
 import com.codejoust.main.dto.problem.ProblemTagDto;
 import com.codejoust.main.dto.problem.ProblemTestCaseDto;
-import com.codejoust.main.game_object.CodeLanguage;
-import com.codejoust.main.model.problem.Problem;
+import com.codejoust.main.model.report.CodeLanguage;
 import com.codejoust.main.service.ProblemService;
 
 @RestController

src/main/java/com/codejoust/main/controller/v1/RoomController.java

@@ -19,6 +19,7 @@
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.PutMapping;
 import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestHeader;
 import org.springframework.web.bind.annotation.RestController;
 
 @RestController
@@ -37,13 +38,13 @@ public ResponseEntity<RoomDto> getRoom(@PathVariable String roomId) {
     }
 
     @PutMapping("/rooms/{roomId}/users")
-    public ResponseEntity<RoomDto> joinRoom(@PathVariable String roomId,@RequestBody JoinRoomRequest request) {
-        return new ResponseEntity<>(service.joinRoom(roomId, request), HttpStatus.OK);
+    public ResponseEntity<RoomDto> joinRoom(@PathVariable String roomId,@RequestBody JoinRoomRequest request, @RequestHeader(name="Authorization", required = false) String token) {
+        return new ResponseEntity<>(service.joinRoom(roomId, request, token), HttpStatus.OK);
     }
 
     @PostMapping("/rooms")
-    public ResponseEntity<RoomDto> createRoom(@RequestBody CreateRoomRequest request) {
-        return new ResponseEntity<>(service.createRoom(request), HttpStatus.CREATED);
+    public ResponseEntity<RoomDto> createRoom(@RequestBody CreateRoomRequest request, @RequestHeader(name="Authorization", required = false) String token) {
+        return new ResponseEntity<>(service.createRoom(request, token), HttpStatus.CREATED);
     }
 
     @DeleteMapping("/rooms/{roomId}")