feat(graphql): impl task-details page

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

Author: azinit

examples/graphql/src/app/index.scss

@@ -5,6 +5,14 @@
   --clr-foreground--selected: #dfecff;
 }
 // normalize
+html,
+body,
+#root,
+.app {
+  height: 100%;
+  position: relative;
+}
+
 .app {
   li {
     list-style: none;
@@ -14,14 +22,13 @@
 .app {
   display: flex;
   flex-direction: column;
-
-  .page {
+  &-content {
     margin: auto 10%;
-    &-title {
-      display: flex;
-      justify-content: center;
-      margin: 10px;
-    }
+    flex-grow: 1;
+  }
+
+  .ant-breadcrumb {
+    margin: 20px;
   }
 }
 
@@ -30,4 +37,7 @@
   .text-white {
     color: white;
   }
+  .text-muted {
+    color: gray;
+  }
 }

examples/graphql/src/app/index.tsx

@@ -12,7 +12,7 @@ const App = () => {
             Todo App
           </span>
         </Layout.Header>
-        <Layout.Content>
+        <Layout.Content className="app-content">
           <Routing />
         </Layout.Content>
       </Layout>

examples/graphql/src/pages/task-details/index.tsx

@@ -1,11 +1,21 @@
 import React from 'react'
+import { RouteComponentProps } from "react-router-dom";
+import {Alert, Spin  } from "antd";
+import { TaskCard } from "shared/components";
+import { useFetch } from "shared/hooks";
 
-const TaskDetails = () => {
-    return (
-        <div>
-            page:TaskDetails
-        </div>
-    )
+type Props = RouteComponentProps<{
+    id: string;
+}>;
+
+const TaskDetails = (props: Props) => {
+    const { id } = props.match.params;
+    const { data, loading, error } = useFetch<Task>(`todos/${id}`);
+    console.log({ error });
+    if (loading) return <Spin />;
+    if (error) return <Alert message={error.message || String(error)} type="error" showIcon />;
+    if (data === null) return <>Not Found</>;
+    return <TaskCard {...data} />;
 }
 
 export default TaskDetails

examples/graphql/src/shared/components/index.ts

@@ -1 +1,2 @@
 export { default as TaskItem } from "./task-item";
+export { default as TaskCard } from "./task-card";

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

@@ -0,0 +1,19 @@
+.task-card {
+    min-height: 80%;
+    height: inherit;
+
+    & > .ant-card-body {
+        display: flex;
+    }
+
+    &__details {
+        flex-grow: 1;
+        height: 100%;
+    }
+
+    &__sidebar {
+        border-left: 1px solid lightgray;
+        padding-left: 20px;
+        height: 100%;
+    }
+}

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import cn from "classnames";
+import { Card, Steps, Typography, Divider } from "antd";
+import { UserOutlined, HomeOutlined } from "@ant-design/icons";
+import { useFetch } from "shared/hooks";
+import "./index.scss";
+
+type Props = Task;
+
+const ICON_STYLE = { color: '#08c' };
+
+const getTaskStatus = (completed: boolean) => {
+    if (completed) return 1;
+    return 0;
+};
+
+// TODO: as feature
+const TaskCard = (props: Props) => {
+    const { completed, id, title, userId } = props;
+    const { data: author } = useFetch<User>(`users/${userId}`);
+
+    return (
+        <Card
+            className={cn("task-card", { completed })}
+            title={`Task - ${title}`}
+        >
+            <div className="task-card__details">
+                <i className="text-muted">Task description</i>
+            </div>
+            <div className="task-card__sidebar">
+                <div className="task-card__author">
+                    <Typography.Title level={5}>Author</Typography.Title>
+                    <span className="task-card__author" >
+                        <UserOutlined style={ICON_STYLE} /> {author?.username} {`<${author?.email}>`}
+                        <br />
+                        <HomeOutlined style={ICON_STYLE} /> {author?.company.name}
+                    </span>
+                </div>
+                <Divider />
+                <div className="task-card__status">
+                    <Typography.Title level={5}>Status</Typography.Title>
+                    <Steps direction="vertical" current={getTaskStatus(completed)}>
+                        <Steps.Step title="Created" description="Task was created and added in todo-list." />
+                        <Steps.Step title="Finished" description="Task was completed by author." />
+                    </Steps>
+                </div>
+            </div>
+        </Card>
+    )
+}
+
+export default TaskCard

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

@@ -7,6 +7,7 @@ import "./index.scss";
 
 type Props = Task;
 
+// TODO: as feature
 const TaskItem = (props: Props) => {
     const { completed, title, userId, id } = props;
     const { data: author } = useFetch<User>(`users/${userId}`);

examples/graphql/src/shared/hooks/use-fetch.ts

@@ -4,12 +4,16 @@ import { API_DOMAIN } from "shared/get-env";
 const useFetch = <T = any>(url: string, baseUrl = API_DOMAIN) => {
     const [loading, setLoading] = useState<boolean>(false);
     const [data, setData] = useState<T | null>(null);
-    const [error, setError] = useState(null);
+    const [error, setError] = useState<any>(null);
 
     useEffect(() => {
         setLoading(true);
         fetch(`${baseUrl}/${url}`)
-            .then((r) => r.json())
+            .then((r) => {
+                console.log(r.status);
+                if (r.status >= 200 && r.status < 300) return r.json();
+                throw new Error("Not Found");
+            })
             .then((r: T) => {
                 setData(r);
                 setLoading(false);