#2 페이스북 이벤트에 장소 정보가 없어도 죽지않고 보여주기

NullFull · Dec 30, 2019 · e4154ad · e4154ad
1 parent 99d3404
commit e4154ad
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 18 deletions.
diff --git a/src/components/FacebookEvents.js b/src/components/FacebookEvents.js
@@ -1,31 +1,53 @@
 import React from 'react'
 
 
-const FacebookEvents = () => {
-    const [events, setEvents] = React.useState([{}])
+const useFacebookEvents = () => {
+    const [isLoaded, setIsLoaded] = React.useState(false)
+    const [hasError, setHasError] = React.useState(false)
+    const [events, setEvents] = React.useState([])
 
     const fetchEvents = async () => {
-        const response = await fetch(`/.netlify/functions/fbEvents`)
-        const data = await response.json()
-        setEvents(data.events)
+        try {
+            const response = await fetch(`/.netlify/functions/fbEvents`)
+            const data = await response.json()
+            setEvents(data.events)
+        } catch (e) {
+            setHasError(true)
+        } finally {
+            setIsLoaded(true)
+        }
     }
 
+    return [events, isLoaded, hasError, fetchEvents]
+}
+
+const FacebookEvents = () => {
+    const [events, isLoaded, hasError, fetchEvents] = useFacebookEvents()
+
     React.useEffect(() => {
         fetchEvents()
     }, [])
 
+    if (!isLoaded) {
+        return <div>로딩중</div>
+    }
+
     return (
         <div className="fb-event">
-            <ul>
-                {events.map((event, i) => (
-                    <li key={`event-${i}`}>
-                        <h3><a href={event.url}>{event.title}</a></h3>
-                        <p>{event.month} {event.day}</p>
-                        <p>{event.time}</p>
-                        <p>{event.place}</p>
-                    </li>
-                ))}
-            </ul>
+            {hasError ?
+                <p>앗 에러가</p>
+                :
+                <ul>
+                    {events.map((event, i) => (
+                        <li key={`event-${i}`}>
+                            <h3><a href={event.url}>{event.title}</a></h3>
+                            <p>{event.month} {event.day}</p>
+                            <p>{event.time}</p>
+                            <p>{event.place}</p>
+                        </li>
+                    ))}
+                </ul>
+            }
         </div>
     )
 }

diff --git a/src/functions/fbEvents.js b/src/functions/fbEvents.js
@@ -17,11 +17,14 @@ export async function handler (event, context, callback) {
 
         const infos = event.querySelectorAll('._52jc._5d19')
         const time = infos[0].text
-        const place = infos[1].text
 
-        return {
-            url, title, month, day, time, place
+        let data = {url, title, month, day, time}
+
+        if (infos.length > 1) {
+            data['place'] = infos[1].text
         }
+
+        return data
     })
 
     callback(null, {