Merge pull request #9 from ichiro-ss/feature-loading

Feature loading
ichiro-ss · Feb 23, 2024 · 0a09685 · 0a09685
2 parents e682fac + 07b51f2
commit 0a09685
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 64 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.22.0",
     "react-scripts": "^5.0.1",
+    "react-spinners": "^0.13.8",
     "sass": "^1.70.0",
     "web-vitals": "^2.1.4"
   },

diff --git a/src/pages/Detail.jsx b/src/pages/Detail.jsx
@@ -2,6 +2,7 @@ import axios from 'axios';
 import { useCookies } from 'react-cookie';
 import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
+import ClipLoader from 'react-spinners/ClipLoader';
 import { url } from '../const';
 import { Header } from '../components/Header';
 import ReactMarkdown from 'react-markdown';
@@ -11,8 +12,10 @@ export const Detail = () => {
   const params = useParams();
   const [summary, setSummary] = useState([]);
   const [errorMessage, setErrorMessage] = useState([]);
+  const [pageLoading, setPageLoading] = useState(false);
 
   useEffect(() => {
+    setPageLoading(true);
     axios
       .get(`${url}/summaries`, {
         headers: {
@@ -27,6 +30,9 @@ export const Detail = () => {
       })
       .catch((err) => {
         setErrorMessage(`failed to get data. ${err}`);
+      })
+      .finally(() => {
+        setPageLoading(false);
       });
   }, []);
 
@@ -35,10 +41,16 @@ export const Detail = () => {
       <main className="detail">
         <Header />
         <p className="error-msg">{errorMessage}</p>
-        <div className="summary-detail">
-          <div className="summary-detail__title">{summary.title}</div>
-          <ReactMarkdown>{summary.markdown}</ReactMarkdown>
-        </div>
+        {pageLoading ? (
+          <div className="loading custom-loader">
+            <ClipLoader color="blue" size={50} aria-label="Loading Spinner" data-testid="loader" />
+          </div>
+        ) : (
+          <div className="summary-detail">
+            <div className="summary-detail__title">{summary.title}</div>
+            <ReactMarkdown>{summary.markdown}</ReactMarkdown>
+          </div>
+        )}
       </main>
     </div>
   );

diff --git a/src/pages/Edit.jsx b/src/pages/Edit.jsx
@@ -2,6 +2,7 @@ import axios from 'axios';
 import { useEffect, useState } from 'react';
 import { useCookies } from 'react-cookie';
 import { useParams, useNavigate } from 'react-router-dom';
+import ClipLoader from 'react-spinners/ClipLoader';
 import { useForm } from 'react-hook-form';
 import { Header } from '../components/Header';
 import { url } from '../const';
@@ -12,13 +13,16 @@ export const Edit = () => {
   const [cookies, setCookie, removeCookie] = useCookies();
   const [errorMessage, setErrorMessage] = useState();
   const [summary, setSummary] = useState([]);
+  const [pageLoading, setPageLoading] = useState(false);
+
   const {
     register,
     handleSubmit,
     formState: { errors },
   } = useForm({ mode: 'onBlur' });
 
   useEffect(() => {
+    setPageLoading(true);
     axios
       .get(`${url}/summaries`, {
         headers: {
@@ -39,6 +43,9 @@ export const Edit = () => {
       })
       .catch((err) => {
         setErrorMessage(`failed to get data. ${err}`);
+      })
+      .finally(() => {
+        setPageLoading(false);
       });
   }, []);
 
@@ -91,47 +98,57 @@ export const Edit = () => {
         <Header />
         <p className="error-msg">{errorMessage}</p>
         <h1>Edit</h1>
-        <div>
-          <form className="newummary-form" onSubmit={handleSubmit(onEdit)}>
-            {/* eslint-disable */}
-            <label htmlFor="title">
-              title
-              <input
-                {...register('title', {
-                  required: 'please input title',
-                  maxLength: {
-                    value: 30,
-                    message: 'maxLength: 30',
-                  },
-                })}
-                value={summary.title}
-                type="text"
-                onChange={(e) => setSummary({ ...summary, title: e.target.value })}
-                id="title"
-              />
-            </label>
-            <label htmlFor="markdown">
-              markdown
-              <input
-                {...register('markdown', {
-                  required: 'please input markdown',
-                })}
-                value={summary.markdown}
-                type="text"
-                onChange={(e) => setSummary({ ...summary, markdown: e.target.value })}
-                id="markdown"
-              />
-            </label>
-            {errors.name && <div>{errors.name.message}</div>}
-            <button type="submit" className="newsummary-button">
-              POST
-            </button>
-            {/* eslint-enable */}
-            <button type="button" onClick={onDelete}>
-              DELETE
-            </button>
-          </form>
-        </div>
+        {pageLoading ? (
+          <div className="loading custom-loader">
+            <ClipLoader color="blue" size={50} aria-label="Loading Spinner" data-testid="loader" />
+          </div>
+        ) : (
+          <>
+            {summary && (
+              <div>
+                <form className="newummary-form" onSubmit={handleSubmit(onEdit)}>
+                  {/* eslint-disable */}
+                  <label htmlFor="title">
+                    title
+                    <input
+                      {...register('title', {
+                        required: 'please input title',
+                        maxLength: {
+                          value: 30,
+                          message: 'maxLength: 30',
+                        },
+                      })}
+                      value={summary.title}
+                      type="text"
+                      onChange={(e) => setSummary({ ...summary, title: e.target.value })}
+                      id="title"
+                    />
+                  </label>
+                  <label htmlFor="markdown">
+                    markdown
+                    <input
+                      {...register('markdown', {
+                        required: 'please input markdown',
+                      })}
+                      value={summary.markdown}
+                      type="text"
+                      onChange={(e) => setSummary({ ...summary, markdown: e.target.value })}
+                      id="markdown"
+                    />
+                  </label>
+                  {errors.name && <div>{errors.name.message}</div>}
+                  <button type="submit" className="newsummary-button">
+                    POST
+                  </button>
+                  {/* eslint-enable */}
+                  <button type="button" onClick={onDelete}>
+                    DELETE
+                  </button>
+                </form>
+              </div>
+            )}
+          </>
+        )}
       </main>
     </div>
   );

diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { useCookies } from 'react-cookie';
 import axios from 'axios';
 import { Link, useNavigate } from 'react-router-dom';
+import ClipLoader from 'react-spinners/ClipLoader';
 import { Header } from '../components/Header';
 import { url } from '../const';
 // import SummariesTable from './SummariesTable';
@@ -11,7 +12,10 @@ export const Home = () => {
   const [cookies, setCookie, removeCookie] = useCookies();
   const [summaries, setSummaries] = useState([]);
   const [errorMessage, setErrorMessage] = useState([]);
+  const [pageLoading, setPageLoading] = useState(false);
+
   useEffect(() => {
+    setPageLoading(true);
     axios
       .get(`${url}/summaries`, {
         headers: cookies.token
@@ -22,6 +26,7 @@ export const Home = () => {
       })
       .then((res) => {
         setSummaries(res.data.summaries);
+        setPageLoading(false);
       })
       .catch((err) => {
         navigate('/signin');
@@ -36,26 +41,34 @@ export const Home = () => {
           <p className="error-msg">{errorMessage}</p>
           <h2>summaries</h2>
           {/* <SummariesTable summaries={summaries} /> */}
-          {summaries && (
-            <div className="summary-list__table-container">
-              <table className="summary-list__table">
-                <thead className="summary-list__table-head">
-                  <tr>
-                    <th>タイトル</th>
-                  </tr>
-                </thead>
-                <tbody className="summary-list__table-body">
-                  {summaries.map((summary, key) => (
-                    <tr key={summary.id}>
-                      <td>
-                        <Link to={`detail/${summary.id}`}>{summary.title}</Link>
-                      </td>
-                      {summary.isMine && <Link to={`edit/${summary.id}`}>edit</Link>}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
+          {pageLoading ? (
+            <div className="loading custom-loader">
+              <ClipLoader color="blue" size={50} aria-label="Loading Spinner" data-testid="loader" />
             </div>
+          ) : (
+            <>
+              {summaries && (
+                <div className="summary-list__table-container">
+                  <table className="summary-list__table">
+                    <thead className="summary-list__table-head">
+                      <tr>
+                        <th>タイトル</th>
+                      </tr>
+                    </thead>
+                    <tbody className="summary-list__table-body">
+                      {summaries.map((summary, key) => (
+                        <tr key={summary.id}>
+                          <td>
+                            <Link to={`detail/${summary.id}`}>{summary.title}</Link>
+                          </td>
+                          {summary.isMine && <Link to={`edit/${summary.id}`}>edit</Link>}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+            </>
           )}
           <div className="new-summary">
             <Link to="/new">POST SUMMARY</Link>