07 Context

Context

Create Item Type

code ./types/Item.ts

import { Rekognition, AWSError } from "aws-sdk";

export type Item = {
  id: string;
  createdAt: string;
  labels?: Rekognition.DetectLabelsResponse;
  error?: AWSError;
};

Create context

code ./frontend/src/contexts/AppContext.tsx

import React, { createContext, useContext, useState } from "react";
import { Item } from "../../../types/Item";

type AppContextInterface = {
  uploadId?: string;
  setUploadId: Function;
  selectedItem?: Item;
  setSelectedItem: Function;
};

const AppContext = createContext<AppContextInterface>({
  setUploadId: () => {},
  setSelectedItem: () => {},
});

type AppContextProviderProps = {
  children: React.ReactNode;
};

export const AppContextProvider: React.FC<AppContextProviderProps> = ({
  children,
}) => {
  const [uploadId, setUploadId] = useState();
  const [selectedItem, setSelectedItem] = useState<Item>();

  return (
    <AppContext.Provider
      value={{ uploadId, setUploadId, selectedItem, setSelectedItem }}
    >
      {children}
    </AppContext.Provider>
  );
};

export const useAppContext = () => useContext(AppContext);

Add context to the app

code ./frontend/src/App.tsx

import React from "react";
import { AppContextProvider } from "./contexts/AppContext";
import { Header } from "./components/Header";

function App() {
  return (
    <div id="app">
      <AppContextProvider>
        <Header />
        <div className="content"></div>
      </AppContextProvider>
    </div>
  );
}

export default App;

Commit

git add .
git commit -m "Context"

Next step

Upload UI