feat(GoalListItem): show priority

taskany-inc · Jan 23, 2023 · f11a0f5 · f11a0f5
1 parent b8d159b
commit f11a0f5
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 3 deletions.
diff --git a/i18n/en.json b/i18n/en.json
@@ -237,7 +237,15 @@
             }
         },
         "item": {
-            "by": "by"
+            "by": "by",
+            "Priority": {
+                "Priority": "Priority",
+                "Highest": "Highest",
+                "High": "High",
+                "Medium": "Medium",
+                "Low": "Low",
+                "Lowest": "Lowest"
+            }
         }
     },
     "explore": {

diff --git a/i18n/ru.json b/i18n/ru.json
@@ -237,7 +237,15 @@
             }
         },
         "item": {
-            "by": ""
+            "by": "",
+            "Priority": {
+                "Priority": "Приоритет",
+                "Highest": "Самый высокий",
+                "High": "Высокий",
+                "Medium": "Средний",
+                "Low": "Низкий",
+                "Lowest": "Самый низкий"
+            }
         }
     },
     "explore": {

diff --git a/src/components/GoalListItem.tsx b/src/components/GoalListItem.tsx
@@ -3,11 +3,14 @@ import styled from 'styled-components';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import dynamic from 'next/dynamic';
+import useSWR from 'swr';
 
 import { routes } from '../hooks/router';
 import type { Scalars, State, Tag, Activity } from '../../graphql/@generated/genql';
 import { gray4, textColor, gray10, gapM, gapS } from '../design/@generated/themes';
 import { nullable } from '../utils/nullable';
+import { createFetcher } from '../utils/createFetcher';
+import { usePageContext } from '../hooks/usePageContext';
 
 import { Text } from './Text';
 import { Tag as TagItem } from './Tag';
@@ -29,13 +32,19 @@ interface GoalListItemProps {
     hasForks?: boolean;
     isNotViewed?: boolean;
     focused?: boolean;
+    priority?: string;
 
     onClick?: MouseEventHandler<HTMLAnchorElement>;
 }
 
+const fetcher = createFetcher(() => ({
+    goalPriorityKind: true,
+    goalPriorityColors: true,
+}));
+
 const StyledGoal = styled.a<{ focused?: boolean }>`
     display: grid;
-    grid-template-columns: 15px 30px 600px repeat(3, 40px);
+    grid-template-columns: 15px 30px 600px repeat(4, 40px);
     align-items: center;
 
     color: ${textColor};
@@ -135,9 +144,15 @@ export const GoalListItem: React.FC<GoalListItemProps> = ({
     isNotViewed,
     state,
     focused,
+    priority,
     onClick,
 }) => {
     const t = useTranslations('goals.item');
+    const { user } = usePageContext();
+
+    const { data } = useSWR('priority', () => fetcher(user));
+
+    const priorityColorIndex = data?.goalPriorityKind?.indexOf(priority || '') ?? -1;
 
     return (
         <Link href={routes.goal(id)} passHref>
@@ -167,6 +182,16 @@ export const GoalListItem: React.FC<GoalListItemProps> = ({
                     </StyledSubTitle>
                 </StyledName>
 
+                <StyledAddon>
+                    {nullable(priority, (p) => (
+                        <StateDot
+                            size="s"
+                            hue={data?.goalPriorityColors?.[priorityColorIndex]}
+                            title={t(`Priority.${p}`)}
+                        />
+                    ))}
+                </StyledAddon>
+
                 <StyledAddon>
                     <UserPic src={owner?.user?.image} email={owner?.user?.email || owner?.ghost?.email} size={24} />
                 </StyledAddon>

diff --git a/src/pages/goals/index.tsx b/src/pages/goals/index.tsx
@@ -25,6 +25,8 @@ const refreshInterval = 3000;
 const parseQueryParam = (param = '') => param.split(',').filter(Boolean);
 
 const fetcher = createFetcher((_, states = [], query = '', tags = [], owner = []) => ({
+    goalPriorityColors: true,
+    goalPriorityKind: true,
     userGoals: [
         {
             data: {
@@ -47,6 +49,12 @@ const fetcher = createFetcher((_, states = [], query = '', tags = [], owner = []
                     key: true,
                     title: true,
                 },
+                team: {
+                    id: true,
+                    key: true,
+                    title: true,
+                },
+                priority: true,
                 state: {
                     id: true,
                     title: true,
@@ -235,6 +243,7 @@ const GoalsPage = ({ user, ssrTime, locale, ssrData }: ExternalPageProps<{ userG
                                             issuer={g.activity}
                                             owner={g.owner}
                                             tags={g.tags}
+                                            priority={g.priority}
                                             comments={g.comments?.length}
                                             key={g.id}
                                             focused={g.id === preview?.id}