Merge pull request #175 from tahmid-saj/dev-ts-nutrient-predictor-con…

…text

migrating nutrient predictor context to ts

src/contexts/shared/nutrient-predictor/nutrient-predictor.context.js → src/contexts/shared/nutrient-predictor/nutrient-predictor.context.tsx

@@ -1,29 +1,30 @@
-import { createContext, useState, useEffect } from "react";
+import { createContext, useState, useEffect, FC } from "react";
 
 import { validateImgPath } from "../../../utils/validations/nutrient-predictor.validations";
 import { getFoodObjectDetection, getMealPredictions, getNutrientPredictions } from "../../../utils/api-requests/nutrient-predictor.requests";
 
 import { NUTRIENT_PREDICTOR_ENUMS } from "../../../utils/constants/nutrient-predictor.constants"
 
+import { NutrientPredictorContextType, NutrientPredictorProviderProps, ImageWithPrediction, NutrientPrediction,
+  Macronutrients, Micronutrients
+} from "./nutrient-predictor.types"
+
 // helper functions
 
-const updateImageHelper = (imageAndPrediction, imgPath) => {
+const updateImageHelper = (imageAndPrediction: ImageWithPrediction | undefined, imgPath: string): ImageWithPrediction | undefined => {
   // TODO: need validation to check if imgPath is valid and an image
   if (validateImgPath(imgPath) === true) {
     return imageAndPrediction
   }
 
-
-
   return {
     ...imageAndPrediction,
     imagePath: String(imgPath),
-  };
+  } as ImageWithPrediction
 };
 
-const updateImageAndPredictionHelper = async (imageAndPrediction, imgPath, imageInputType, uploadedImage) => {
-
-
+const updateImageAndPredictionHelper = async (imageAndPrediction: ImageWithPrediction | undefined, imgPath: string, 
+  imageInputType: string, uploadedImage: string): Promise<ImageWithPrediction | undefined> => {
 
   // TODO: need validation to check if imgPath and img are valid and an image
   if (validateImgPath(imgPath) === true) {
@@ -38,22 +39,20 @@ const updateImageAndPredictionHelper = async (imageAndPrediction, imgPath, image
     predictionResponse = await getMealPredictions(imgPath);
   }
 
-
-
   return {
     imagePath: String(imgPath),
     image: imageInputType,
     predictionDescription: predictionResponse
   };
 }
 
-const detectNutrientsHelper = async (mealDescription) => {
+const detectNutrientsHelper = async (mealDescription: string): Promise<NutrientPrediction[]> => {
   return getNutrientPredictions(mealDescription)
 }
 
-export const NutrientPredictorContext = createContext({
+export const NutrientPredictorContext = createContext<NutrientPredictorContextType>({
   predictionInputType: "",
-  imageAndPrediction: {},
+  imageAndPrediction: undefined,
   // imageAndPrediction structure
   // {
   //   imagePath: "path to image",
@@ -88,38 +87,38 @@ export const NutrientPredictorContext = createContext({
   updateImageAndPrediction: () => {},
 });
 
-export const NutrientPredictorProvider = ({ children }) => {
-  const [predictionInputType, setPredictionInputType] = useState("")
-  const [imageAndPrediction, setImageAndPrediction] = useState({});
-  const [nutrientPredictions, setNutrientPredictions] = useState([])
+export const NutrientPredictorProvider: FC<NutrientPredictorProviderProps> = ({ children }) => {
+  const [predictionInputType, setPredictionInputType] = useState<string>("")
+  const [imageAndPrediction, setImageAndPrediction] = useState<ImageWithPrediction | undefined>(undefined);
+  const [nutrientPredictions, setNutrientPredictions] = useState<NutrientPrediction[]>([])
 
   // useEffect(() => {
   //   
   // }, [imageAndPrediction]);
 
-  const updateImage = (imgPath) => {
+  const updateImage = (imgPath: string) => {
     setImageAndPrediction(updateImageHelper(imageAndPrediction, imgPath));
   };
 
-  const updateImageAndPrediction = async (imgPath, imageInputType, uploadedImage) => {
+  const updateImageAndPrediction = async (imgPath: string, imageInputType: string, uploadedImage: string): Promise<void> => {
     if (imageInputType === NUTRIENT_PREDICTOR_ENUMS.image) {
       setPredictionInputType(NUTRIENT_PREDICTOR_ENUMS.image)
       const updateImageAndPredictionResponse = await updateImageAndPredictionHelper(imageAndPrediction, imgPath, imageInputType, uploadedImage)
 
       setImageAndPrediction(updateImageAndPredictionResponse);
 
-      await detectNutrients(updateImageAndPredictionResponse.predictionDescription, NUTRIENT_PREDICTOR_ENUMS.image)
+      await detectNutrients(updateImageAndPredictionResponse?.predictionDescription!, NUTRIENT_PREDICTOR_ENUMS.image)
     } else if (imageInputType === NUTRIENT_PREDICTOR_ENUMS.url) {
       setPredictionInputType(NUTRIENT_PREDICTOR_ENUMS.url)
-      const updateImageAndPredictionResponse = await updateImageAndPredictionHelper(imageAndPrediction, imgPath, imageInputType)
+      const updateImageAndPredictionResponse = await updateImageAndPredictionHelper(imageAndPrediction, imgPath, imageInputType, uploadedImage)
 
       setImageAndPrediction(updateImageAndPredictionResponse);
 
-      await detectNutrients(updateImageAndPredictionResponse.predictionDescription, NUTRIENT_PREDICTOR_ENUMS.url)
+      await detectNutrients(updateImageAndPredictionResponse?.predictionDescription!, NUTRIENT_PREDICTOR_ENUMS.url)
     }
   };
 
-  const detectNutrients = async (mealDescription, inputType) => {
+  const detectNutrients = async (mealDescription: string, inputType: string): Promise<void> => {
     setPredictionInputType(inputType)
     const resNutrientPredictions = await detectNutrientsHelper(mealDescription)
     setNutrientPredictions(resNutrientPredictions)

src/contexts/shared/nutrient-predictor/nutrient-predictor.types.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from "react";
+
+// nutrient predictor types
+
+export interface NutrientPredictorContextType {
+  predictionInputType: string;
+  imageAndPrediction: ImageWithPrediction | undefined;
+  nutrientPredictions: NutrientPrediction[];
+
+  updateImage: (mealDescription: string, inputType: string) => void;
+  updateImageAndPrediction: (imgPath: string, imageInputType: string, uploadedImage: string) => void;
+}
+
+export interface NutrientPredictorProviderProps {
+  children: ReactNode;
+}
+
+export type ImageWithPrediction = {
+  imagePath: string;
+  image: string;
+  predictionDescription: string;
+}
+
+export type NutrientPrediction = {
+  name: string;
+  servingSizeG: number;
+  calories: number;
+  macronutrients: Macronutrients;
+  miicronutrients: Micronutrients;
+}
+
+export type Macronutrients = {
+  carbohydratesTotalG: number;
+  proteinG: number;
+  fatTotalG: number;
+  fatSaturatedG: number;
+}
+
+export type Micronutrients = {
+  sodiumG: number;
+  potassiumG: number;
+  cholesterolMg: number;
+  fiberG: number;
+  sugarG: number;
+}

src/index.js

@@ -7,7 +7,6 @@ import './index.scss';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
-import { ResponsiveStylingProvider } from './contexts/shared/responsive-styling/responsive-styling.context';
 import { UserProvider } from './contexts/shared/user/user.context';
 import { ChatBotProvider } from './contexts/shared/chatbot/chatbot.context';
 import { NutrientPredictorProvider } from './contexts/shared/nutrient-predictor/nutrient-predictor.context';
@@ -35,7 +34,6 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     {/* <ApolloProvider client={ client }> */}
-      <ResponsiveStylingProvider>
         <Provider store={ store }>
           {/* <PersistGate loading={ null } persistor={ persistor }> */}
             <BrowserRouter>
@@ -63,7 +61,6 @@ root.render(
             </BrowserRouter>
           {/* </PersistGate> */}
         </Provider>
-      </ResponsiveStylingProvider>
     {/* </ApolloProvider> */}
   </React.StrictMode>
 );