Don't show actor in suggestions if they're already selected

dmahely · Apr 21, 2023 · 6dfc650 · 6dfc650
1 parent a7f0b6e
commit 6dfc650
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/src/apis/fetchActors.ts b/src/apis/fetchActors.ts
@@ -1,6 +1,6 @@
 import { Actor } from '../types/types'
 
-const fetchActors = async (input: string) => {
+const fetchActors = async (input: string): Promise<Actor[]> => {
     const data = await (
         await fetch(
             `${process.env.REACT_APP_BASE_URL}/search/person?api_key=${process.env.REACT_APP_API_TOKEN}&query=${input}`

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -46,6 +46,7 @@ const App = () => {
                                 inputValue={inputValue}
                                 setInputValue={setInputValue}
                                 setActors={setActors}
+                                selectedActors={selectedActors}
                             />
                             <Suggestions
                                 actors={actors}

diff --git a/src/components/InputForm/InputForm.tsx b/src/components/InputForm/InputForm.tsx
@@ -1,6 +1,6 @@
 import { Input, VStack } from '@chakra-ui/react'
 import React, { useEffect } from 'react'
-import { Actor } from '../../types/types'
+import { Actor, ActorWithMovies } from '../../types/types'
 import { fetchActors } from '../../apis/fetchActors'
 import { useState } from 'react'
 import { Loading } from '../Loading/Loading'
@@ -9,12 +9,14 @@ type InputFormProps = {
     setActors: React.Dispatch<React.SetStateAction<Actor[]>>
     inputValue: string
     setInputValue: React.Dispatch<React.SetStateAction<string>>
+    selectedActors: ActorWithMovies[]
 }
 
 const InputForm: React.FC<InputFormProps> = ({
     setActors,
     inputValue,
     setInputValue,
+    selectedActors,
 }) => {
     const [isLoading, setIsLoading] = useState<boolean>(false)
 
@@ -25,10 +27,24 @@ const InputForm: React.FC<InputFormProps> = ({
         setInputValue(inputText)
     }
 
+    const filterSelectedActors = (
+        actorsResult: Actor[],
+        selectedActors: ActorWithMovies[]
+    ) => {
+        const selectedActorsIds = selectedActors.map((actor) => actor.actor.id)
+        return actorsResult.filter(
+            (actor) => !selectedActorsIds.includes(actor.id)
+        )
+    }
+
     const getActorResult = async (inputText: string) => {
         const actorsResult = await fetchActors(inputText)
         setIsLoading(false)
-        setActors(actorsResult)
+        const filteredActors = filterSelectedActors(
+            actorsResult,
+            selectedActors
+        )
+        setActors(filteredActors)
     }
 
     useEffect(() => {