Add refresh button, loading indicator

AENeuro · Mar 16, 2019 · 8c9f726 · 8c9f726
1 parent 95b5154
commit 8c9f726
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 11 deletions.
diff --git a/public/index.html b/public/index.html
@@ -9,6 +9,12 @@
     />
     <meta name="theme-color" content="#000000" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
+      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
+      crossorigin="anonymous"
+    />
     <title>Notepad</title>
   </head>
   <body>

diff --git a/src/App.css b/src/App.css
@@ -40,3 +40,28 @@
 .note-input {
   height: 65% !important;
 }
+
+.refresh-button {
+  position: absolute;
+  right: 24px;
+  top: 1em;
+
+  width: 40px;
+  height: 40px;
+  padding: 0px;
+
+  border-radius: 30px;
+}
+
+.spinning {
+  animation: spin 500ms linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotateZ(0);
+  }
+  100% {
+    transform: rotateZ(360deg);
+  }
+}
diff --git a/src/App.js b/src/App.js
@@ -5,22 +5,25 @@ import { getNote, postNote } from "./servcies";
 import "./App.css";
 
 const App = () => {
-  const [submitting, setSubmitting] = useState(false);
+  const [loading, setLoading] = useState(false);
   const [inputValue, setInputValue] = useState("");
 
   useEffect(() => {
     handleGetNote();
   }, []);
 
   const handleGetNote = async () => {
+    setLoading(true);
+    setInputValue("Loading Data...");
     const content = await getNote();
+    setLoading(false);
     setInputValue(content);
   };
 
   const handleSubmit = async () => {
-    setSubmitting(true);
+    setLoading(true);
     const response = await postNote(inputValue);
-    setSubmitting(false);
+    setLoading(false);
     message.success("Submitted");
     console.log(response);
   };
@@ -39,14 +42,23 @@ const App = () => {
           onChange={handleInputChange}
           value={inputValue}
         />
-        <Button
-          loading={submitting}
-          type="primary"
-          style={{ marginTop: "1em" }}
-          onClick={handleSubmit}
-        >
-          Submit
-        </Button>
+        <div>
+          <Button
+            loading={loading}
+            type="primary"
+            style={{ marginTop: "1em" }}
+            onClick={handleSubmit}
+          >
+            Submit
+          </Button>
+          <Button className="refresh-button" onClick={handleGetNote}>
+            <i
+              className={
+                loading ? "fas fa-sync-alt spinning" : "fas fa-sync-alt"
+              }
+            />
+          </Button>
+        </div>
       </Card>
     </div>
   );