From 43d5566a689d783a8f9ff1bf9b41df0eddcc63ac Mon Sep 17 00:00:00 2001
From: Thor-Herman <thorherman.eggelen@gmail.com>
Date: Tue, 22 Sep 2020 11:12:08 +0200
Subject: [PATCH] Add loading to usePoetry #4
---
frontend/src/Components/usePoetry.tsx | 9 ++++++---
1 file changed, 6 insertions(+), 3 deletions(-)
diff --git a/frontend/src/Components/usePoetry.tsx b/frontend/src/Components/usePoetry.tsx
index b87c2cb..16c7602 100644
--- a/frontend/src/Components/usePoetry.tsx
+++ b/frontend/src/Components/usePoetry.tsx
@@ -11,14 +11,14 @@ const poets = [
"Robert Burns",
"Edward Thomas",
"Richard Crashaw",
-]
+];
type dataResponse = {
title: string;
author: string;
lines: Array<string>;
linecount: number;
-}
+};
const usePoetry = (poetId: number) => { // Custom hook for retrieving poetry. Enter id and it will retrieve the corresponding poem
const [poem, setPoem] = useState<Array<string> | null>(null); // The poem itself. Initialized as null
@@ -26,6 +26,9 @@ const usePoetry = (poetId: number) => { // Custom hook for retrieving poetry. En
const [author, setAuthor] = useState("Loading...");
useEffect(() => { // Will run every time the Id changes
+ setPoem(["Loading..."]);
+ setTitle("Loading...");
+ setAuthor("Loading...");
fetch(`https://poetrydb.org/author,poemcount,linecount/${poets[poetId]};1;4`) // GET request to poetryDb
.then((response) => response.json()) // Convert response to json
.then((data: Array<dataResponse>) => {
@@ -36,5 +39,5 @@ const usePoetry = (poetId: number) => { // Custom hook for retrieving poetry. En
}, [poetId]);
return [title, poem, author] as const;
-}
+};
export default usePoetry;
\ No newline at end of file
--
GitLab