Merge pull request #175 from CodeJoustHQ/LinkBugFixes

Fix link bugs and add style improvements.

Author: zpChris

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/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/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} />