Repository: jherr/nextjs-state-management
Branch: main
Commit: 404606d7c012
Files: 112
Total size: 57.0 KB

Directory structure:
gitextract_m1ew54on/

├── .gitignore
├── with-context/
│   ├── .eslintrc.json
│   ├── .gitignore
│   ├── README.md
│   ├── next-env.d.ts
│   ├── next.config.js
│   ├── package.json
│   ├── pages/
│   │   ├── _app.js
│   │   ├── api/
│   │   │   └── hello.js
│   │   └── index.tsx
│   ├── src/
│   │   └── store.tsx
│   ├── styles/
│   │   ├── Home.module.css
│   │   └── globals.css
│   └── tsconfig.json
├── with-jotai/
│   ├── .eslintrc.json
│   ├── .gitignore
│   ├── README.md
│   ├── next-env.d.ts
│   ├── next.config.js
│   ├── package.json
│   ├── pages/
│   │   ├── _app.js
│   │   ├── api/
│   │   │   └── hello.js
│   │   └── index.tsx
│   ├── styles/
│   │   ├── Home.module.css
│   │   └── globals.css
│   └── tsconfig.json
├── with-mobx/
│   ├── .eslintrc.json
│   ├── .gitignore
│   ├── README.md
│   ├── next-env.d.ts
│   ├── next.config.js
│   ├── package.json
│   ├── pages/
│   │   ├── _app.js
│   │   ├── api/
│   │   │   └── hello.js
│   │   └── index.tsx
│   ├── src/
│   │   └── store.ts
│   ├── styles/
│   │   ├── Home.module.css
│   │   └── globals.css
│   └── tsconfig.json
├── with-react-query/
│   ├── .eslintrc.json
│   ├── .gitignore
│   ├── README.md
│   ├── next-env.d.ts
│   ├── next.config.js
│   ├── package.json
│   ├── pages/
│   │   ├── _app.js
│   │   ├── api/
│   │   │   └── hello.js
│   │   └── index.tsx
│   ├── styles/
│   │   ├── Home.module.css
│   │   └── globals.css
│   └── tsconfig.json
├── with-react-query-simple/
│   ├── .eslintrc.json
│   ├── .gitignore
│   ├── README.md
│   ├── next-env.d.ts
│   ├── next.config.js
│   ├── package.json
│   ├── pages/
│   │   ├── _app.js
│   │   ├── api/
│   │   │   └── hello.js
│   │   └── index.tsx
│   ├── styles/
│   │   ├── Home.module.css
│   │   └── globals.css
│   └── tsconfig.json
├── with-redux/
│   ├── .eslintrc.json
│   ├── .gitignore
│   ├── README.md
│   ├── next-env.d.ts
│   ├── next.config.js
│   ├── package.json
│   ├── pages/
│   │   ├── _app.js
│   │   ├── api/
│   │   │   └── hello.js
│   │   └── index.tsx
│   ├── src/
│   │   └── store.ts
│   ├── styles/
│   │   ├── Home.module.css
│   │   └── globals.css
│   └── tsconfig.json
├── with-rxjs/
│   ├── .eslintrc.json
│   ├── .gitignore
│   ├── README.md
│   ├── next-env.d.ts
│   ├── next.config.js
│   ├── package.json
│   ├── pages/
│   │   ├── _app.js
│   │   ├── api/
│   │   │   └── hello.js
│   │   └── index.tsx
│   ├── styles/
│   │   ├── Home.module.css
│   │   └── globals.css
│   └── tsconfig.json
├── with-use-state/
│   ├── .eslintrc.json
│   ├── .gitignore
│   ├── README.md
│   ├── next-env.d.ts
│   ├── next.config.js
│   ├── package.json
│   ├── pages/
│   │   ├── _app.js
│   │   ├── api/
│   │   │   └── hello.js
│   │   └── index.tsx
│   ├── styles/
│   │   ├── Home.module.css
│   │   └── globals.css
│   └── tsconfig.json
└── with-zustand/
    ├── .eslintrc.json
    ├── .gitignore
    ├── README.md
    ├── next-env.d.ts
    ├── next.config.js
    ├── package.json
    ├── pages/
    │   ├── _app.js
    │   ├── api/
    │   │   └── hello.js
    │   └── index.tsx
    ├── styles/
    │   ├── Home.module.css
    │   └── globals.css
    └── tsconfig.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
node_modules


================================================
FILE: with-context/.eslintrc.json
================================================
{
  "extends": "next/core-web-vitals"
}


================================================
FILE: with-context/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local

# vercel
.vercel


================================================
FILE: with-context/README.md
================================================
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.


================================================
FILE: with-context/next-env.d.ts
================================================
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.


================================================
FILE: with-context/next.config.js
================================================
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig


================================================
FILE: with-context/package.json
================================================
{
  "name": "with-use-state",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/node": "^17.0.21",
    "@types/react": "^17.0.40",
    "eslint": "8.11.0",
    "eslint-config-next": "12.1.0",
    "typescript": "^4.6.2"
  }
}


================================================
FILE: with-context/pages/_app.js
================================================
import "../styles/globals.css";
import { PokemonProvider } from "../src/store";

function MyApp({ Component, pageProps }) {
  return (
    <PokemonProvider pokemon={pageProps.pokemon}>
      <Component {...pageProps} />
    </PokemonProvider>
  );
}

export default MyApp;


================================================
FILE: with-context/pages/api/hello.js
================================================
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}


================================================
FILE: with-context/pages/index.tsx
================================================
import Head from "next/head";
import styles from "../styles/Home.module.css";

import { usePokemon } from "../src/store";
export { getServerSideProps } from "../src/store";

export default function Home() {
  const { pokemon, filter, setFilter } = usePokemon();

  return (
    <div className={styles.main}>
      <Head>
        <title>Pokemon</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div>
        <input
          type="text"
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
          className={styles.search}
        />
      </div>
      <div className={styles.container}>
        {pokemon.slice(0, 20).map((p) => (
          <div key={p.id} className={styles.image}>
            <img
              alt={p.name}
              src={`https://jherr-pokemon.s3.us-west-1.amazonaws.com/${p.image}`}
            />
            <h2>{p.name}</h2>
          </div>
        ))}
      </div>
    </div>
  );
}


================================================
FILE: with-context/src/store.tsx
================================================
import { useState, useMemo, createContext, useContext } from "react";

interface Pokemon {
  id: number;
  name: string;
  image: string;
}

export async function getServerSideProps() {
  const resp = await fetch(
    "https://jherr-pokemon.s3.us-west-1.amazonaws.com/index.json"
  );
  return {
    props: {
      pokemon: await resp.json(),
    },
  };
}

const usePokemonController = (pokemon: Pokemon[]) => {
  const [filter, setFilter] = useState("");

  const filteredPokemon = useMemo(
    () =>
      pokemon.filter((p) =>
        p.name.toLowerCase().includes(filter.toLowerCase())
      ),
    [filter, pokemon]
  );

  return {
    filter,
    setFilter,
    pokemon: filteredPokemon,
  };
};

const PokemonContext = createContext<ReturnType<typeof usePokemonController>>({
  filter: "",
  setFilter: () => {},
  pokemon: [],
});

export const PokemonProvider = ({ pokemon, children }) => (
  <PokemonContext.Provider value={usePokemonController(pokemon)}>
    {children}
  </PokemonContext.Provider>
);

export const usePokemon = () => useContext(PokemonContext);


================================================
FILE: with-context/styles/Home.module.css
================================================
.main {
  padding: 1rem;
}

.image img {
  max-height: 200px;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 1rem;
  column-gap: 1rem;
}

.search {
  width: 100%;
  border: 1px solid #aaa;
  border-radius: 0.5rem;
  padding: 0.5rem;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

================================================
FILE: with-context/styles/globals.css
================================================
html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}


================================================
FILE: with-context/tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}


================================================
FILE: with-jotai/.eslintrc.json
================================================
{
  "extends": "next/core-web-vitals"
}


================================================
FILE: with-jotai/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local

# vercel
.vercel


================================================
FILE: with-jotai/README.md
================================================
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.


================================================
FILE: with-jotai/next-env.d.ts
================================================
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.


================================================
FILE: with-jotai/next.config.js
================================================
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig


================================================
FILE: with-jotai/package.json
================================================
{
  "name": "with-use-state",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "jotai": "^1.6.1",
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/node": "^17.0.21",
    "@types/react": "^17.0.40",
    "eslint": "8.11.0",
    "eslint-config-next": "12.1.0",
    "typescript": "^4.6.2"
  }
}


================================================
FILE: with-jotai/pages/_app.js
================================================
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp


================================================
FILE: with-jotai/pages/api/hello.js
================================================
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}


================================================
FILE: with-jotai/pages/index.tsx
================================================
import { useState, useMemo } from "react";
import Head from "next/head";
import { atom, useAtom } from "jotai";
import { useHydrateAtoms } from "jotai/utils";

import styles from "../styles/Home.module.css";

interface Pokemon {
  id: number;
  name: string;
  image: string;
}

const pokemonAtom = atom<Pokemon[]>([]);
const filterAtom = atom("");
const filteredPokemon = atom((get) =>
  get(pokemonAtom).filter((pokemon) =>
    pokemon.name.toLowerCase().includes(get(filterAtom).toLowerCase())
  )
);

export async function getServerSideProps() {
  const resp = await fetch(
    "https://jherr-pokemon.s3.us-west-1.amazonaws.com/index.json"
  );
  return {
    props: {
      initialPokemon: await resp.json(),
    },
  };
}

export default function Home({
  initialPokemon,
}: {
  initialPokemon: Pokemon[];
}) {
  useHydrateAtoms([[pokemonAtom, initialPokemon]] as const);

  const [pokemon] = useAtom(filteredPokemon);
  const [filter, setFilter] = useAtom(filterAtom);

  return (
    <div className={styles.main}>
      <Head>
        <title>Pokemon</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div>
        <input
          type="text"
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
          className={styles.search}
        />
      </div>
      <div className={styles.container}>
        {pokemon.slice(0, 20).map((p) => (
          <div key={p.id} className={styles.image}>
            <img
              alt={p.name}
              src={`https://jherr-pokemon.s3.us-west-1.amazonaws.com/${p.image}`}
            />
            <h2>{p.name}</h2>
          </div>
        ))}
      </div>
    </div>
  );
}


================================================
FILE: with-jotai/styles/Home.module.css
================================================
.main {
  padding: 1rem;
}

.image img {
  max-height: 200px;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 1rem;
  column-gap: 1rem;
}

.search {
  width: 100%;
  border: 1px solid #aaa;
  border-radius: 0.5rem;
  padding: 0.5rem;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

================================================
FILE: with-jotai/styles/globals.css
================================================
html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}


================================================
FILE: with-jotai/tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}


================================================
FILE: with-mobx/.eslintrc.json
================================================
{
  "extends": "next/core-web-vitals"
}


================================================
FILE: with-mobx/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local

# vercel
.vercel


================================================
FILE: with-mobx/README.md
================================================
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.


================================================
FILE: with-mobx/next-env.d.ts
================================================
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.


================================================
FILE: with-mobx/next.config.js
================================================
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig


================================================
FILE: with-mobx/package.json
================================================
{
  "name": "with-mobx",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "mobx": "^6.4.2",
    "mobx-react-lite": "^3.3.0",
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/node": "^17.0.21",
    "@types/react": "^17.0.40",
    "eslint": "8.10.0",
    "eslint-config-next": "12.1.0",
    "typescript": "^4.6.2"
  }
}


================================================
FILE: with-mobx/pages/_app.js
================================================
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp


================================================
FILE: with-mobx/pages/api/hello.js
================================================
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}


================================================
FILE: with-mobx/pages/index.tsx
================================================
/* eslint-disable @next/next/no-img-element */
import { useEffect } from "react";
import Head from "next/head";
import styles from "../styles/Home.module.css";
import store, { type Pokemon } from "../src/store";
import { observer } from "mobx-react-lite";

export async function getServerSideProps() {
  const resp = await fetch(
    "https://jherr-pokemon.s3.us-west-1.amazonaws.com/index.json"
  );

  store.pokemon = await resp.json();

  return {
    props: {
      initialPokemon: store.pokemon,
    },
  };
}

function Home({ initialPokemon }: { initialPokemon: Pokemon[] }) {
  useEffect(() => {
    store.pokemon = initialPokemon;
  }, [initialPokemon]);

  return (
    <div className={styles.main}>
      <Head>
        <title>Pokemon</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div>
        <input
          type="text"
          value={store.filter}
          onChange={(e) => (store.filter = e.target.value)}
          className={styles.search}
        />
      </div>
      <div className={styles.container}>
        {store.filteredPokemon.slice(0, 20).map((p) => (
          <div key={p.id} className={styles.image}>
            <img
              alt={p.name}
              src={`https://jherr-pokemon.s3.us-west-1.amazonaws.com/${p.image}`}
            />
            <h2>{p.name}</h2>
          </div>
        ))}
      </div>
    </div>
  );
}

export default observer(Home);


================================================
FILE: with-mobx/src/store.ts
================================================
import { computed, makeObservable, observable } from "mobx";

export interface Pokemon {
  id: number;
  name: string;
  image: string;
}

class PokemonStore {
  pokemon: Pokemon[] = [];
  filter: string = "";

  constructor() {
    makeObservable(this, {
      pokemon: observable,
      filter: observable,
      filteredPokemon: computed,
    });
  }

  setPokemon(pokemon: Pokemon[]) {
    this.pokemon = pokemon;
  }

  get filteredPokemon() {
    return this.pokemon.filter(({ name }) =>
      name.toLowerCase().includes(this.filter.toLowerCase())
    );
  }
}

const store = new PokemonStore();

export default store;


================================================
FILE: with-mobx/styles/Home.module.css
================================================
.main {
  padding: 1rem;
}

.image img {
  max-height: 200px;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 1rem;
  column-gap: 1rem;
}

.search {
  width: 100%;
  border: 1px solid #aaa;
  border-radius: 0.5rem;
  padding: 0.5rem;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

================================================
FILE: with-mobx/styles/globals.css
================================================
html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}


================================================
FILE: with-mobx/tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}


================================================
FILE: with-react-query/.eslintrc.json
================================================
{
  "extends": "next/core-web-vitals"
}


================================================
FILE: with-react-query/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local

# vercel
.vercel


================================================
FILE: with-react-query/README.md
================================================
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.


================================================
FILE: with-react-query/next-env.d.ts
================================================
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.


================================================
FILE: with-react-query/next.config.js
================================================
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig


================================================
FILE: with-react-query/package.json
================================================
{
  "name": "with-use-state",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-query": "^3.34.16"
  },
  "devDependencies": {
    "@types/node": "^17.0.21",
    "@types/react": "^17.0.40",
    "eslint": "8.11.0",
    "eslint-config-next": "12.1.0",
    "typescript": "^4.6.2"
  }
}


================================================
FILE: with-react-query/pages/_app.js
================================================
import { useState } from "react";
import { Hydrate, QueryClient, QueryClientProvider } from "react-query";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  const [queryClient] = useState(() => new QueryClient());

  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
        <Component {...pageProps} />
      </Hydrate>
    </QueryClientProvider>
  );
}

export default MyApp;


================================================
FILE: with-react-query/pages/api/hello.js
================================================
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}


================================================
FILE: with-react-query/pages/index.tsx
================================================
import { useState, useMemo } from "react";
import Head from "next/head";
import { dehydrate, useQuery, QueryClient } from "react-query";

import styles from "../styles/Home.module.css";

interface Pokemon {
  id: number;
  name: string;
  image: string;
}

const getPokemon = (): Promise<Pokemon[]> =>
  fetch("https://jherr-pokemon.s3.us-west-1.amazonaws.com/index.json").then(
    (resp) => resp.json()
  );

export async function getServerSideProps() {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery("pokemon", getPokemon);

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
}

export default function Home() {
  const { data: pokemon } = useQuery("pokemon", getPokemon, {
    refetchOnMount: false,
    refetchOnWindowFocus: false,
  });

  const [filter, setFilter] = useState("");

  const filteredPokemon = useMemo(
    () =>
      pokemon.filter((p) =>
        p.name.toLowerCase().includes(filter.toLowerCase())
      ),
    [filter, pokemon]
  );

  return (
    <div className={styles.main}>
      <Head>
        <title>Pokemon</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div>
        <input
          type="text"
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
          className={styles.search}
        />
      </div>
      <div className={styles.container}>
        {filteredPokemon.slice(0, 20).map((p) => (
          <div key={p.id} className={styles.image}>
            <img
              alt={p.name}
              src={`https://jherr-pokemon.s3.us-west-1.amazonaws.com/${p.image}`}
            />
            <h2>{p.name}</h2>
          </div>
        ))}
      </div>
    </div>
  );
}


================================================
FILE: with-react-query/styles/Home.module.css
================================================
.main {
  padding: 1rem;
}

.image img {
  max-height: 200px;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 1rem;
  column-gap: 1rem;
}

.search {
  width: 100%;
  border: 1px solid #aaa;
  border-radius: 0.5rem;
  padding: 0.5rem;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

================================================
FILE: with-react-query/styles/globals.css
================================================
html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}


================================================
FILE: with-react-query/tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}


================================================
FILE: with-react-query-simple/.eslintrc.json
================================================
{
  "extends": "next/core-web-vitals"
}


================================================
FILE: with-react-query-simple/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local

# vercel
.vercel


================================================
FILE: with-react-query-simple/README.md
================================================
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.


================================================
FILE: with-react-query-simple/next-env.d.ts
================================================
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.


================================================
FILE: with-react-query-simple/next.config.js
================================================
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig


================================================
FILE: with-react-query-simple/package.json
================================================
{
  "name": "with-use-state",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-query": "^3.34.16"
  },
  "devDependencies": {
    "@types/node": "^17.0.21",
    "@types/react": "^17.0.40",
    "eslint": "8.11.0",
    "eslint-config-next": "12.1.0",
    "typescript": "^4.6.2"
  }
}


================================================
FILE: with-react-query-simple/pages/_app.js
================================================
import { useState } from "react";
import { Hydrate, QueryClient, QueryClientProvider } from "react-query";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  const [queryClient] = useState(() => new QueryClient());

  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </QueryClientProvider>
  );
}

export default MyApp;


================================================
FILE: with-react-query-simple/pages/api/hello.js
================================================
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}


================================================
FILE: with-react-query-simple/pages/index.tsx
================================================
import { useState, useMemo } from "react";
import Head from "next/head";
import { useQuery } from "react-query";

import styles from "../styles/Home.module.css";

interface Pokemon {
  id: number;
  name: string;
  image: string;
}

const getPokemon = (): Promise<Pokemon[]> =>
  fetch("https://jherr-pokemon.s3.us-west-1.amazonaws.com/index.json").then(
    (resp) => resp.json()
  );

export async function getServerSideProps() {
  return {
    props: {
      initialPokemon: await getPokemon(),
    },
  };
}

export default function Home({
  initialPokemon,
}: {
  initialPokemon: Pokemon[];
}) {
  const { data: pokemon } = useQuery("pokemon", getPokemon, {
    initialData: initialPokemon,
    refetchOnMount: false,
    refetchOnWindowFocus: false,
  });

  const [filter, setFilter] = useState("");

  const filteredPokemon = useMemo(
    () =>
      pokemon.filter((p) =>
        p.name.toLowerCase().includes(filter.toLowerCase())
      ),
    [filter, pokemon]
  );

  return (
    <div className={styles.main}>
      <Head>
        <title>Pokemon</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div>
        <input
          type="text"
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
          className={styles.search}
        />
      </div>
      <div className={styles.container}>
        {filteredPokemon.slice(0, 20).map((p) => (
          <div key={p.id} className={styles.image}>
            <img
              alt={p.name}
              src={`https://jherr-pokemon.s3.us-west-1.amazonaws.com/${p.image}`}
            />
            <h2>{p.name}</h2>
          </div>
        ))}
      </div>
    </div>
  );
}


================================================
FILE: with-react-query-simple/styles/Home.module.css
================================================
.main {
  padding: 1rem;
}

.image img {
  max-height: 200px;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 1rem;
  column-gap: 1rem;
}

.search {
  width: 100%;
  border: 1px solid #aaa;
  border-radius: 0.5rem;
  padding: 0.5rem;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

================================================
FILE: with-react-query-simple/styles/globals.css
================================================
html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}


================================================
FILE: with-react-query-simple/tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}


================================================
FILE: with-redux/.eslintrc.json
================================================
{
  "extends": "next/core-web-vitals"
}


================================================
FILE: with-redux/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local

# vercel
.vercel


================================================
FILE: with-redux/README.md
================================================
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.


================================================
FILE: with-redux/next-env.d.ts
================================================
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.


================================================
FILE: with-redux/next.config.js
================================================
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig


================================================
FILE: with-redux/package.json
================================================
{
  "name": "with-redux",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.0",
    "next": "12.1.0",
    "next-redux-wrapper": "^7.0.5",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-redux": "^7.2.6",
    "redux": "^4.1.2"
  },
  "devDependencies": {
    "@types/node": "^17.0.21",
    "eslint": "8.10.0",
    "eslint-config-next": "12.1.0",
    "typescript": "^4.6.2"
  }
}


================================================
FILE: with-redux/pages/_app.js
================================================
import "../styles/globals.css";
import { Provider } from "react-redux";
import getStore from "../src/store";

function MyApp({ Component, pageProps }) {
  const store = getStore(pageProps.initialState);
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;


================================================
FILE: with-redux/pages/api/hello.js
================================================
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}


================================================
FILE: with-redux/pages/index.tsx
================================================
/* eslint-disable @next/next/no-img-element */
import Head from "next/head";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import getStore, {
  getPokemon,
  selectFilteredPokemon,
  selectSearch,
  rehydrate,
  setSearch,
} from "../src/store";

import styles from "../styles/Home.module.css";

function Home() {
  const dispatch = useDispatch();

  const pokemon = useSelector(selectFilteredPokemon);
  const search = useSelector(selectSearch);

  return (
    <div className={styles.main}>
      <Head>
        <title>Pokemon</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div>
        <input
          type="text"
          value={search}
          onChange={(e) => {
            dispatch(setSearch(e.target.value));
          }}
          className={styles.search}
        />
      </div>
      <div className={styles.container}>
        {pokemon.slice(0, 20).map((p) => (
          <div key={p.id} className={styles.image}>
            <img
              alt={p.name}
              src={`https://jherr-pokemon.s3.us-west-1.amazonaws.com/${p.image}`}
            />
            <h2>{p.name}</h2>
          </div>
        ))}
      </div>
    </div>
  );
}

export async function getServerSideProps() {
  const store = getStore();
  await store.dispatch(getPokemon());
  return {
    props: {
      initialState: store.getState(),
    },
  };
}

export default Home;


================================================
FILE: with-redux/src/store.ts
================================================
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import {
  Action,
  PayloadAction,
  configureStore,
  ThunkAction,
} from "@reduxjs/toolkit";

interface Pokemon {
  id: number;
  name: string;
  image: string;
}

export type PokemonState = {
  pokemon: Pokemon[];
  search: string;
  filteredPokemon: Pokemon[];
  pending: boolean;
  error: boolean;
};

const initialState: PokemonState = {
  pokemon: [],
  filteredPokemon: [],
  search: "",
  pending: false,
  error: false,
};

export const getPokemon = createAsyncThunk("pokemon/getPokemon", async () => {
  const response = await await fetch(
    "https://jherr-pokemon.s3.us-west-1.amazonaws.com/index.json"
  );
  return await response.json();
});

export const pokemonSlice = createSlice({
  name: "pokemon",
  initialState,
  reducers: {
    setSearch(state, action: PayloadAction<string>) {
      state.search = action.payload;
      state.filteredPokemon = state.pokemon.filter(({ name }) =>
        name.toLowerCase().includes(state.search.toLowerCase())
      );
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(getPokemon.pending, (state) => {
        state.pending = true;
      })
      .addCase(getPokemon.fulfilled, (state, { payload }) => {
        state.pending = false;
        state.pokemon = payload;
        state.filteredPokemon = payload;
      })
      .addCase(getPokemon.rejected, (state) => {
        state.pending = false;
        state.error = true;
      });
  },
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
export type AppThunk<ReturnType = void> = ThunkAction<
  ReturnType,
  RootState,
  unknown,
  Action<string>
>;

export const { setSearch } = pokemonSlice.actions;

export const selectSearch = (state: RootState) => state.pokemon.search;
export const selectFilteredPokemon = (state: RootState) =>
  state.pokemon.filteredPokemon;

export let store = null;

export default function getStore(incomingPreloadState?: RootState) {
  store = configureStore({
    reducer: {
      pokemon: pokemonSlice.reducer,
    },
    preloadedState: incomingPreloadState,
  });
  return store;
}


================================================
FILE: with-redux/styles/Home.module.css
================================================
.main {
  padding: 1rem;
}

.image img {
  max-height: 200px;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 1rem;
  column-gap: 1rem;
}

.search {
  width: 100%;
  border: 1px solid #aaa;
  border-radius: 0.5rem;
  padding: 0.5rem;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

================================================
FILE: with-redux/styles/globals.css
================================================
html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}


================================================
FILE: with-redux/tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}


================================================
FILE: with-rxjs/.eslintrc.json
================================================
{
  "extends": "next/core-web-vitals"
}


================================================
FILE: with-rxjs/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local

# vercel
.vercel


================================================
FILE: with-rxjs/README.md
================================================
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.


================================================
FILE: with-rxjs/next-env.d.ts
================================================
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.


================================================
FILE: with-rxjs/next.config.js
================================================
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig


================================================
FILE: with-rxjs/package.json
================================================
{
  "name": "with-rxjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.1.0",
    "observable-hooks": "^4.2.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "rxjs": "^7.5.5"
  },
  "devDependencies": {
    "@types/node": "^17.0.21",
    "@types/react": "^17.0.40",
    "eslint": "8.10.0",
    "eslint-config-next": "12.1.0",
    "typescript": "^4.6.2"
  }
}


================================================
FILE: with-rxjs/pages/_app.js
================================================
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp


================================================
FILE: with-rxjs/pages/api/hello.js
================================================
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}


================================================
FILE: with-rxjs/pages/index.tsx
================================================
/* eslint-disable @next/next/no-img-element */
import { useMemo, useEffect } from "react";
import Head from "next/head";
import { BehaviorSubject } from "rxjs";
import { useObservableState } from "observable-hooks";

import styles from "../styles/Home.module.css";

interface Pokemon {
  id: number;
  name: string;
  image: string;
}

const pokemon$ = new BehaviorSubject<Pokemon[]>([]);
const filter$ = new BehaviorSubject<string>("");

export async function getServerSideProps() {
  const resp = await fetch(
    "https://jherr-pokemon.s3.us-west-1.amazonaws.com/index.json"
  );
  pokemon$.next(await resp.json());
  return {
    props: {
      initialPokemon: pokemon$.value,
    },
  };
}

export default function Home({ initialPokemon }) {
  useEffect(() => {
    pokemon$.next(initialPokemon);
  }, [initialPokemon]);

  const pokemon = useObservableState(pokemon$);
  const filter = useObservableState(filter$);

  const filteredPokemon = useMemo(
    () =>
      pokemon.filter((p) =>
        p.name.toLowerCase().includes(filter.toLowerCase())
      ),
    [filter, pokemon]
  );

  return (
    <div className={styles.main}>
      <Head>
        <title>Pokemon</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div>
        <input
          type="text"
          value={filter$.value}
          onChange={(e) => filter$.next(e.target.value)}
          className={styles.search}
        />
      </div>
      <div className={styles.container}>
        {filteredPokemon.slice(0, 20).map((p) => (
          <div key={p.id} className={styles.image}>
            <img
              alt={p.name}
              src={`https://jherr-pokemon.s3.us-west-1.amazonaws.com/${p.image}`}
            />
            <h2>{p.name}</h2>
          </div>
        ))}
      </div>
    </div>
  );
}


================================================
FILE: with-rxjs/styles/Home.module.css
================================================
.main {
  padding: 1rem;
}

.image img {
  max-height: 200px;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 1rem;
  column-gap: 1rem;
}

.search {
  width: 100%;
  border: 1px solid #aaa;
  border-radius: 0.5rem;
  padding: 0.5rem;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

================================================
FILE: with-rxjs/styles/globals.css
================================================
html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}


================================================
FILE: with-rxjs/tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}


================================================
FILE: with-use-state/.eslintrc.json
================================================
{
  "extends": "next/core-web-vitals"
}


================================================
FILE: with-use-state/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local

# vercel
.vercel


================================================
FILE: with-use-state/README.md
================================================
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.


================================================
FILE: with-use-state/next-env.d.ts
================================================
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.


================================================
FILE: with-use-state/next.config.js
================================================
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig


================================================
FILE: with-use-state/package.json
================================================
{
  "name": "with-use-state",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/node": "^17.0.21",
    "@types/react": "^17.0.40",
    "eslint": "8.11.0",
    "eslint-config-next": "12.1.0",
    "typescript": "^4.6.2"
  }
}


================================================
FILE: with-use-state/pages/_app.js
================================================
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp


================================================
FILE: with-use-state/pages/api/hello.js
================================================
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}


================================================
FILE: with-use-state/pages/index.tsx
================================================
import { useState, useMemo } from "react";
import Head from "next/head";
import styles from "../styles/Home.module.css";

interface Pokemon {
  id: number;
  name: string;
  image: string;
}

export async function getServerSideProps() {
  const resp = await fetch(
    "https://jherr-pokemon.s3.us-west-1.amazonaws.com/index.json"
  );
  return {
    props: {
      pokemon: await resp.json(),
    },
  };
}

export default function Home({ pokemon }: { pokemon: Pokemon[] }) {
  const [filter, setFilter] = useState("");

  const filteredPokemon = useMemo(
    () =>
      pokemon.filter((p) =>
        p.name.toLowerCase().includes(filter.toLowerCase())
      ),
    [filter, pokemon]
  );

  return (
    <div className={styles.main}>
      <Head>
        <title>Pokemon</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div>
        <input
          type="text"
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
          className={styles.search}
        />
      </div>
      <div className={styles.container}>
        {filteredPokemon.slice(0, 20).map((p) => (
          <div key={p.id} className={styles.image}>
            <img
              alt={p.name}
              src={`https://jherr-pokemon.s3.us-west-1.amazonaws.com/${p.image}`}
            />
            <h2>{p.name}</h2>
          </div>
        ))}
      </div>
    </div>
  );
}


================================================
FILE: with-use-state/styles/Home.module.css
================================================
.main {
  padding: 1rem;
}

.image img {
  max-height: 200px;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 1rem;
  column-gap: 1rem;
}

.search {
  width: 100%;
  border: 1px solid #aaa;
  border-radius: 0.5rem;
  padding: 0.5rem;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

================================================
FILE: with-use-state/styles/globals.css
================================================
html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}


================================================
FILE: with-use-state/tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}


================================================
FILE: with-zustand/.eslintrc.json
================================================
{
  "extends": "next/core-web-vitals"
}


================================================
FILE: with-zustand/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local

# vercel
.vercel


================================================
FILE: with-zustand/README.md
================================================
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.


================================================
FILE: with-zustand/next-env.d.ts
================================================
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.


================================================
FILE: with-zustand/next.config.js
================================================
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig


================================================
FILE: with-zustand/package.json
================================================
{
  "name": "with-use-state",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "zustand": "^3.7.1"
  },
  "devDependencies": {
    "@types/node": "^17.0.21",
    "@types/react": "^17.0.40",
    "eslint": "8.11.0",
    "eslint-config-next": "12.1.0",
    "typescript": "^4.6.2"
  }
}


================================================
FILE: with-zustand/pages/_app.js
================================================
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp


================================================
FILE: with-zustand/pages/api/hello.js
================================================
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}


================================================
FILE: with-zustand/pages/index.tsx
================================================
import { useEffect } from "react";
import Head from "next/head";
import create from "zustand";

import styles from "../styles/Home.module.css";

interface Pokemon {
  id: number;
  name: string;
  image: string;
}

const usePokemonStore = create<{
  pokemon: Pokemon[];
  setPokemon: (pokemon: Pokemon[]) => void;
  filteredPokemon: Pokemon[];
  filter: string;
  setFilter: (filter: string) => void;
}>((set) => ({
  pokemon: [],
  filteredPokemon: [],
  filter: "",

  setPokemon: (pokemon: Pokemon[]) =>
    set({ pokemon, filteredPokemon: pokemon }),
  setFilter: (filter: string) =>
    set((state) => ({
      filter,
      filteredPokemon: state.pokemon.filter((pokemon) =>
        pokemon.name.toLowerCase().includes(filter.toLowerCase())
      ),
    })),
}));

export async function getServerSideProps() {
  const resp = await fetch(
    "https://jherr-pokemon.s3.us-west-1.amazonaws.com/index.json"
  );

  usePokemonStore.getState().setPokemon(await resp.json());

  return {
    props: {
      pokemon: usePokemonStore.getState().pokemon,
    },
  };
}

export default function Home({ pokemon }: { pokemon: Pokemon[] }) {
  const { filter, filteredPokemon, setFilter } = usePokemonStore();

  useEffect(() => {
    usePokemonStore.getState().setPokemon(pokemon);
  }, [pokemon]);

  return (
    <div className={styles.main}>
      <Head>
        <title>Pokemon</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div>
        <input
          type="text"
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
          className={styles.search}
        />
      </div>
      <div className={styles.container}>
        {filteredPokemon.slice(0, 20).map((p) => (
          <div key={p.id} className={styles.image}>
            <img
              alt={p.name}
              src={`https://jherr-pokemon.s3.us-west-1.amazonaws.com/${p.image}`}
            />
            <h2>{p.name}</h2>
          </div>
        ))}
      </div>
    </div>
  );
}


================================================
FILE: with-zustand/styles/Home.module.css
================================================
.main {
  padding: 1rem;
}

.image img {
  max-height: 200px;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 1rem;
  column-gap: 1rem;
}

.search {
  width: 100%;
  border: 1px solid #aaa;
  border-radius: 0.5rem;
  padding: 0.5rem;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

================================================
FILE: with-zustand/styles/globals.css
================================================
html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}


================================================
FILE: with-zustand/tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}