Skip to content

Instantly share code, notes, and snippets.

@guillaumewuip
guillaumewuip / index.tsx
Last active November 12, 2020 07:13
State and Store in frontend codebase - State example - index
import * as React from "react";
import { render } from "react-dom";
import App from "./App";
import { init } from "./service";
const rootElement = document.getElementById("root");
render(<App />, rootElement);
init();
@guillaumewuip
guillaumewuip / App.tsx
Created November 12, 2020 07:10
State and Store in frontend codebase - State example - App
import * as React from "react";
import { useState } from "@iadvize-oss/store-react";
import * as State from "./state";
import { store } from "./store";
import { createUserAndSave } from "./service";
import Users from "./components/Users";
import UserForm from "./components/UserForm";
@guillaumewuip
guillaumewuip / service.ts
Last active November 12, 2020 07:09
State and Store in frontend codebase - State example - service
import * as User from "./state/user";
import * as State from "./state";
import { store } from "./store";
export const createUserAndSave = ({
firstName,
lastName,
picture
}: {
@guillaumewuip
guillaumewuip / store.ts
Created November 12, 2020 07:08
State and Store in frontend codebase - State example - store
import * as Store from "@iadvize-oss/store";
import * as State from "./state";
export const store = Store.create<State.State>(() => State.initialState)();
@guillaumewuip
guillaumewuip / user.ts
Created November 12, 2020 07:07
State and Store in frontend codebase - State example - user API
const DEFAULT_USER_PICTURE = "https://i.pravatar.cc/300";
export const id = (user: User): string => user.id;
export const displayName = (user: User): string =>
`${user.firstName} ${user.lastName}`;
export const pictureOrDefault = (user: User): string =>
user.picture || DEFAULT_USER_PICTURE;
export const createNew = ({
firstName,
@guillaumewuip
guillaumewuip / index.ts
Last active November 12, 2020 07:12
State and Store in frontend codebase - State example - state API
export const decode = (apiPayload: unknown): Loaded | Failure => {
// parse payload
// remove admins
// if something goes wrong, return Failure
};
export const users = (state: Loaded) => state.users;
export const addUser = (user: User.User) => (
state: Loaded
@guillaumewuip
guillaumewuip / user.ts
Created November 12, 2020 07:03
State and Store in frontend codebase - State example - user
export type User = {
id: string;
firstName: string;
lastName: string;
picture?: string;
};
@guillaumewuip
guillaumewuip / index.ts
Last active November 12, 2020 07:03
State and Store in frontend codebase - State example - state
import * as NonEmptyArray from "fp-ts/lib/NonEmptyArray";
import * as User from "./user";
export type State = Loading | Failure | Loaded;
export const initialState: Loading = "Loading";
type Loading = "Loading";
type Failure = Error;
@guillaumewuip
guillaumewuip / App.js
Created November 12, 2020 06:57
State and Store in frontend codebases - Redux example - App
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { getUsers } from "./selectors";
import { createUser } from "./actionCreators";
import Users from "./components/Users";
import UserForm from "./components/UserForm";
export default function App() {
@guillaumewuip
guillaumewuip / selector.js
Created November 12, 2020 06:57
State and Store in frontend codebases - Redux example - selector
export const getUsers = (state) =>
state.users.map((user) => ({
...user,
picture: user.picture || "https://i.pravatar.cc/300 "
}));