TOAST UI

import React from "react";
import ReactDOM from "react-dom";
import "./styles/tailwind.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "@apollo/react-hooks";
import { resolvers } from "./resolvers";
import { InMemoryCache } from "apollo-cache-inmemory";

const cache = new InMemoryCache();

const client = new ApolloClient({
  cache,
  uri: process.env.REACT_APP_API_ENDPOINT || "http://localhost:4000/graphql",
  resolvers,
  onError: ({ networkError, graphQLErrors }) => {
    if (graphQLErrors) {
      console.log("graphQLErrors", graphQLErrors[0]);
    }
    console.log("networkError", networkError);
  },
}); //상태 초기화를 수행할 위치
cache.writeData({
  data: {
    formData: { date: "", email: "", customer: [], __typename: "formData" },
  },
});

import { GET_FORM_DATA } from "./graphql/Queries";

export const resolvers = {
  Mutation: {
    updateFormData: (parent, args, context, info) => {
      const queryResult = context.cache.readQuery({ query: GET_FORM_DATA });
      const { formData } = queryResult;
      if (queryResult) {
        const data = {
          formData: {
            date: args.date,
            email: args.email,
            customer: args.customer,
            __typename: formData["__typename"],
          },
        };

        context.cache.writeQuery({ query: GET_FORM_DATA, data });
        return data.formData;
      }
      return [];
    },
  },
};

import gql from "graphql-tag";

export const GET_FORM_DATA = gql`
  query GET_FORM_DATA {
    formData @client {
      date
      email
      customer
    }
  }
`;

import gql from "graphql-tag";

export const UPDATE_FORM_DATA = gql`
  mutation UPDATE_FORM_DATA(
    $date: String
    $email: String
    $customer: CustomerInput
  ) {
    updateFormData(date: $date, email: $email, customer: $customer) @client
  }
`;

import React, { useState } from "react";
import { UPDATE_FORM_DATA } from "../../graphql/Mutations";
import { GET_FORM_DATA } from "../../graphql/Queries";
import { useMutation, useQuery } from "@apollo/react-hooks";

const Customers = (props) => {
  const [customers, setCustomers] = useState([]);
  const { data } = useQuery(GET_FORM_DATA);
  const [mutate] = useMutation(UPDATE_FORM_DATA);

  const addCustomer = () => {
    const o = [...customers];
    o.push({
      name: null,
      physioScore: null,
      surname: null,
      passportNumber: null,
      country: null,
    });

    setCustomers(o);
  };

  const updateCustomer = ({ index, field, value }) => {
    const o = [...customers];
    o[index][field] = value;
    mutate({
      variables: {
        email: data.formData.email,
        date: data.formData.date,
        customer: o,
      },
    });

    setCustomers(o);
  };

  const removeCustomer = (index) => {
    const o = [...customers];
    o.splice(index, 1);
    setCustomers(o);
  };

  return (
    <>
    //...
    </> 
  );
}

//atom.js
import {atom} from "recoil";

const driverState = atom({
  key: "driverState", 
  default: ["Max Verstappen", "Lando Norris"]
}); 
const circuitState = atom({  key: "circuitState",  default: [],}); 
const singleDriverState = atom(( key: "singleDriverState",  default: {},});

export { driverState, circuitState, singleDriverState };

import React from "react";
import { useRecoilValue } from "recoil";
import { driverState } from "../state/atoms";
import HeadingOne from "../components/HeadingOne";
const Index = (props) => {
  const drivers = useRecoilValue(driverState);
  return (
    <>
      <HeadingOne className="text-center text-blue-500">
        Recoil 상태 관리 데모
      </HeadingOne>
      {drivers.map((driver, index) => (
        <div
          className="cursor-pointer"
          key={index}
          onClick={() => props.navigate(`/driver/${driver.split(" ")[1]}`)}
        >
          {driver}
        </div>
      ))}
    </>
  );
};

export default Index;

import {selectorFamily } from "recoil";
import axios from "axios";
import { singleDriverState } from "./atoms";
const driverQuery = selectorFamily({
  key: "driver",
  get: (driverName) => async () => {
    const driverResponse = await axios.get(
      `http://ergast.com/api/f1/drivers/${driverName}.json`
    );
    return driverResponse.data.MRData.DriverTable.Drivers[0];
  },
  set: ({ set }, newValue) => set(singleDriverState, newValue),
});

export {driverQuery };

import { createSlice } from "@reduxjs/toolkit";
import { setNewTitle } from "../reducers/layoutReducers";
export const layoutSlice = createSlice({
  name: "layout",
  initialState: {
    pageHeader: "Page",
  },
  reducers: {
    setPageHeader: (state, action) => setNewTitle(state, action),
  },
});

export const { setPageHeader } = layoutSlice.actions;

export default layoutSlice.reducer;

export const setNewTitle = (state, action) => {
  state.pageHeader = action.payload;
  return state;
};

import React, { useEffect } from "react";
import { useSelector } from "react-redux";
import Routes from "./routes";
const App = () => {
  const title = useSelector((state) => state.layout.pageHeader);
  return (
    <div className="text-center">
      {title}
      <Routes />
    </div>
  );
};
export default App;

import React, { useEffect } from "react";
import { useDispatch } from "react-redux";
import { setPageHeader } from "../slices/layoutSlice";
import HeadingOne from "../components/HeadingOne";

const Index = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(setPageHeader("index"));
  }, []);
  return (
    <>
      <HeadingOne className="text-center text-blue-500">
        이 앱의 메인 페이지입니다!
      </HeadingOne>
    </>
  );
};

export default Index;

import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { addMountain } from "../slices/mountainsSlice";
import { setPageHeader } from "../slices/layoutSlice";

const Mountains = (props) => {
  const [mountainName, setMountainName] = useState("");

  const mountains = useSelector((state) => state.mountain.mountains);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(setPageHeader("산 목록"));
  }, []);

  return (
    <div className="grid  grid-rows-2 place-items-center">
      <div>
        <input
          className="border border-pink-500 "
          onChange={(e) => setMountainName(e.currentTarget.value)}
        />
        <button
          className="rounded-lg bg-red-600 px-2 py-2 ml-3 text-red-200 "
          onClick={() => dispatch(addMountain(mountainName))}
        >
          산 추가
        </button>
      </div>

      <div className="flex flex-col">
        {mountains.map((mountain, idx) => (
          <p key={idx}>{mountain}</p>
        ))}
      </div>
    </div>
  );
};

export default Mountains;

export const addNewMountain = (state, action) => {
  state.mountains.push(action.payload);
  return state;
};