Api testing

src/components/App.tsx

@@ -1,17 +1,56 @@
-import React, { useState } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import React, { useState, useEffect } from 'react';
+import { useQueryClient, QueryClient, QueryClientProvider, useQuery } from 'react-query';
 import './App.css';
 import PersonCard from './PersonCard';
 import ToggleButton from 'react-bootstrap/ToggleButton';
 import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';
 
 const queryClient = new QueryClient();
 
+interface CharacterData {
+  id: string;
+  name: string;
+  height: string;
+  mass: string;
+  eye_color: string;
+  hair_color: string;
+  skin_color: string;
+}
+
 function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <GetPeople />
+    </QueryClientProvider>
+  )
+}
+
+function GetPeople() {
   const [length, setLength] = useState<number>(12);
   const [favoriteCards, setFavoriteCards] = useState<number[]>([]);
   const [showFavorites, setShowFavorites] = useState<boolean>(false);
 
+  const queryClient = useQueryClient()
+
+  const { isLoading, error, data } = useQuery<CharacterData[]>('people', () =>
+    fetch('https://w5c9dy2dg4.execute-api.us-east-2.amazonaws.com/people', {
+      headers: {
+        'Content-Type': 'application/json',
+        "Access-Control-Allow-Origin": "*",
+      },
+    }).then(res =>
+      res.json()
+    )
+  );
+
+  useEffect(() => {
+    if (data) {
+      setFavoriteCards(data.map(person => parseInt(person.id)));
+    }
+  }, [data]);
+
+  console.log(favoriteCards);
+
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = parseInt(event.target.value);
     if (!isNaN(value)) {
@@ -21,7 +60,6 @@ function App() {
     }
   };
 
-  // Call AWS lambda to update DynamoDB here!!
   const handleFavoriteToggle = (cardIndex: number) => {
     setFavoriteCards(prevFavorites =>
       prevFavorites.includes(cardIndex)
@@ -40,58 +78,56 @@ function App() {
     : Array.from({ length }, (_, index) => index);
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <div className="App">
-        <header className="App-header">
-          <h2 className="App-title">SWAPI React + Typescript Test!</h2>
-          <a
-            className="SWAPI-link"
-            href="https://swapi.dev/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Star Wars API
-          </a>
-        </header>
-        <div className="App-input">
-          <label htmlFor="lengthInput"># of People Cards Displayed:</label>
-          <input
-            type="number"
-            id="lengthInput"
-            value={length}
-            onChange={handleInputChange}
-            min="1"
-            max="50"
-          />
-        </div>
-
-        <ToggleButtonGroup
-          className="toggle-buttons"
-          type="radio"
-          name="options"
-          defaultValue={1}
-          onChange={handleToggleChange}
+    <div className="App">
+      <header className="App-header">
+        <h2 className="App-title">SWAPI React + Typescript Test!</h2>
+        <a
+          className="SWAPI-link"
+          href="https://swapi.dev/"
+          target="_blank"
+          rel="noopener noreferrer"
         >
-          <ToggleButton id="tbg-radio-1" value={1}>
-            All-Items
-          </ToggleButton>
-          <ToggleButton id="tbg-radio-2" value={2}>
-            Favorites
-          </ToggleButton>
-        </ToggleButtonGroup>
-
-        <div className="App-cards">
-          {displayedCards.map(index => (
-            <PersonCard 
-              key={index} 
-              index={index} 
-              isFavorite={favoriteCards.includes(index)}
-              onFavoriteToggle={handleFavoriteToggle}
-            />
-          ))}
-        </div>
+          Star Wars API
+        </a>
+      </header>
+      <div className="App-input">
+        <label htmlFor="lengthInput"># of People Cards Displayed:</label>
+        <input
+          type="number"
+          id="lengthInput"
+          value={length}
+          onChange={handleInputChange}
+          min="1"
+          max="50"
+        />
       </div>
-    </QueryClientProvider>
+
+      <ToggleButtonGroup
+        className="toggle-buttons"
+        type="radio"
+        name="options"
+        defaultValue={1}
+        onChange={handleToggleChange}
+      >
+        <ToggleButton id="tbg-radio-1" value={1}>
+          All-Items
+        </ToggleButton>
+        <ToggleButton id="tbg-radio-2" value={2}>
+          Favorites
+        </ToggleButton>
+      </ToggleButtonGroup>
+
+      <div className="App-cards">
+        {displayedCards.map(index => (
+          <PersonCard
+            key={index}
+            index={index}
+            isFavorite={favoriteCards.includes(index)}
+            onFavoriteToggle={handleFavoriteToggle}
+          />
+        ))}
+      </div>
+    </div>
   );
 }
 

src/components/PersonCard.tsx

@@ -1,4 +1,5 @@
-import { useQuery } from 'react-query';
+import React from 'react';
+import { useQuery, useMutation, useQueryClient } from 'react-query';
 import Card from 'react-bootstrap/Card';
 import ToggleButton from 'react-bootstrap/ToggleButton';
 
@@ -9,6 +10,7 @@ interface PersonCardProps {
 }
 
 interface CharacterData {
+    id: string;
     name: string;
     height: string;
     mass: string;
@@ -17,17 +19,58 @@ interface CharacterData {
     skin_color: string;
 }
 
-function PersonCard({ index, isFavorite, onFavoriteToggle }: PersonCardProps): JSX.Element {
+const addPerson = async (id: number, data: CharacterData): Promise<CharacterData> => {
+    data.id = id.toString();
+    const response = await fetch(`https://w5c9dy2dg4.execute-api.us-east-2.amazonaws.com/people`, {
+        method: 'PUT',
+        headers: {
+            'Content-Type': 'application/json',
+            "Access-Control-Allow-Origin": "*",
+        },
+        body: JSON.stringify(data),
+    });
+    if (!response.ok) {
+        throw new Error('Network response was not ok');
+    }
+    return response.json();
+}
 
+const deletePerson = async (id: number): Promise<void> => {
+    const response = await fetch(`https://w5c9dy2dg4.execute-api.us-east-2.amazonaws.com/people/${id}`, {
+        method: 'DELETE',
+        headers: {
+            'Content-Type': 'application/json',
+            "Access-Control-Allow-Origin": "*",
+        },
+    });
+    if (!response.ok) {
+        throw new Error('Network response was not ok');
+    }
+}
+
+function PersonCard({ index, isFavorite, onFavoriteToggle }: PersonCardProps): JSX.Element {
+    const queryClient = useQueryClient();
     // api starts at 1 not 0
-    const person = index+1;
+    const person = index + 1;
 
     const { isLoading, error, data } = useQuery<CharacterData>('getPerson_' + person, () =>
-        fetch('https://swapi.dev/api/people/' + person).then(res => 
+        fetch('https://swapi.dev/api/people/' + person).then(res =>
             res.json()
         )
     );
 
+    const addMutation = useMutation((newData: CharacterData) => addPerson(index, newData), {
+        onSuccess: () => {
+            queryClient.invalidateQueries('getPerson_' + person);
+        },
+    });
+
+    const deleteMutation = useMutation(() => deletePerson(index), {
+        onSuccess: () => {
+            queryClient.invalidateQueries('getPerson_' + person);
+        },
+    });
+
     if (isLoading) return (<p>Loading...</p>);
 
     if (error) return (<p>Error fetching data.</p>);
@@ -43,6 +86,11 @@ function PersonCard({ index, isFavorite, onFavoriteToggle }: PersonCardProps): J
     }
 
     const handleFavoriteClick = () => {
+        if (isFavorite) {
+            deleteMutation.mutate();
+        } else {
+            addMutation.mutate(data);
+        }
         onFavoriteToggle(index);
     };
 
@@ -54,6 +102,7 @@ function PersonCard({ index, isFavorite, onFavoriteToggle }: PersonCardProps): J
                     variant={isFavorite ? 'primary' : 'outline-primary'}
                     value={1}
                     onClick={handleFavoriteClick}
+                    disabled={addMutation.isLoading || deleteMutation.isLoading}
                 >
                     {isFavorite ? 'Unfavorite' : 'Favorite'}
                 </ToggleButton>