feat(graphql): add tasks-list page with base fetching

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

Author: azinit

examples/graphql/src/models.d.ts

@@ -0,0 +1,6 @@
+declare type Task = {
+    userId: number,
+    id: number,
+    title: string,
+    completed: boolean;
+}

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

@@ -1,9 +1,26 @@
 import React from 'react'
+import { useFetch } from "shared/hooks";
 
 const TasksList = () => {
+    const { data, error, loading } = useFetch<Task[]>("");
+    if (error) alert(error);
+
     return (
-        <div>
-            page:TasksList
+        <div className="page page-tasks-list">
+            <div className="page-title">
+                Tasks List
+            </div>
+            <div className="page-content">
+                {loading && "Loading..."}
+                <ul>
+                    {data?.map(({ id, title }) => (
+                        <li>{id}: {title}</li>
+                    ))}
+                    {data?.length === 0 && (
+                        <li>There are not tasks found</li>
+                    )}
+                </ul>
+            </div>
         </div>
     )
 }

examples/graphql/src/react-app-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="react-scripts" />
+/// <reference types="./models" />

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

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

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

@@ -0,0 +1 @@
+export { default as useFetch } from "./use-fetch";

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

@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react";
+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);
+
+    useEffect(() => {
+        setLoading(true);
+        fetch(`${baseUrl}/${url}`)
+            .then((r) => r.json())
+            .then((r: T) => {
+                setData(r);
+                setLoading(false);
+                setError(null);
+            })
+            .catch((err) => {
+                setData(null);
+                setLoading(false);
+                setError(err);
+            })
+    }, [baseUrl, url]);
+
+    return { loading, data, error };
+}
+export default useFetch;