diff --git a/frontend/src/components/card/ProblemCard.tsx b/frontend/src/components/card/ProblemCard.tsx index c2720f0e..49c10ee9 100644 --- a/frontend/src/components/card/ProblemCard.tsx +++ b/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) { {problem.name} {getDifficultyDisplayButton(problem.difficulty, true)} - {`${problem.description.substring(0, 80)}...`} + {problem.description} {problem.problemTags.map((tag) => ( diff --git a/frontend/src/components/core/Text.tsx b/frontend/src/components/core/Text.tsx index 79555de2..90d15950 100644 --- a/frontend/src/components/core/Text.tsx +++ b/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; +`; diff --git a/frontend/src/components/problem/editor/ProblemDisplay.tsx b/frontend/src/components/problem/editor/ProblemDisplay.tsx index 103c961a..910f063b 100644 --- a/frontend/src/components/problem/editor/ProblemDisplay.tsx +++ b/frontend/src/components/problem/editor/ProblemDisplay.tsx @@ -130,10 +130,15 @@ function ProblemDisplay(props: ProblemDisplayParams) { { - // 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('/'); + } } }} > diff --git a/frontend/src/views/ProblemPage.tsx b/frontend/src/views/ProblemPage.tsx index baa8c247..337fbabe 100644 --- a/frontend/src/views/ProblemPage.tsx +++ b/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) { diff --git a/frontend/src/views/VerifiedProblemsPage.tsx b/frontend/src/views/VerifiedProblemsPage.tsx index 4561d4ff..55f3dbaf 100644 --- a/frontend/src/views/VerifiedProblemsPage.tsx +++ b/frontend/src/views/VerifiedProblemsPage.tsx @@ -37,7 +37,7 @@ function VerifiedProblemsPage() { return ( Verified Problems - Create new problem → + Create new problem →