From 92544f2e3c955a507245b686fc14b5d4e383e910 Mon Sep 17 00:00:00 2001 From: Milad Date: Tue, 26 Dec 2023 15:22:55 +0000 Subject: [PATCH 1/6] add new my bar hook --- src/app/(tabs)/my-bar.tsx | 13 ++-- src/graphql/queries/getIngredientsInMyBar.ts | 26 -------- src/graphql/queries/index.ts | 1 - src/hooks/index.ts | 1 + src/hooks/useFetchIngredientDetails.ts | 19 ++---- src/hooks/useFetchIngredients.ts | 23 +++---- src/hooks/useFetchMatchedRecipes.ts | 48 ++------------ src/hooks/useFetchMybar.ts | 69 ++++++++++++++++++++ src/hooks/useFetchRecipeDetails.ts | 13 ++-- 9 files changed, 98 insertions(+), 115 deletions(-) delete mode 100644 src/graphql/queries/getIngredientsInMyBar.ts create mode 100644 src/hooks/useFetchMybar.ts diff --git a/src/app/(tabs)/my-bar.tsx b/src/app/(tabs)/my-bar.tsx index 731417c..81ea10a 100644 --- a/src/app/(tabs)/my-bar.tsx +++ b/src/app/(tabs)/my-bar.tsx @@ -1,5 +1,5 @@ import { router } from 'expo-router' -import React, { useCallback, useEffect, useRef, useState } from 'react' +import React, { useCallback, useEffect, useState } from 'react' import { ActivityIndicator, View, ViewStyle } from 'react-native' import Popover from 'react-native-popover-view' import { @@ -13,7 +13,7 @@ import { Tabs, Text, } from '~/components' -import { useAnalytics, useFetchMatchedRecipes, useSession } from '~/hooks' +import { useAnalytics, useFetchMatchedRecipes, useFetchMyBar, useSession } from '~/hooks' import { useDetailsModal, useStore } from '~/providers' export default function MyBarScreen() { @@ -35,19 +35,16 @@ export default function MyBarScreen() { } }, [myBarPopoverDismissed]) + const { deleteFromMyBar, myBarRefetch, myBarLoading, sectionsData, sectionsHeader, myBarError } = + useFetchMyBar() + const { - deleteFromMyBar, getRecipeMatch, - myBarRefetch, - myBarLoading, partialMatchData, partialMatchRefetch, - sectionsData, - sectionsHeader, totalMatchData, totalMatchLoading, totalMatchRefetch, - myBarError, totalMatchError, } = useFetchMatchedRecipes() diff --git a/src/graphql/queries/getIngredientsInMyBar.ts b/src/graphql/queries/getIngredientsInMyBar.ts deleted file mode 100644 index acf368a..0000000 --- a/src/graphql/queries/getIngredientsInMyBar.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { gql } from '~/__generated__/gql' - -export const GET_INGREDIENTS_IN_MY_BAR = gql(` - query getIngredientsInMyBar { - profilesIngredientsCollection(first: 1000) { - edges { - node { - ingredient { - id - name - ingredientsCategoriesCollection(first: 1000) { - edges { - node { - category { - id - name - } - } - } - } - } - } - } - } - } -`) diff --git a/src/graphql/queries/index.ts b/src/graphql/queries/index.ts index 733623e..5d3da37 100644 --- a/src/graphql/queries/index.ts +++ b/src/graphql/queries/index.ts @@ -5,7 +5,6 @@ export * from './getEquipmentDetails' export * from './getFavourites' export * from './getFilters' export * from './getIngredientDetails' -export * from './getIngredientsInMyBar' export * from './getIngtedientsByCategories' export * from './getMyBar' export * from './getPartialMatchRecipes' diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 879b16f..287a808 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -4,6 +4,7 @@ export * from './useFetchIngredients' export * from './useFetchMatchedRecipes' export * from './useFetchRecipeDetails' export * from './useFetchRecipes' +export * from './useFetchMybar' export * from './useHaptics' export * from './usePeristedState' export * from './useProtectedRouteListener' diff --git a/src/hooks/useFetchIngredientDetails.ts b/src/hooks/useFetchIngredientDetails.ts index c2b5d06..1ece49e 100644 --- a/src/hooks/useFetchIngredientDetails.ts +++ b/src/hooks/useFetchIngredientDetails.ts @@ -2,11 +2,7 @@ import { useMutation, useQuery } from '@apollo/client' import { router, useGlobalSearchParams } from 'expo-router' import { GetRecipesByIngredientQuery } from '~/__generated__/graphql' import { ADD_TO_MY_BAR, DELETE_FROM_MY_BAR } from '~/graphql/mutations' -import { - GET_INGREDIENTS_IN_MY_BAR, - GET_INGREDIENT_DETAILS, - GET_RECIPES_BY_INGREDIENT, -} from '~/graphql/queries' +import { GET_INGREDIENT_DETAILS, GET_RECIPES_BY_INGREDIENT } from '~/graphql/queries' import { useDetailsModal } from '~/providers' import { captureError } from '~/utils/captureError' import { useSession } from './useSession' @@ -18,7 +14,7 @@ export const useFetchIngredientDetails = (ingredientId: string, onClosed: () => const { data, loading } = useQuery(GET_INGREDIENT_DETAILS, { variables: { ingredientId }, }) - const { data: barIngredients, refetch: myBarRefetch } = useQuery(GET_INGREDIENTS_IN_MY_BAR) + const { data: relatedRecipes, loading: recipesLoading } = useQuery(GET_RECIPES_BY_INGREDIENT, { variables: { ingredientId }, fetchPolicy: 'cache-and-network', @@ -28,9 +24,8 @@ export const useFetchIngredientDetails = (ingredientId: string, onClosed: () => const [addToMyBar, { loading: addLoading }] = useMutation(ADD_TO_MY_BAR) const [deleteFromMyBar] = useMutation(DELETE_FROM_MY_BAR) - const myBar = - barIngredients?.profilesIngredientsCollection?.edges.map((e) => e.node?.ingredient?.id) ?? [] - const isInMyBar = myBar.includes(ingredientId) + + // const isInMyBar = myBar.includes(ingredientId) const ingredient = data?.ingredientsCollection?.edges[0]?.node const getAvailableRecipes = (relatedRecipes: GetRecipesByIngredientQuery) => { @@ -72,7 +67,7 @@ export const useFetchIngredientDetails = (ingredientId: string, onClosed: () => ], }, onCompleted: () => { - myBarRefetch() + // myBarRefetch() }, onError: (error) => { captureError(error) @@ -87,7 +82,7 @@ export const useFetchIngredientDetails = (ingredientId: string, onClosed: () => ingredientIds: [ingredientId], }, onCompleted: () => { - myBarRefetch() + // myBarRefetch() }, onError: (error) => { captureError(error) @@ -101,7 +96,7 @@ export const useFetchIngredientDetails = (ingredientId: string, onClosed: () => recipesLoading: recipesLoading && !relatedRecipes, availableRecipes, addLoading, - isInMyBar, + // isInMyBar, handleAddToMyBar, handleDeleteFromMyBar, } diff --git a/src/hooks/useFetchIngredients.ts b/src/hooks/useFetchIngredients.ts index 3304098..4abe832 100644 --- a/src/hooks/useFetchIngredients.ts +++ b/src/hooks/useFetchIngredients.ts @@ -2,17 +2,18 @@ import { useQuery } from '@apollo/client' import keyBy from 'lodash/keyBy' import { useEffect, useState } from 'react' import { SectionDataType, SectionHeaderType } from '~/components' -import { GET_INGREDIENTS_IN_MY_BAR } from '~/graphql/queries' import { GET_INGREDIENTS_BY_CATEGORIES } from '~/graphql/queries/getIngtedientsByCategories' import { useAppContent } from '~/providers' import { captureError } from '~/utils/captureError' import { api } from '../services/api' import { useAnalytics } from './useAnalytics' +import { useFetchMyBar } from './useFetchMybar' export type SelectedItems = Record export const useFetchIngredients = () => { try { + const { ingredientsInMyBar } = useFetchMyBar() const { capture } = useAnalytics() const { ingredient_categories } = useAppContent() const [searchQuery, setSearchQuery] = useState('') @@ -91,20 +92,12 @@ export const useFetchIngredients = () => { useEffect(() => { if (!selectedIngredients) return const initialSelectedItems: SelectedItems = {} - selectedIngredients?.profilesIngredientsCollection?.edges - .filter(({ node }) => node?.ingredient) - .forEach( - ({ - node: { - ingredient: { id, name }, - }, - }) => { - initialSelectedItems[id] = { - name, - selected: true, - } - }, - ) + ingredientsInMyBar.forEach(({ name, id }) => { + initialSelectedItems[id] = { + name, + selected: true, + } + }) setInitialSelectedItems(initialSelectedItems) setSelectedItems(initialSelectedItems) diff --git a/src/hooks/useFetchMatchedRecipes.ts b/src/hooks/useFetchMatchedRecipes.ts index 12341db..331e989 100644 --- a/src/hooks/useFetchMatchedRecipes.ts +++ b/src/hooks/useFetchMatchedRecipes.ts @@ -1,29 +1,14 @@ -import { useMutation, useQuery } from '@apollo/client' +import { useQuery } from '@apollo/client' import { useIsFocused } from '@react-navigation/native' import { router } from 'expo-router' import { useEffect } from 'react' import { GetPartialMatchRecipesQuery, GetTotalmatchRecipesQuery } from '~/__generated__/graphql' -import { CardProps, SectionDataType, SectionHeaderType } from '~/components' -import { DELETE_FROM_MY_BAR } from '~/graphql/mutations/deleteFromMyBar' -import { - GET_INGREDIENTS_IN_MY_BAR, - GET_MY_BAR, - GET_PARTIAL_MATCH_RECIPES, - GET_TOTAL_MATCH_RECIPES, -} from '~/graphql/queries' -import { useAppContent } from '~/providers' +import { CardProps } from '~/components' +import { GET_PARTIAL_MATCH_RECIPES, GET_TOTAL_MATCH_RECIPES } from '~/graphql/queries' import { captureError } from '~/utils/captureError' export const useFetchMatchedRecipes = () => { try { - const { my_bar } = useAppContent() - const { - data: myBarData, - loading: myBarLoading, - refetch: myBarRefetch, - error: myBarError, - } = useQuery(GET_MY_BAR) - const { data: totalMatchData, refetch: totalMatchRefetch, @@ -42,12 +27,10 @@ export const useFetchMatchedRecipes = () => { useEffect(() => { if (isFocused) { - // Refetch the data when the tab gains focus - myBarRefetch() totalMatchRefetch() partialMatchRefetch() } - }, [isFocused, myBarRefetch, totalMatchRefetch, partialMatchRefetch]) + }, [isFocused, totalMatchRefetch, partialMatchRefetch]) const getRecipeMatch = ( matchedData: GetTotalmatchRecipesQuery | GetPartialMatchRecipesQuery, @@ -66,35 +49,12 @@ export const useFetchMatchedRecipes = () => { ) } - let sectionsData: SectionDataType[][] = [] - let sectionsHeader: SectionHeaderType[] = [] - - const categoriesdIngredients = - myBarData?.myBarCollection?.edges - ?.filter(({ node }) => !my_bar?.hidden_category_ids?.includes(node?.id)) - ?.map(({ node }) => node) ?? [] - - sectionsData = categoriesdIngredients.map((section) => JSON.parse(section?.data)) - sectionsHeader = categoriesdIngredients.map((section) => ({ - title: section?.title, - count: section?.count, - id: section?.title, - })) - - const [deleteFromMyBar] = useMutation(DELETE_FROM_MY_BAR) - return { - deleteFromMyBar, getRecipeMatch, - myBarError, - myBarLoading, - myBarRefetch, partialMatchData, partialMatchError, partialMatchLoading, partialMatchRefetch, - sectionsData, - sectionsHeader, totalMatchData, totalMatchError, totalMatchLoading, diff --git a/src/hooks/useFetchMybar.ts b/src/hooks/useFetchMybar.ts new file mode 100644 index 0000000..e4d031f --- /dev/null +++ b/src/hooks/useFetchMybar.ts @@ -0,0 +1,69 @@ +import { useMutation, useQuery } from '@apollo/client' +import { useIsFocused } from '@react-navigation/native' +import { useEffect } from 'react' +import { SectionDataType, SectionHeaderType } from '~/components' +import { DELETE_FROM_MY_BAR } from '~/graphql/mutations/deleteFromMyBar' +import { GET_MY_BAR } from '~/graphql/queries' +import { useAppContent } from '~/providers' +import { captureError } from '~/utils/captureError' + +interface Ingredient { + id: string + name: string +} + +export const useFetchMyBar = () => { + try { + const { my_bar } = useAppContent() + const { + data: myBarData, + loading: myBarLoading, + refetch: myBarRefetch, + error: myBarError, + } = useQuery(GET_MY_BAR) + + const isFocused = useIsFocused() + + useEffect(() => { + if (isFocused) { + // Refetch the data when the tab gains focus + myBarRefetch() + } + }, [isFocused, myBarRefetch]) + + let sectionsData: SectionDataType[][] = [] + let sectionsHeader: SectionHeaderType[] = [] + let ingredientsInMyBar: Ingredient[] = [] + + for (let category of myBarData?.myBarCollection?.edges) { + const { node } = category + + if (!my_bar?.hidden_category_ids?.includes(node?.id)) { + const data: Ingredient[] = JSON.parse(node?.data) + + ingredientsInMyBar = ingredientsInMyBar.concat(data) + + sectionsData.push(data) + sectionsHeader.push({ + title: node?.title, + count: node?.count, + id: node?.title, + }) + } + } + + const [deleteFromMyBar] = useMutation(DELETE_FROM_MY_BAR) + + return { + deleteFromMyBar, + myBarError, + myBarLoading, + myBarRefetch, + sectionsData, + sectionsHeader, + ingredientsInMyBar, + } + } catch (error) { + captureError(error) + } +} diff --git a/src/hooks/useFetchRecipeDetails.ts b/src/hooks/useFetchRecipeDetails.ts index d5f5bfa..1c6edc0 100644 --- a/src/hooks/useFetchRecipeDetails.ts +++ b/src/hooks/useFetchRecipeDetails.ts @@ -1,14 +1,16 @@ import { useMutation, useQuery } from '@apollo/client' import { useLocalSearchParams } from 'expo-router' import { ADD_TO_FAVOURITES, DELETE_FROM_FAVOURITES } from '~/graphql/mutations' -import { GET_INGREDIENTS_IN_MY_BAR, GET_RECIPE_DETAILS } from '~/graphql/queries' +import { GET_RECIPE_DETAILS } from '~/graphql/queries' import { useAppContent } from '~/providers' import { captureError } from '~/utils/captureError' import { useAnalytics } from './useAnalytics' +import { useFetchMyBar } from './useFetchMybar' import { useSession } from './useSession' export const useFetchRecipeDetails = () => { try { + const { ingredientsInMyBar } = useFetchMyBar() const { capture } = useAnalytics() const { recipeId, recipeName } = useLocalSearchParams() const { recipe_attributes } = useAppContent() @@ -19,8 +21,6 @@ export const useFetchRecipeDetails = () => { fetchPolicy: 'cache-and-network', }) - const { data: barIngredients } = useQuery(GET_INGREDIENTS_IN_MY_BAR) - const firstTimeLoading = loading && !data && !error const recipe = data?.recipesCollection?.edges[0]?.node @@ -37,15 +37,10 @@ export const useFetchRecipeDetails = () => { (id: string) => categories.find((c) => c.parentId === id) ?? { id }, ) ?? [] - const myBar = - barIngredients?.profilesIngredientsCollection.edges - .filter((e) => e?.node?.ingredient) - .map((e) => e?.node?.ingredient?.id) ?? [] - const mergedRecipeIngredients = recipeIngredients .filter((recipeIngredient) => recipeIngredient?.ingredient) .map((recipeIngredient) => { - const inMyBar = myBar.includes(recipeIngredient?.ingredient?.id) + const inMyBar = ingredientsInMyBar.includes(recipeIngredient?.ingredient?.id) return { ...recipeIngredient, inMyBar, From e60d47219b4ead17026f8dee0252f9f58ffc27de Mon Sep 17 00:00:00 2001 From: Milad Date: Tue, 26 Dec 2023 15:57:29 +0000 Subject: [PATCH 2/6] remove duplicate mybar fetch --- src/app/(tabs)/my-bar.tsx | 10 ++++++ src/hooks/useFetchIngredientDetails.ts | 10 +++--- src/hooks/useFetchIngredients.ts | 18 ++++------ src/hooks/useFetchMybar.ts | 49 +++++++++++++------------- 4 files changed, 48 insertions(+), 39 deletions(-) diff --git a/src/app/(tabs)/my-bar.tsx b/src/app/(tabs)/my-bar.tsx index 81ea10a..a0e36fb 100644 --- a/src/app/(tabs)/my-bar.tsx +++ b/src/app/(tabs)/my-bar.tsx @@ -1,3 +1,4 @@ +import { useIsFocused } from '@react-navigation/native' import { router } from 'expo-router' import React, { useCallback, useEffect, useState } from 'react' import { ActivityIndicator, View, ViewStyle } from 'react-native' @@ -23,6 +24,8 @@ export default function MyBarScreen() { const { capture } = useAnalytics() const [deleteingItemId, setDeleteingItemId] = useState('') + const isFocused = useIsFocused() + const handleIngredientPress = useCallback((ingredientId: string) => { setCurrentIngredientId(ingredientId) }, []) @@ -38,6 +41,13 @@ export default function MyBarScreen() { const { deleteFromMyBar, myBarRefetch, myBarLoading, sectionsData, sectionsHeader, myBarError } = useFetchMyBar() + useEffect(() => { + if (isFocused) { + // Refetch the data when the tab gains focus + myBarRefetch() + } + }, [isFocused, myBarRefetch]) + const { getRecipeMatch, partialMatchData, diff --git a/src/hooks/useFetchIngredientDetails.ts b/src/hooks/useFetchIngredientDetails.ts index 1ece49e..6b085fe 100644 --- a/src/hooks/useFetchIngredientDetails.ts +++ b/src/hooks/useFetchIngredientDetails.ts @@ -5,10 +5,12 @@ import { ADD_TO_MY_BAR, DELETE_FROM_MY_BAR } from '~/graphql/mutations' import { GET_INGREDIENT_DETAILS, GET_RECIPES_BY_INGREDIENT } from '~/graphql/queries' import { useDetailsModal } from '~/providers' import { captureError } from '~/utils/captureError' +import { useFetchMyBar } from './useFetchMybar' import { useSession } from './useSession' export const useFetchIngredientDetails = (ingredientId: string, onClosed: () => void) => { try { + const { ingredientsInMyBar, myBarRefetch } = useFetchMyBar() const { recipeId } = useGlobalSearchParams() const { user } = useSession() const { data, loading } = useQuery(GET_INGREDIENT_DETAILS, { @@ -25,7 +27,7 @@ export const useFetchIngredientDetails = (ingredientId: string, onClosed: () => const [addToMyBar, { loading: addLoading }] = useMutation(ADD_TO_MY_BAR) const [deleteFromMyBar] = useMutation(DELETE_FROM_MY_BAR) - // const isInMyBar = myBar.includes(ingredientId) + const isInMyBar = !!ingredientsInMyBar.find((i) => i.id === ingredientId) const ingredient = data?.ingredientsCollection?.edges[0]?.node const getAvailableRecipes = (relatedRecipes: GetRecipesByIngredientQuery) => { @@ -67,7 +69,7 @@ export const useFetchIngredientDetails = (ingredientId: string, onClosed: () => ], }, onCompleted: () => { - // myBarRefetch() + myBarRefetch() }, onError: (error) => { captureError(error) @@ -82,7 +84,7 @@ export const useFetchIngredientDetails = (ingredientId: string, onClosed: () => ingredientIds: [ingredientId], }, onCompleted: () => { - // myBarRefetch() + myBarRefetch() }, onError: (error) => { captureError(error) @@ -96,7 +98,7 @@ export const useFetchIngredientDetails = (ingredientId: string, onClosed: () => recipesLoading: recipesLoading && !relatedRecipes, availableRecipes, addLoading, - // isInMyBar, + isInMyBar, handleAddToMyBar, handleDeleteFromMyBar, } diff --git a/src/hooks/useFetchIngredients.ts b/src/hooks/useFetchIngredients.ts index 4abe832..bfc2e45 100644 --- a/src/hooks/useFetchIngredients.ts +++ b/src/hooks/useFetchIngredients.ts @@ -26,6 +26,10 @@ export const useFetchIngredients = () => { const [sectionsHeader, setSectionsHeader] = useState([]) const [initialSelectedItems, setInitialSelectedItems] = useState({}) + const { data: categories } = useQuery(GET_INGREDIENTS_BY_CATEGORIES, { + fetchPolicy: 'cache-and-network', + }) + /** * Search for ingredients that match the given search query. * @param searchQuery - The search query to match against ingredient names. @@ -65,14 +69,6 @@ export const useFetchIngredients = () => { searchIngredients(searchQuery) }, [searchQuery]) - const { data: categories } = useQuery(GET_INGREDIENTS_BY_CATEGORIES, { - fetchPolicy: 'cache-and-network', - }) - - const { data: selectedIngredients } = useQuery(GET_INGREDIENTS_IN_MY_BAR, { - fetchPolicy: 'cache-and-network', - }) - useEffect(() => { if (!categories) return const sectionsData: SectionDataType[][] = [] @@ -90,8 +86,8 @@ export const useFetchIngredients = () => { }, [categories]) useEffect(() => { - if (!selectedIngredients) return - const initialSelectedItems: SelectedItems = {} + if (!ingredientsInMyBar) return + console.log('ingredientsInMyBar', ingredientsInMyBar) ingredientsInMyBar.forEach(({ name, id }) => { initialSelectedItems[id] = { name, @@ -101,7 +97,7 @@ export const useFetchIngredients = () => { setInitialSelectedItems(initialSelectedItems) setSelectedItems(initialSelectedItems) - }, [selectedIngredients]) + }, [ingredientsInMyBar]) return { searchQuery, diff --git a/src/hooks/useFetchMybar.ts b/src/hooks/useFetchMybar.ts index e4d031f..779ba35 100644 --- a/src/hooks/useFetchMybar.ts +++ b/src/hooks/useFetchMybar.ts @@ -1,6 +1,5 @@ import { useMutation, useQuery } from '@apollo/client' -import { useIsFocused } from '@react-navigation/native' -import { useEffect } from 'react' +import { useEffect, useState } from 'react' import { SectionDataType, SectionHeaderType } from '~/components' import { DELETE_FROM_MY_BAR } from '~/graphql/mutations/deleteFromMyBar' import { GET_MY_BAR } from '~/graphql/queries' @@ -22,35 +21,37 @@ export const useFetchMyBar = () => { error: myBarError, } = useQuery(GET_MY_BAR) - const isFocused = useIsFocused() + const [sectionsData, setSectionsData] = useState([]) + const [sectionsHeader, setSectionsHeader] = useState([]) + const [ingredientsInMyBar, setIngredientsInMyBar] = useState([]) useEffect(() => { - if (isFocused) { - // Refetch the data when the tab gains focus - myBarRefetch() - } - }, [isFocused, myBarRefetch]) - - let sectionsData: SectionDataType[][] = [] - let sectionsHeader: SectionHeaderType[] = [] - let ingredientsInMyBar: Ingredient[] = [] + if (!myBarData) return - for (let category of myBarData?.myBarCollection?.edges) { - const { node } = category + let newSectionsData = [] + let newSectionsHeader = [] + let newIngredientsInMyBar = [] - if (!my_bar?.hidden_category_ids?.includes(node?.id)) { - const data: Ingredient[] = JSON.parse(node?.data) + for (let category of myBarData?.myBarCollection?.edges) { + const { node } = category - ingredientsInMyBar = ingredientsInMyBar.concat(data) + if (!my_bar?.hidden_category_ids?.includes(node?.id)) { + const data = JSON.parse(node?.data) - sectionsData.push(data) - sectionsHeader.push({ - title: node?.title, - count: node?.count, - id: node?.title, - }) + newIngredientsInMyBar = newIngredientsInMyBar.concat(data) + newSectionsData.push(data) + newSectionsHeader.push({ + title: node?.title, + count: node?.count, + id: node?.title, + }) + } } - } + + setIngredientsInMyBar(newIngredientsInMyBar) + setSectionsData(newSectionsData) + setSectionsHeader(newSectionsHeader) + }, [myBarData, my_bar?.hidden_category_ids]) const [deleteFromMyBar] = useMutation(DELETE_FROM_MY_BAR) From 451bad9e7a1ce5a991141f3d53729999f911415c Mon Sep 17 00:00:00 2001 From: Milad Date: Tue, 26 Dec 2023 16:02:53 +0000 Subject: [PATCH 3/6] update my bar --- src/hooks/useFetchIngredients.ts | 1 - src/hooks/useFetchMybar.ts | 2 +- src/hooks/useFetchRecipeDetails.ts | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/hooks/useFetchIngredients.ts b/src/hooks/useFetchIngredients.ts index bfc2e45..8273b72 100644 --- a/src/hooks/useFetchIngredients.ts +++ b/src/hooks/useFetchIngredients.ts @@ -87,7 +87,6 @@ export const useFetchIngredients = () => { useEffect(() => { if (!ingredientsInMyBar) return - console.log('ingredientsInMyBar', ingredientsInMyBar) ingredientsInMyBar.forEach(({ name, id }) => { initialSelectedItems[id] = { name, diff --git a/src/hooks/useFetchMybar.ts b/src/hooks/useFetchMybar.ts index 779ba35..bd1f0e6 100644 --- a/src/hooks/useFetchMybar.ts +++ b/src/hooks/useFetchMybar.ts @@ -23,7 +23,7 @@ export const useFetchMyBar = () => { const [sectionsData, setSectionsData] = useState([]) const [sectionsHeader, setSectionsHeader] = useState([]) - const [ingredientsInMyBar, setIngredientsInMyBar] = useState([]) + const [ingredientsInMyBar, setIngredientsInMyBar] = useState([]) useEffect(() => { if (!myBarData) return diff --git a/src/hooks/useFetchRecipeDetails.ts b/src/hooks/useFetchRecipeDetails.ts index 1c6edc0..74de139 100644 --- a/src/hooks/useFetchRecipeDetails.ts +++ b/src/hooks/useFetchRecipeDetails.ts @@ -40,7 +40,7 @@ export const useFetchRecipeDetails = () => { const mergedRecipeIngredients = recipeIngredients .filter((recipeIngredient) => recipeIngredient?.ingredient) .map((recipeIngredient) => { - const inMyBar = ingredientsInMyBar.includes(recipeIngredient?.ingredient?.id) + const inMyBar = ingredientsInMyBar.find((i) => i.id === recipeIngredient?.ingredient?.id) return { ...recipeIngredient, inMyBar, From 684289244e7bd912ca34e7fa53da7709deb7ebd1 Mon Sep 17 00:00:00 2001 From: Milad Date: Tue, 26 Dec 2023 16:06:27 +0000 Subject: [PATCH 4/6] add types to my bar --- src/hooks/useFetchMybar.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/useFetchMybar.ts b/src/hooks/useFetchMybar.ts index bd1f0e6..bc5f22e 100644 --- a/src/hooks/useFetchMybar.ts +++ b/src/hooks/useFetchMybar.ts @@ -21,8 +21,8 @@ export const useFetchMyBar = () => { error: myBarError, } = useQuery(GET_MY_BAR) - const [sectionsData, setSectionsData] = useState([]) - const [sectionsHeader, setSectionsHeader] = useState([]) + const [sectionsData, setSectionsData] = useState([]) + const [sectionsHeader, setSectionsHeader] = useState([]) const [ingredientsInMyBar, setIngredientsInMyBar] = useState([]) useEffect(() => { From 29d3b786fcf9c96ef28eb22c2ee79b1d95cef1cd Mon Sep 17 00:00:00 2001 From: Milad Date: Tue, 26 Dec 2023 16:22:20 +0000 Subject: [PATCH 5/6] fix type errors --- src/hooks/useFetchMybar.ts | 2 +- src/hooks/useFetchRecipeDetails.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/hooks/useFetchMybar.ts b/src/hooks/useFetchMybar.ts index bc5f22e..0495091 100644 --- a/src/hooks/useFetchMybar.ts +++ b/src/hooks/useFetchMybar.ts @@ -21,7 +21,7 @@ export const useFetchMyBar = () => { error: myBarError, } = useQuery(GET_MY_BAR) - const [sectionsData, setSectionsData] = useState([]) + const [sectionsData, setSectionsData] = useState([]) const [sectionsHeader, setSectionsHeader] = useState([]) const [ingredientsInMyBar, setIngredientsInMyBar] = useState([]) diff --git a/src/hooks/useFetchRecipeDetails.ts b/src/hooks/useFetchRecipeDetails.ts index 74de139..5e54625 100644 --- a/src/hooks/useFetchRecipeDetails.ts +++ b/src/hooks/useFetchRecipeDetails.ts @@ -40,7 +40,7 @@ export const useFetchRecipeDetails = () => { const mergedRecipeIngredients = recipeIngredients .filter((recipeIngredient) => recipeIngredient?.ingredient) .map((recipeIngredient) => { - const inMyBar = ingredientsInMyBar.find((i) => i.id === recipeIngredient?.ingredient?.id) + const inMyBar = !!ingredientsInMyBar.find((i) => i.id === recipeIngredient?.ingredient?.id) return { ...recipeIngredient, inMyBar, From 4fbf23f6401471ab17b803440bd959abe65f9d33 Mon Sep 17 00:00:00 2001 From: Milad Date: Tue, 26 Dec 2023 16:29:02 +0000 Subject: [PATCH 6/6] update bar refetch --- src/app/(tabs)/my-bar.tsx | 16 +++++++++------- src/hooks/useFetchMatchedRecipes.ts | 11 ----------- 2 files changed, 9 insertions(+), 18 deletions(-) diff --git a/src/app/(tabs)/my-bar.tsx b/src/app/(tabs)/my-bar.tsx index a0e36fb..f343456 100644 --- a/src/app/(tabs)/my-bar.tsx +++ b/src/app/(tabs)/my-bar.tsx @@ -41,13 +41,6 @@ export default function MyBarScreen() { const { deleteFromMyBar, myBarRefetch, myBarLoading, sectionsData, sectionsHeader, myBarError } = useFetchMyBar() - useEffect(() => { - if (isFocused) { - // Refetch the data when the tab gains focus - myBarRefetch() - } - }, [isFocused, myBarRefetch]) - const { getRecipeMatch, partialMatchData, @@ -58,6 +51,15 @@ export default function MyBarScreen() { totalMatchError, } = useFetchMatchedRecipes() + useEffect(() => { + if (isFocused) { + // Refetch the data when the tab gains focus + myBarRefetch() + totalMatchRefetch() + partialMatchRefetch() + } + }, [isFocused, myBarRefetch]) + const renderIngredientItem = useCallback( ({ item }) => { if (!item.name) return diff --git a/src/hooks/useFetchMatchedRecipes.ts b/src/hooks/useFetchMatchedRecipes.ts index 331e989..e9de6c2 100644 --- a/src/hooks/useFetchMatchedRecipes.ts +++ b/src/hooks/useFetchMatchedRecipes.ts @@ -1,7 +1,5 @@ import { useQuery } from '@apollo/client' -import { useIsFocused } from '@react-navigation/native' import { router } from 'expo-router' -import { useEffect } from 'react' import { GetPartialMatchRecipesQuery, GetTotalmatchRecipesQuery } from '~/__generated__/graphql' import { CardProps } from '~/components' import { GET_PARTIAL_MATCH_RECIPES, GET_TOTAL_MATCH_RECIPES } from '~/graphql/queries' @@ -23,15 +21,6 @@ export const useFetchMatchedRecipes = () => { error: partialMatchError, } = useQuery(GET_PARTIAL_MATCH_RECIPES) - const isFocused = useIsFocused() - - useEffect(() => { - if (isFocused) { - totalMatchRefetch() - partialMatchRefetch() - } - }, [isFocused, totalMatchRefetch, partialMatchRefetch]) - const getRecipeMatch = ( matchedData: GetTotalmatchRecipesQuery | GetPartialMatchRecipesQuery, ): CardProps[] => {