From 9f5056bbb4478c12278c0073a07bcdc4fa1176ed Mon Sep 17 00:00:00 2001
From: Roland Bernard <rolbernard@unibz.it>
Date: Mon, 31 May 2021 23:45:12 +0200
Subject: [PATCH] Added the same long text handeling to comments and projects
---
client/src/components/ui/Comment/index.tsx | 3 ++-
client/src/components/ui/LongText/index.tsx | 26 +++++++++++++++++++
client/src/index.scss | 1 +
.../pages/Projects/ProjectDetail/index.tsx | 5 ++--
client/src/pages/Tasks/TaskDetail/index.tsx | 19 +++-----------
5 files changed, 34 insertions(+), 20 deletions(-)
create mode 100644 client/src/components/ui/LongText/index.tsx
diff --git a/client/src/components/ui/Comment/index.tsx b/client/src/components/ui/Comment/index.tsx
index a95268e..372e7bf 100644
--- a/client/src/components/ui/Comment/index.tsx
+++ b/client/src/components/ui/Comment/index.tsx
@@ -6,6 +6,7 @@ import { getUser, User } from 'adapters/user';
import { Comment as IComment } from 'adapters/comment';
import Avatar from 'components/ui/Avatar';
+import LongText from 'components/ui/LongText';
import './comment.scss';
@@ -39,7 +40,7 @@ export default function Comment({ comment }: CommentProps) {
</div>
</div>
<div className="comment">
- {comment.text}
+ <LongText text={comment.text} />
</div>
</div>
)
diff --git a/client/src/components/ui/LongText/index.tsx b/client/src/components/ui/LongText/index.tsx
new file mode 100644
index 0000000..6c2892e
--- /dev/null
+++ b/client/src/components/ui/LongText/index.tsx
@@ -0,0 +1,26 @@
+
+import { useState } from 'react';
+
+interface Props {
+ text: string;
+}
+
+export default function LongText({ text }: Props) {
+ const [more, setMore] = useState(false);
+
+ return (
+ (text.length < 300)
+ ? <p>{text}</p>
+ : (more
+ ? <>
+ <p>{text}</p>
+ <button onClick={() => setMore(false)}>less</button>
+ </>
+ : <>
+ <p>{text.substr(0, 300) + '... '}</p>
+ <button onClick={() => setMore(true)}>more</button>
+ </>
+ )
+ );
+}
+
diff --git a/client/src/index.scss b/client/src/index.scss
index 1459a6f..a4d1020 100644
--- a/client/src/index.scss
+++ b/client/src/index.scss
@@ -33,6 +33,7 @@ button {
}
a, button {
+ font-size: 1em;
font-weight: s.$weight-semi-bold;
color: s.$primary;
text-decoration: none;
diff --git a/client/src/pages/Projects/ProjectDetail/index.tsx b/client/src/pages/Projects/ProjectDetail/index.tsx
index 64faeee..8b7fe79 100644
--- a/client/src/pages/Projects/ProjectDetail/index.tsx
+++ b/client/src/pages/Projects/ProjectDetail/index.tsx
@@ -6,6 +6,7 @@ import { StatusColors } from 'adapters/common';
import { getProject, Project } from 'adapters/project';
import Tag from 'components/ui/Tag';
+import LongText from 'components/ui/LongText';
import Tabs, { Tab } from 'components/navigation/Tabs';
import LoadingScreen from 'components/ui/LoadingScreen';
@@ -55,9 +56,7 @@ export default function ProjectDetail() {
<Tag label={project.status} color={StatusColors.get(project.status)} />
<h1>{project.name}</h1>
<div className="description-container">
- <p>
- {project.text}
- </p>
+ <LongText text={project.text} />
</div>
{
tabs
diff --git a/client/src/pages/Tasks/TaskDetail/index.tsx b/client/src/pages/Tasks/TaskDetail/index.tsx
index 3f157be..02989a0 100644
--- a/client/src/pages/Tasks/TaskDetail/index.tsx
+++ b/client/src/pages/Tasks/TaskDetail/index.tsx
@@ -9,6 +9,7 @@ import { getProject, Project } from 'adapters/project';
import { getTask, getTaskAssignees, Task, TaskAssignment } from 'adapters/task';
import Tag from 'components/ui/Tag';
+import LongText from 'components/ui/LongText';
import Tabs from 'components/navigation/Tabs';
import DetailGrid from 'components/layout/DetailGrid';
import LoadingScreen from 'components/ui/LoadingScreen';
@@ -25,7 +26,6 @@ export interface Params {
}
export default function TaskDetail() {
- const [more, setMore] = useState(false);
const [task, setTask] = useState<Task>();
const [project, setProject] = useState<Project>();
const [teamNames, setTeamNames] = useState<string[]>([]);
@@ -49,7 +49,7 @@ export default function TaskDetail() {
getTaskAssignees(taskId).then(setAssignees);
setAssignment(task.assigned.find(a => a.user === userId))
}).catch(() => history.goBack());
- }, [taskId, history]);
+ }, [taskId, userId, history]);
if (task) {
return (
@@ -61,20 +61,7 @@ export default function TaskDetail() {
<Tag label={task.status} color={StatusColors.get(task.status)} />
<h1>{task.name}</h1>
<div className="description-container">
- {
- (task.text.length < 300)
- ? <p>{task.text}</p>
- : (more
- ? <>
- <p>{task.text}</p>
- <a onClick={() => setMore(false)}>less</a>
- </>
- : <>
- <p>{task.text.substr(0, 300) + '... '}</p>
- <a onClick={() => setMore(true)}>more</a>
- </>
- )
- }
+ <LongText text={task.text} />
</div>
<h2>
Details
--
GitLab