Skip to content

Dette er en enkel workshop som viser grunnleggende bruk av recoil js

License

Notifications You must be signed in to change notification settings

ingfo/react-recoil-workshop

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React recoil workshop

Dette er en workshop som viser grunnleggende bruk av recoil js gjennom å lage en enkel todo app.

Kom i gang

Det finnes en tilhørende presentasjon som det kan være greit å se gjennom for å komme i gang med denne workshopen. Ellers er det bare å følge trinnene nedenfor for å komme i gang!

Dette må du ha før du starter

For å komme i gang med workshopen må du ha node og npm installert. Her en noen guides som viser deg hvordan du installerer dette, om du ikke har gjort det alt:

Starte applikasjonen

  1. Last ned repoet ved å kjøre kommandoen git clone https://github.com/robertkittilsen/react-recoil-workshop i terminalen.
  2. Naviger til root-folderen ved å kjøre cd react-recoil-workshop
  3. Start appen ved å kjøre npm install og deretter npm start.
  4. Åpne koden i din favoritteditor, naviger til src/App og følg instruksjonene derifra!

Nyttige lenker

Frontend

Applikasjonen er skrevet i React og TypeScript med UI komponenter fra Chakra. Åpne App.tsx for å se på applikasjonen.

Scripts

Her beskriver vi noen scripts som man kan kjøre i terminalen når man er i rotmappen (der man finner ´package.json´ ).

npm install

Installerer alle avhengigheter som trengs for å kjøre applikasjonen lokalt.

npm start

Starter applikasjonen på adressen http://localhost:3000. Siden vil automatisk bli oppdatert når man gjør en endring i koden.

Oppgaver

I denne workshopen skal vi bygge en enkel todo liste app som bruker Recoil js til å håndtere state. Appen vil kunne gjøre følgende:

  • Legge til en todo
  • Fjerne en todo
  • Markere en todo som ferdig
  • Filtrere todo items basert på om de er ferdig eller ikke
  • Se statistikk om todo listen.

Gjennom å gjøre dette vil vi lære oss om atomer, selektorer og hooks fra Recoil APIet.

Oppgave 1: Oppstart av Todo app

Kjør npm start for å se at appen kjører. Du vil nå se et grunnleggende eksempel på bruk av Recoil. Se gjennom koden for UseRecoilStateExample, Atom Example og Selector Example for å se hvordan disse fungerer.

💡 TodoApp-komponenten som brukes i oppgavene finner du her: src/TodoListApp.tsx. Husk å kommentere inn denne i App.tsx og fjern Examples før du starter på videre oppgaver.

Oppgave 2 a)

🏆 For at recoil skal fungere må vi legge til RecoilRoot rundt hele appen. Dette gjør vi ved å importere RecoilRoot fra recoil og legge den rundt TodoListApp i App.tsx.

🚨 Løsning
import { RecoilRoot } from "recoil";

<RecoilRoot>
  <TodoListApp />
</RecoilRoot>

Oppgave 2 b)

🏆 La oss lage et atom kalt todoListState som vil holde todo-listen vår:

Gå til src/recoil/atoms/todoListAtom.ts og legg til et atom kalt todoListState som har en tom liste som default verdi og "TodoList" som nøkkel.

🚨 Løsning
export const todoListState = atom<TodoItem[]>({
  key: 'TodoList',
  default: [],
});

Oppgave 3 a)

💡 Flott, du har laget ditt første atom! Vi gir atomet en unik nøkkel og setter default verdien til et tomt array. For å lese innholdet til dette atomet kan vi bruke useRecoilValue hooken.

🏆 Ta i bruk useRecoilValue med todoListState som parameter i TodoList.tsx. Kall variabelen todoList.

🚨 Løsning
import { useRecoilValue } from "recoil";
import { todoListState } from "../recoil/atoms/todoListAtom";
import TodoItemCreator from "./TodoItemCreator";
import TodoItemView from "./TodoItem";

const TodoList = () => {
  // Her leser vi innholdet til todoListState
  const todoList = useRecoilValue(todoListState);
  return (
    <>
      <TodoItemCreator />
      {todoList.map((todoItem) => (
        <TodoItemView item={todoItem} key={todoItem.id} />
      ))}
    </>
  );
};

Oppgave 3 b)

💡 For å lage nye todo items trenger vi en setter funksjon som skal oppdatere innholdet i todoListState. Vi kan bruke useSetRecoilState for å få tak i denne funksjonen.

🏆 Lag en setTodoList setter-funksjon ved bruk av denne hooken i TodoItemCreator.tsx. Kommenter inn addItem() og knappen som bruker den i return.

🚨 Løsning
const setTodoList = useSetRecoilState(todoListState);

const addItem = () => {
  setTodoList((oldTodoList) => [
    ...oldTodoList,
    {
      id: getId(),
      text: inputValue,
      isComplete: false
    }
  ]);
  setInputValue("");
};

return (
  <Box my={4}>
    <InputGroup>
      <Input type="text" value={inputValue} onChange={onChange} />
      <Button onClick={addItem} ml={8}>Legg til</Button>
    </InputGroup>
  </Box>
);

💡 Vi bruker useSetRecoilState for å få tak i en setter funksjon som vi kan bruke for å oppdatere todoListState. Vi bruker denne setter funksjonen for å oppdatere todoListState med en ny todo item.

Oppgave 3 c)

🏆 Ta i bruk useRecoilState for todoListState i stedet for useState i TodoItemView.tsx

🚨 Løsning
const [todoList, setTodoList] = useRecoilState<TodoItem[]>(todoListState);

💡 TodoItemView komponenten viser verdien av todo-objektet og den tillater deg å bytte tekst og slette objektet.

💡 Vi bruker useRecoilState til å lese todoListState og til å få en setter-funksjon som vi bruker til å oppdatere todo teksten, markere den som ferdig eller slette den.

Oppgave 4 a) Filtrere todo listen

💡 For å filtrere todo listen vår kan vi bruke en selector. En selector lar oss definere en funksjon som tar inn ett eller flere atomer som argument og returnerer en verdi.

💡 Filter alternativene våre er: "Show All", "Show Completed" og "Show Uncompleted". Default verdien er "Show All".

🏆 Lag et atom i todoListAtom.ts som heter todoListFilterState med nøkkel "TodoListFilter" og default verdien "Show All".

🚨 Løsning
  export const todoListFilterState = atom({
    key: 'TodoListFilter',
    default: 'Show All',
  });

💡 Ved å bruke todoListFilterState og todoListState kan vi bygge en filteredTodoListState selector som returnerer en filtrert liste.

🏆 Kommenter inn denne selectoren i todoListSelector.ts:

  const filteredTodoListState = selector({
    key: 'FilteredTodoList',
    get: ({ get }) => {
      const filter = get(todoListFilterState);
      const list = get(todoListState);

      switch (filter) {
        case 'Show Completed':
          return list.filter((item) => item.isComplete);
        case 'Show Uncompleted':
          return list.filter((item) => !item.isComplete);
        default:
          return list;
      }
    },
  });

💡 filteredTodoListState følger med på to avhengigheter: todoListFilterState og todoListState. Når en av disse to endrer seg vil filteredTodoListState oppdateres.

🏆 Vis den filtrerte todo listen ved å endre components/TodoList.tsx til å bruke filteredTodoListState i stedet for todoListState.

  const todoList = useRecoilValue(filteredTodoListState);

Oppgave 4 b) Gjør det mulig å endre filter.

Slik det er nå er default verdien "Show all" og det er ikke mulig å endre filteret. Vi kan ta i bruk useRecoilState i TodoListFilters.tsx for å få tak i en setter funksjon som vi kan bruke for å oppdatere todoListFilterState og en getter funksjon slik at vi kan vise nåværende filter.

🏆Implementer useRecoilState for todoListFilterState i TodoListFilters.tsx istedenfor useState og kommenter inn Spacer og TodoListFilters i TodoList.tsx

🚨 Løsning
const [filter, setFilter] = useRecoilState(todoListFilterState);

Med bare noen få linjer kode har vi klart å implementere filtrering! Vi vil bruke de samme konseptene for å implementere TodoListStats komponenten.

Oppgave 5) Vise statistikk om todo listen

🏆 Kommenter inn todoListStatsState i todoListSelector.ts:

  const todoListStatsState = selector({
    key: 'TodoListStats',
    get: ({ get }) => {
      const todoList = get(todoListState);
      const totalNum = todoList.length;
      const totalCompletedNum = todoList.filter((item) => item.isComplete).length;
      const totalUncompletedNum = totalNum - totalCompletedNum;
      const percentCompleted = totalNum === 0 ? 0 : totalCompletedNum / totalNum;

      return {
        totalNum,
        totalCompletedNum,
        totalUncompletedNum,
        percentCompleted,
      };
    },
  });

💡 components/TodoListStatsView komponenten viser antall todo items og antall ferdige todo items.

🏆 Ta i bruk useRecoilValue i TodoListStatsView.tsx for å koble til todoListStatsState selektoren. Kommenter den inn i TodoList.tsx.

🚨 Løsning
const {
  totalNum,
  totalCompletedNum,
  totalUncompletedNum,
  percentCompleted,
} = useRecoilValue(todoListStatsState);

Avslutning

Og med det så har vi en fullverdig todo app! 🎉

For å oppsummere; vi har laget en todo liste app som møter alle kravene våre:

  • Vi kan legge til todo items
  • Vi kan fjerne todo items
  • Vi kan markere todo items som ferdig
  • Vi kan filtrere todo items basert på om de er ferdig eller ikke
  • Vi kan se statistikk over todo listen vår

Håper du har fått et godt inntrykk av hvordan Recoil fungerer og at du har lyst til å bruke det i dine egne prosjekter 🚀

About

Dette er en enkel workshop som viser grunnleggende bruk av recoil js

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 89.4%
  • HTML 10.6%