feat: fix errors with Twitter api

src/components/error-state.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+const ErrorState = () => {
+  return (
+    <div className="flex gap-2 items-center p-2 border border-red-600 w-full rounded text-red-600">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        className="w-6 h-6"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+        />
+      </svg>
+
+      <div className="flex flex-col">
+        <strong className="text-inherit">Error</strong>
+        <small className="text-xs text-red-200">Probably something to do with that Elon bloke.</small>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorState;

src/components/recent-tweets.js

@@ -1,35 +1,45 @@
 import React, { useState, useEffect, useRef } from 'react';
 
 import Loading from '../components/loading';
+import ErrorState from '../components/error-state';
 
 import { formatDatestamp } from '../utils/format-date-stamp';
 
 const RecentTweets = () => {
   const isMounted = useRef(false);
 
   const [isLoading, setIsLoading] = useState(true);
+  const [isError, setIsError] = useState(false);
   const [response, setResponse] = useState({});
 
   useEffect(() => {
     const getGitHubData = async () => {
       try {
-        const tweetsData = await (
-          await fetch('https://paulieapi.gatsbyjs.io/api/get-latest-tweets', {
-            method: 'POST',
-            body: JSON.stringify({
-              id: 470012453
-            })
+        const tweetResponse = await fetch('https://paulieapi.gatsbyjs.io/api/get-latest-tweets', {
+          method: 'POST',
+          body: JSON.stringify({
+            id: 470012453
           })
-        ).json();
-
-        const userData = await (
-          await fetch('https://paulieapi.gatsbyjs.io/api/get-twitter-user', {
-            method: 'POST',
-            body: JSON.stringify({
-              username: 'PaulieScanlon'
-            })
+        });
+
+        if (!tweetResponse.ok) {
+          throw new Error('get-latest-tweets');
+        }
+
+        const tweetsData = await tweetResponse.json();
+
+        const twitterUser = await fetch('https://paulieapi.gatsbyjs.io/api/get-twitter-user', {
+          method: 'POST',
+          body: JSON.stringify({
+            username: 'PaulieScanlon'
           })
-        ).json();
+        });
+
+        if (!twitterUser.ok) {
+          throw new Error('get-latest-tweets');
+        }
+
+        const userData = await twitterUser.json();
 
         if (isMounted) {
           setResponse({
@@ -40,6 +50,7 @@ const RecentTweets = () => {
         }
       } catch (error) {
         console.error(error);
+        setIsError(true);
       }
     };
 
@@ -63,7 +74,7 @@ const RecentTweets = () => {
       <div className="lg:h-16 mb-4">
         {isLoading ? (
           <div className="flex items-center justify-center h-full">
-            <Loading className="fill-salmon" />
+            {isError ? <ErrorState /> : <Loading className="fill-salmon" />}
           </div>
         ) : (
           <div className="grid sm:grid-cols-auto-1fr gap-2 justify-center text-center sm:text-left items-center">
@@ -104,7 +115,7 @@ const RecentTweets = () => {
       <div className="rounded border border-outline bg-surface p-2 sm:p-4 bg-background h-96 overflow-y-hidden">
         {isLoading ? (
           <div className="flex items-center justify-center h-full">
-            <Loading className="fill-salmon" />
+            {isError ? <ErrorState /> : <Loading className="fill-salmon" />}
           </div>
         ) : (
           <ul className="list-none m-0 p-0 overflow-y-auto overflow-x-hidden h-[355px]">
@@ -120,12 +131,12 @@ const RecentTweets = () => {
           </ul>
         )}
       </div>
-      <div className="mt-4 leading-tight">
+      {/* <div className="mt-4 leading-tight">
         <small className="text-slate-400 text-xs">Powered by </small>
         <a href="https://paulieapi.gatsbyjs.io/" target="_blank" rel="noreferrer" className="text-xs">
           Paulie API
         </a>
-      </div>
+      </div> */}
     </div>
   );
 };