feat(graphql): modity task-item component

https://github.com/martis-git/learn-frontend/issues/279

Author: azinit

examples/graphql/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^4.2.2",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

examples/graphql/src/models.d.ts

@@ -4,3 +4,27 @@ declare type Task = {
     title: string,
     completed: boolean;
 }
+
+declare type User = {
+    id: number,
+    name: string,
+    username: string,
+    email: string,
+    address: {
+        street: string,
+        suite: string,
+        city: string,
+        zipcode: string,
+        geo: {
+            lat: string,
+            lng: string,
+        },
+    },
+    phone: string,
+    website: string,
+    company: {
+        name: string,
+        catchPhrase: string,
+        bs: string,
+    },
+}

examples/graphql/src/pages/tasks-list/index.tsx

@@ -13,7 +13,7 @@ const TasksListTitle = () => (
 );
 
 const TasksList = () => {
-    const { data, error, loading } = useFetch<Task[]>("");
+    const { data, error, loading } = useFetch<Task[]>("todos");
 
     return (
         <div className="page page-tasks-list">

examples/graphql/src/shared/components/task-item/index.scss

@@ -1,14 +1,23 @@
 .task-item {
-    transition: 0.25s;
+    & > div {
+        display: flex;
+    }
 
     &.completed {
-        text-decoration: line-through;
+        color: lightgrey;
     }
 
-    &:hover {
-        background-color: var(--clr-foreground--hover);
-    }
-    &:active {
-        background-color: var(--clr-foreground--selected);
+    &__title {
+        flex-grow: 1;
+        transition: 0.25s;
+        color: unset;
+
+        &:hover {
+            text-decoration: underline;
+            color: unset;
+        }
+        &:active {
+            color: rgba(cornflowerblue, 0.8);
+        }
     }
 }

examples/graphql/src/shared/components/task-item/index.tsx

@@ -1,15 +1,23 @@
 import React from 'react'
 import cn from "classnames";
 import { Card } from "antd";
+import { UserOutlined } from "@ant-design/icons";
+import { useFetch } from "shared/hooks";
 import "./index.scss";
 
 type Props = Task;
 
 const TaskItem = (props: Props) => {
-    const { completed, id, title, userId } = props;
+    const { completed, title, userId, id } = props;
+    const { data: author } = useFetch<User>(`users/${userId}`);
+
     return (
         <Card className={cn("task-item", { completed })}>
-            [{id}] {title}
+            <a className="task-item__title" href={`/${id}`}>{title}</a>
+            <span className="task-item__author" >
+                <UserOutlined />
+                {author?.username}
+            </span>
         </Card>
     )
 }

examples/graphql/src/shared/get-env/index.ts

@@ -1,2 +1,2 @@
 // FIXME: move to env
-export const API_DOMAIN = "https://jsonplaceholder.typicode.com/todos";
+export const API_DOMAIN = "https://jsonplaceholder.typicode.com";