fix: 🐛 remove circular dependencies

App.tsx

@@ -3,15 +3,15 @@
  */
 import React, { ReactElement } from 'react'
 import 'react-native-gesture-handler'
-import { Router } from '@greeneggs/navigation'
-import { AddRecipeStateProvider } from '@greeneggs/providers/add-recipe-state-provider'
-import { AuthProvider } from '@greeneggs/providers/auth-provider'
-import { CachedResourcesProvider } from '@greeneggs/providers/cached-resources-provider'
-import { EvaProvider } from '@greeneggs/providers/eva-provider'
-import { GraphQLProvider } from '@greeneggs/providers/graphql-provider'
-import { NotificationStateProvider } from '@greeneggs/providers/notification-state-provider'
-import { SearchStateProvider } from '@greeneggs/providers/search-state-provider'
-import { UserStateProvider } from '@greeneggs/providers/user-state-provider'
+import { AddRecipeStateProvider } from '@greeneggs/context/add-recipe-state-provider'
+import { AuthProvider } from '@greeneggs/context/auth-provider'
+import { CachedResourcesProvider } from '@greeneggs/context/cached-resources-provider'
+import { EvaProvider } from '@greeneggs/context/eva-provider'
+import { GraphQLProvider } from '@greeneggs/context/graphql-provider'
+import { NotificationStateProvider } from '@greeneggs/context/notification-state-provider'
+import { SearchStateProvider } from '@greeneggs/context/search-state-provider'
+import { UserStateProvider } from '@greeneggs/context/user-state-provider'
+import { Router } from '@greeneggs/navigation/routes/router'
 
 export default function App(): ReactElement {
   return (

src/providers/add-recipe-state-provider.tsx → src/context/add-recipe-state-provider.tsx

@@ -1,9 +1,7 @@
 /**
  * Author: Edward Jones
  */
-import React, { createContext, PropsWithChildren } from 'react'
-import { addRecipe, addRecipeVariables, RecipeInput } from '@greeneggs/types/graphql'
-import { IForm } from '@greeneggs/ui'
+import React, { PropsWithChildren } from 'react'
 import { useRecipeForm } from '@greeneggs/screens/add-recipe/use-recipe-form'
 import { AddRecipeAllergies } from '@greeneggs/screens/add-recipe/add-recipe-allergies'
 import { AddRecipeCategories } from '@greeneggs/screens/add-recipe/add-recipe-categories'
@@ -12,22 +10,9 @@ import { AddRecipeDiets } from '@greeneggs/screens/add-recipe/add-recipe-diets'
 import { AddRecipeDirections } from '@greeneggs/screens/add-recipe/add-recipe-directions'
 import { AddRecipeIngredients } from '@greeneggs/screens/add-recipe/add-recipe-ingredients'
 import { PublishRecipe } from '@greeneggs/screens/add-recipe/publish-recipe'
-import { ISteps, Step, useSteps } from '@greeneggs/screens/add-recipe/use-steps'
-import { useFieldArray, UseFieldArrayReturn } from 'react-hook-form'
-
-export interface AddRecipeContextInterface {
-  form?: IForm<RecipeInput, addRecipe, addRecipeVariables>
-  steps?: ISteps
-  categoriesFieldArray?: UseFieldArrayReturn<RecipeInput, 'categories', 'id'>
-  ingredientsFieldArray?: UseFieldArrayReturn<RecipeInput, 'ingredients', 'id'>
-  stepsFieldArray?: UseFieldArrayReturn<RecipeInput, 'steps', 'id'>
-  allergiesFieldArray?: UseFieldArrayReturn<RecipeInput, 'allergies', 'id'>
-  dietsFieldArray?: UseFieldArrayReturn<RecipeInput, 'diets', 'id'>
-}
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const AddRecipeContext = createContext<AddRecipeContextInterface>({})
-
+import { Step, useSteps } from '@greeneggs/screens/add-recipe/use-steps'
+import { useFieldArray } from 'react-hook-form'
+import { AddRecipeContext } from './index'
 /**
  * State provider that lets all child components control the state of a recipe form.
  */

src/providers/auth-provider.tsx → src/context/auth-provider.tsx

@@ -1,17 +1,9 @@
 /**
  * Author: Edward Jones
  */
-import React, { useState, Dispatch, SetStateAction, createContext, PropsWithChildren } from 'react'
+import React, { useState, PropsWithChildren } from 'react'
 import * as SecureStore from 'expo-secure-store'
-
-export type Token = string | undefined | null
-export type SetToken = Dispatch<SetStateAction<Token>> | undefined
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const AuthContext = createContext({
-  token: undefined as Token,
-  setToken: undefined as SetToken,
-})
+import { AuthContext, Token } from './index'
 
 /**
  * State provider that lets all child components control the

src/providers/graphql-provider.tsx → src/context/graphql-provider.tsx

@@ -5,8 +5,7 @@ import React, { PropsWithChildren, useContext } from 'react'
 import { ApolloClient, ApolloLink, ApolloProvider, InMemoryCache } from '@apollo/client'
 import { setContext } from '@apollo/client/link/context'
 import { createUploadLink } from 'apollo-upload-client'
-
-import { AuthContext } from './auth-provider'
+import { AuthContext } from './index'
 
 /**
  * Provider that lets all child components use apollo queries and mutations.

src/context/index.ts

@@ -0,0 +1,95 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { Dispatch, SetStateAction, createContext } from 'react'
+import {
+  addRecipe,
+  addRecipeVariables,
+  NotificationCount,
+  RecipeInput,
+  RecipeFilter,
+  Sort,
+  Me_me_data,
+} from '@greeneggs/types/graphql'
+import { ISteps } from '@greeneggs/screens/add-recipe/use-steps'
+import { IForm } from '@greeneggs/ui/form'
+import { UseFieldArrayReturn } from 'react-hook-form'
+import { ApolloQueryResult, OperationVariables } from '@apollo/client'
+
+export type Token = string | undefined | null
+export type SetToken = Dispatch<SetStateAction<Token>> | undefined
+export interface AddRecipeContextInterface {
+  form?: IForm<RecipeInput, addRecipe, addRecipeVariables>
+  steps?: ISteps
+  categoriesFieldArray?: UseFieldArrayReturn<RecipeInput, 'categories', 'id'>
+  ingredientsFieldArray?: UseFieldArrayReturn<RecipeInput, 'ingredients', 'id'>
+  stepsFieldArray?: UseFieldArrayReturn<RecipeInput, 'steps', 'id'>
+  allergiesFieldArray?: UseFieldArrayReturn<RecipeInput, 'allergies', 'id'>
+  dietsFieldArray?: UseFieldArrayReturn<RecipeInput, 'diets', 'id'>
+}
+
+export interface NotificationState {
+  unreadCount: number
+}
+
+export const defaultNotificationState: NotificationState = {
+  unreadCount: 0,
+}
+
+export interface NotificationContextInterface {
+  notificationState: NotificationState
+  setNotificationState?: (notificationState: NotificationState) => void
+  refetchNotificationState?: (
+    variables?: Partial<OperationVariables> | undefined
+  ) => Promise<ApolloQueryResult<NotificationCount>>
+}
+
+export interface SearchState {
+  query?: string
+  filter: RecipeFilter
+  sort: Sort
+}
+
+export type Me = Me_me_data | undefined
+export type SetMe = ((me: Me) => void) | undefined
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const UserContext = createContext({
+  me: undefined as Me,
+  setMe: undefined as SetMe,
+})
+
+export const defaultSearchState: SearchState = {
+  query: undefined,
+  filter: {
+    ingredients: undefined,
+    categories: undefined,
+    allergies: undefined,
+    diets: undefined,
+    cookTime: undefined,
+    user: undefined,
+  },
+  sort: Sort.RELEVANT,
+}
+
+export interface ISearchContext {
+  searchState: SearchState
+  setSearchState?: (searchState: SearchState) => void
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const SearchContext = createContext<ISearchContext>({
+  searchState: defaultSearchState,
+  setSearchState: undefined,
+})
+
+export const NotificationContext = createContext<NotificationContextInterface>({
+  notificationState: defaultNotificationState,
+  setNotificationState: undefined,
+  refetchNotificationState: undefined,
+})
+
+export const AddRecipeContext = createContext<AddRecipeContextInterface>({})
+
+export const AuthContext = createContext({
+  token: undefined as Token,
+  setToken: undefined as SetToken,
+})

src/providers/notification-state-provider.tsx → src/context/notification-state-provider.tsx

@@ -1,33 +1,11 @@
 /**
  * Author: Edward Jones
  */
-import React, { useState, createContext, useEffect, PropsWithChildren } from 'react'
+import React, { useState, useEffect, PropsWithChildren } from 'react'
 import { NotificationCount } from '@greeneggs/types/graphql'
-import { ApolloQueryResult, OperationVariables, useQuery } from '@apollo/client'
+import { useQuery } from '@apollo/client'
 import { Queries } from '@greeneggs/graphql'
-
-export interface NotificationState {
-  unreadCount: number
-}
-
-export const defaultNotificationState: NotificationState = {
-  unreadCount: 0,
-}
-
-export interface NotificationContextInterface {
-  notificationState: NotificationState
-  setNotificationState?: (notificationState: NotificationState) => void
-  refetchNotificationState?: (
-    variables?: Partial<OperationVariables> | undefined
-  ) => Promise<ApolloQueryResult<NotificationCount>>
-}
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const NotificationContext = createContext<NotificationContextInterface>({
-  notificationState: defaultNotificationState,
-  setNotificationState: undefined,
-  refetchNotificationState: undefined,
-})
+import { defaultNotificationState, NotificationContext, NotificationState } from './index'
 
 /**
  * Provider that lets all child components access the notification state

src/context/search-state-provider.tsx

@@ -0,0 +1,13 @@
+/**
+ * Author: Edward Jones
+ */
+import React, { useState, PropsWithChildren } from 'react'
+import { defaultSearchState, SearchContext, SearchState } from './index'
+/**
+ * Provider that lets all child components access the search state, including query, sorting and filtering.
+ */
+export function SearchStateProvider({ children }: PropsWithChildren<object>) {
+  const [searchState, setSearchState] = useState<SearchState>(defaultSearchState)
+
+  return <SearchContext.Provider value={{ searchState, setSearchState }}>{children}</SearchContext.Provider>
+}

src/providers/user-state-provider.tsx → src/context/user-state-provider.tsx

@@ -1,19 +1,11 @@
 /**
  * Author: Edward Jones
  */
-import React, { useState, createContext, useEffect, PropsWithChildren } from 'react'
-import { Me as MeQuery, Me_me_data } from '@greeneggs/types/graphql'
+import React, { useState, useEffect, PropsWithChildren } from 'react'
+import { Me as MeQuery } from '@greeneggs/types/graphql'
 import { useQuery } from '@apollo/client'
 import { Queries } from '@greeneggs/graphql'
-
-type Me = Me_me_data | undefined
-type SetMe = ((me: Me) => void) | undefined
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export const UserContext = createContext({
-  me: undefined as Me,
-  setMe: undefined as SetMe,
-})
+import { Me, UserContext } from './index'
 
 /**
  * Provider that lets all child components access details about the current logged in user.

src/navigation/bottom-tab-bar.tsx

@@ -14,9 +14,9 @@ import {
 } from '@ui-kitten/components'
 import Svg, { Circle } from 'react-native-svg'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { HideOnKeyboard } from '@greeneggs/ui'
-import { NotificationContext } from '@greeneggs/providers/notification-state-provider'
-import { AddRecipeContext } from '@greeneggs/providers/add-recipe-state-provider'
+import { HideOnKeyboard } from '@greeneggs/ui/hide-on-keyboard'
+import { NotificationContext } from '@greeneggs/context'
+import { AddRecipeContext } from '@greeneggs/context'
 
 const styles = StyleSheet.create({
   primary: {

src/navigation/navigation.tsx

@@ -4,8 +4,13 @@
 import React from 'react'
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
 
-import { NotFoundScreen, AddRecipe, Home, MyProfile, SavedRecipes, Notifications } from '../screens'
 import { BottomTabBar } from './bottom-tab-bar'
+import { AddRecipe } from '@greeneggs/screens/add-recipe/add-recipe'
+import { Home } from '@greeneggs/screens/home/home'
+import { NotFoundScreen } from '@greeneggs/screens/not-found-screen'
+import { Notifications } from '@greeneggs/screens/notifications'
+import { MyProfile } from '@greeneggs/screens/profile/my-profile'
+import { SavedRecipes } from '@greeneggs/screens/saved-recipes'
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const { Navigator, Screen } = createBottomTabNavigator()