feat(graphql): add ant design

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

Author: azinit

examples/graphql/package.json

@@ -10,6 +10,8 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "antd": "^4.6.6",
+    "classnames": "^2.2.6",
     "node-sass": "^4.14.1",
     "normalize.css": "^8.0.1",
     "react": "^16.13.1",
@@ -41,6 +43,7 @@
     ]
   },
   "devDependencies": {
+    "@types/classnames": "^2.2.10",
     "@types/react-router": "^5.1.8",
     "@types/react-router-dom": "^5.1.5"
   }

examples/graphql/src/app/index.scss

@@ -1,10 +1,33 @@
+// vars
 .app {
-  &-header {
-    background-color: #282c34;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
+  --clr-foreground: #fff;
+  --clr-foreground--hover: #f6faff;
+  --clr-foreground--selected: #dfecff;
+}
+// normalize
+.app {
+  li {
+    list-style: none;
+  }
+}
+// app styles
+.app {
+  display: flex;
+  flex-direction: column;
+
+  .page {
+    margin: auto 10%;
+    &-title {
+      display: flex;
+      justify-content: center;
+      margin: 10px;
+    }
+  }
+}
+
+// common class-styles
+.app {
+  .text-white {
     color: white;
   }
 }

examples/graphql/src/app/index.tsx

@@ -1,14 +1,21 @@
 import React from 'react';
+import { Layout } from "antd";
 import Routing from "pages";
 import './index.scss';
 
 const App = () => {
   return (
     <div className="app">
-      <header className="app-header">
-        TODO App
-      </header>
-      <Routing />
+      <Layout>
+        <Layout.Header>
+          <span className="app-title text-white">
+            Todo App
+          </span>
+        </Layout.Header>
+        <Layout.Content>
+          <Routing />
+        </Layout.Content>
+      </Layout>
     </div>
   );
 }

examples/graphql/src/index.tsx

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import App from './app';
 import * as serviceWorker from './serviceWorker';
 import "normalize.css";
+import 'antd/dist/antd.css';
 
 ReactDOM.render(
   <React.StrictMode>

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

@@ -1,20 +1,35 @@
 import React from 'react'
+import { Breadcrumb, Spin, Alert } from "antd";
 import { useFetch } from "shared/hooks";
+import { TaskItem } from "shared/components";
+
+// TODO: autogenerate by location
+const TasksListTitle = () => (
+    <Breadcrumb className="page-title">
+        <Breadcrumb.Item href="/">
+            TasksList
+        </Breadcrumb.Item>
+    </Breadcrumb>
+);
 
 const TasksList = () => {
     const { data, error, loading } = useFetch<Task[]>("");
-    if (error) alert(error);
 
     return (
         <div className="page page-tasks-list">
-            <div className="page-title">
-                Tasks List
-            </div>
+            <TasksListTitle />
             <div className="page-content">
-                {loading && "Loading..."}
+                {error && (
+                    <Alert
+                        type="error"
+                        message={error}
+                        showIcon
+                    />
+                )}
+                {loading && <Spin />}
                 <ul>
-                    {data?.map(({ id, title }) => (
-                        <li>{id}: {title}</li>
+                    {data?.map((taskProps) => (
+                        <li><TaskItem {...taskProps} /></li>
                     ))}
                     {data?.length === 0 && (
                         <li>There are not tasks found</li>

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

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

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

@@ -0,0 +1,14 @@
+.task-item {
+    transition: 0.25s;
+
+    &.completed {
+        text-decoration: line-through;
+    }
+
+    &:hover {
+        background-color: var(--clr-foreground--hover);
+    }
+    &:active {
+        background-color: var(--clr-foreground--selected);
+    }
+}

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

@@ -0,0 +1,17 @@
+import React from 'react'
+import cn from "classnames";
+import { Card } from "antd";
+import "./index.scss";
+
+type Props = Task;
+
+const TaskItem = (props: Props) => {
+    const { completed, id, title, userId } = props;
+    return (
+        <Card className={cn("task-item", { completed })}>
+            [{id}] {title}
+        </Card>
+    )
+}
+
+export default TaskItem