Make a Progressive Web App with React

Notification.requestPermission()
  .then(() => new Notification('Hey 👋'));

// this is how you define schemas in sanity
export default {
  title: 'Blog Post',
  name: 'blogPost',
  type: 'document',
  fields: [
    {
      title: 'Title',
      name: 'name',
      type: 'string',
    },
    {
      title: 'Content',
      name: 'content',
      type: 'text',
    },
  ],
};

// /sanity/madLib.js
const madLib = {
  name: 'madLib',
  title: 'Mad Lib',
  type: 'document',
  fields: [
    {
      title: 'Title',
      name: 'title',
      type: 'string',
      validation: (Rule) => Rule.required(),
    },
    {
      name: 'slug',
      type: 'slug',
      options: { source: 'title' },
      validation: (Rule) => Rule.required(),
    },
    {
      title: 'Image',
      name: 'image',
      type: 'image',
      validation: (Rule) => Rule.required(),
    },
    {
      name: 'story',
      type: 'array',
      of: [
        {
          type: 'block',
          of: [
            // this defines is in an inline object that can be embedded within
            // each line of text in the story.
            // https://www.sanity.io/docs/block-type#of-d0f97ffa1dd9
            {
              title: 'Placeholder',
              name: 'placeholder',
              type: 'object',
              fields: [
                {
                  title: 'Type',
                  description:
                    'The type of placeholder. E.g. Adjective, Noun, Celebrity, Animal',
                  name: 'type',
                  type: 'string',
                },
              ],
            },
          ],
        },
      ],
      validation: (Rule) => Rule.required(),
    },
  ],
};

export default madLib;

// /sanity/schema.js
import createSchema from 'part:@sanity/base/schema-creator';
import schemaTypes from 'all:part:@sanity/base/schema-type';
import madLib from './madLib';

export default createSchema({
  name: 'default',
  types: schemaTypes.concat([madLib]),
});

cd ./sanity
sanity deploy

// /src/index.js
import 'modern-css-reset';
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from 'react-query';
import { persistWithLocalStorage } from 'react-query/persist-localstorage-experimental';
import App from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
import reportWebVitals from './reportWebVitals';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 1000 * 60 * 60 * 24, // 24 hours
    },
  },
});

persistWithLocalStorage(queryClient);

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);

serviceWorkerRegistration.register();

reportWebVitals();

import React from 'react';

const WorkInProgress = () => <>Work in progress</>;

export default WorkInProgress;

// /src/NotFound.js
function NotFound() {
  return (
    <div>
      <h1>We're Sorry</h1>
      <p>We couldn't find the page you were looking for.</p>
    </div>
  );
}

export default NotFound;

// /src/App.js
import { Route, Switch, Link } from 'react-router-dom';
import MadLibList from './MadLibList';
import MadLib from './MadLib';
import NotFound from './NotFound';
import styles from './App.module.css';

function App() {
  return (
    <>
      <header className={styles.header}>
        <Link className={styles.headerLink} to="/">
          Sanity Mad Libs
        </Link>
      </header>

      <main className={styles.main}>
        <div className={styles.container}>
          <Switch>
            <Route component={MadLibList} path="/" exact />
            <Route component={MadLib} path="/mad-libs/:slug" />
            <Route component={NotFound} />
          </Switch>
        </div>
      </main>
    </>
  );
}

export default App;

/* /src/App.module.css */
.header {
  padding: 1rem;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.16);
  font-weight: bold;
  position: sticky;
  background-color: white;
  top: 0;
}

.headerLink {
  color: black;
  text-decoration: none;
}

.headerLink:hover {
  text-decoration: underline;
}

.main {
  padding: 1rem;
  overflow: auto;
}

.container {
  margin: 0 auto;
  max-width: 100%;
  width: 425px;
}

// /src/sanity.js
import SanityClient from '@sanity/client';
import ImageUrlBuilder from '@sanity/image-url';

export const sanity = SanityClient({
  projectId: 'your-project-id',
  dataset: 'production',
  // this option enables faster responses
  // but can return stale data at times.
  // recommended for client-side queries
  useCdn: true,
});

export const imageUrlBuilder = ImageUrlBuilder(sanity);

// /src/MadLibList.js
import { useQuery } from 'react-query';
import { Link } from 'react-router-dom';
import { sanity, imageUrlBuilder } from './sanity';
import styles from './MadLibList.module.css';

const query = `
  *[ _type == 'madLib' ] { title, image, slug }
`;

function MadLibList() {
  // in this one line, data is fetched from sanity via the sanity client and
  // stored into application state via react-query!
  const { data: madLibs } = useQuery('madLibsList', () => sanity.fetch(query));

  // if we don't have madLibs yet, then the data must be loading
  if (!madLibs) {
    return <h1>Loading…</h1>;
  }

  return (
    <>
      <h1>Mad Libs</h1>

      <ul className={styles.list}>
        {/* loop through all of the mabLib and show them in a list */}
        {madLibs.map(({ title, slug, image }) => (
          <li key={slug.current}>
            {/* ;ink comes from react-router and it powers navigation on the */}
            {/* site. here we use sanity slugs to create unique URLs. */}
            <Link className={styles.tile} to={`/mad-libs/${slug.current}`}>
              <img
                alt={title}
                // use the sanity `imageUrlBuilder` to
                // generate optimized images on the fly
                src={imageUrlBuilder.width(425).height(425).image(image).url()}
                width="425px"
                height="425px"
              />
              <h2 className={styles.tileTitle}>{title}</h2>
            </Link>
          </li>
        ))}
      </ul>
    </>
  );
}

export default MadLibList;

/* /src/MadLibList.module.css */
.list {
  list-style-type: none;
  padding: 0;
}

.list > *:not(:last-child) {
  margin-bottom: 1rem;
}

.tile {
  position: relative;
  display: block;
}

.tile::after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  content: ' ';
  background: linear-gradient(transparent, black);
}

.tileTitle {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 1;
  color: white;
}

.tile:hover .tileTitle {
  text-decoration: underline;
}

// /src/MadLib.js
import { useQuery } from 'react-query';
import { useParams, Link } from 'react-router-dom';
import { useState, useEffect } from 'react';
import BlockContent from '@sanity/block-content-to-react';
import { sanity, imageUrlBuilder } from './sanity';
import styles from './MadLib.module.css';

const query = `
  *[ _type == 'madLib' && slug.current == $slug ]
`;

function MadLib() {
  // this variable is populated from `react-router` which pulls it from the URL
  const { slug } = useParams();

  // data is fetched from sanity via the sanity client and stored into
  // application state via react-query. note that the slug is used as the
  // "query key": https://react-query.tanstack.com/guides/query-keys
  const { data = [] } = useQuery(slug, () => sanity.fetch(query, { slug }));

  // we'll use destructuring assignment to return the first mab lib
  const [madLib] = data;

  // this will store the state of the answers of this mad lib
  const [answers, setAnswers] = useState(
    // if the items exist in localStorage, then
    localStorage.getItem(slug)
      ? // then set the initial state to that value
        JSON.parse(localStorage.getItem(slug))
      : // otherwise, set the initial state to an empty object
        {},
  );

  // this is a react "effect" hook: https://reactjs.org/docs/hooks-effect.html
  // we use this to watch for changes in the `slug` or `answers` variables and
  // update local storage when those change.
  useEffect(() => {
    localStorage.setItem(slug, JSON.stringify(answers));
  }, [slug, answers]);

  if (!madLib) {
    return <h1>Loading…</h1>;
  }

  // once the mad lib is loaded, we can map through the structured content to
  // find our placeholder shape. the end result is an array of these placeholders
  const placeholders = madLib?.story
    .map((block) => block.children.filter((n) => n._type === 'placeholder'))
    .flat();

  // using the above placeholders array, we calculate whether or not all the
  // blanks are filled in by checking the whether every placeholder has a value
  // in the `answers` state variable.
  const allBlanksFilledIn = placeholders?.every(
    (placeholder) => answers[placeholder._key],
  );

  return (
    <>
      <h2 className={styles.title}>{madLib.title}</h2>
      <img
        className={styles.img}
        alt={madLib.title}
        src={imageUrlBuilder.width(425).height(425).image(madLib.image).url()}
      />
      {!allBlanksFilledIn ? (
        // if all the blanks are _not_ filled in, then we can show the form
        <>
          <p>Fill in the blank!</p>
          <p>When you're done, the finished mad lib will appear.</p>
          <form
            // this `onSubmit` will fire when the user clicks the submit button
            onSubmit={(e) => {
              e.preventDefault();

              const answerEntries = Array.from(
                // find all the inputs
                e.currentTarget.querySelectorAll('input'),
              )
                // then get the name and values in a tuple
                .map((inputEl) => [inputEl.name, inputEl.value]);

              // use `Object.fromEntries` to transform them back to an object
              const nextAnswers = Object.fromEntries(answerEntries);

              setAnswers(nextAnswers);
            }}
          >
            <ul className={styles.list}>
              {/* for each placeholder… */}
              {placeholders.map(({ _key, type }) => (
                <li className={styles.placeholder} key={_key}>
                  {/* …render an input an a label. */}
                  <input
                    // the `name` of the input will be the sanity `_key`:
                    // https://www.sanity.io/docs/array-type#why-the-key-92296c6c45ea
                    // this will enables us to match this input value with the
                    // correct placeholder
                    name={_key}
                    className={styles.input}
                    id={_key}
                  />
                  <label className={styles.label} htmlFor={_key}>
                    {type}
                  </label>
                </li>
              ))}
            </ul>
            <button className={styles.button}>Submit!</button>
          </form>
        </>
      ) : (
        // if all the blanks are filled in, then we can show the rendered
        // story with a custom serializer for the type `placeholder`
        <>
          <BlockContent
            className={styles.blockContent}
            blocks={madLib.story}
            serializers={{
              // see here: https://github.com/sanity-io/block-content-to-react
              types: { placeholder: ({ node: { _key } }) => answers[_key] },
            }}
          />

          <button
            className={styles.button}
            onClick={() => {
              // we reset the state on click after the users confirms it's okay.
              if (window.confirm('Are you sure you want to reset?')) {
                setAnswers({});
              }
            }}
          >
            Reset
          </button>

          {/* this is a simple link back to the main mab libs index */}
          <Link className={styles.button} to="/">
            ← More Mad Libs
          </Link>
        </>
      )}
    </>
  );
}

export default MadLib;

/* /src/MadLib.module.css */
.list {
  list-style-type: none;
  padding: 0;
}

.title {
  text-align: center;
}

.img {
  margin-bottom: 1rem;
}

.placeholder {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input {
  border: none;
  border-bottom: 1px solid black;
  outline: none;
  padding: 0.5rem;
  width: 300px;
  max-width: 100%;
  text-align: center;
}

.input:focus {
  border-bottom: 3px solid black;
}

.label {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
}

.button {
  appearance: none;
  outline: none;
  background: none;
  padding: 0.5rem 1rem;
  border: 1px solid black;
  width: 100%;
  cursor: pointer;
  transition: all 250ms;
  display: block;
  margin-bottom: 1rem;
  text-align: center;
  text-decoration: none;
  color: black;
}

.button:focus,
.button:hover {
  background-color: #eee;
}

.button:active {
  background-color: #ddd;
}

.blockContent > p {
  margin-bottom: 1rem;
}

// /src/setupNotifications.js
import { sanity } from './sanity';

async function setupNotifications() {
  // Check if the browser supports notifications
  if (!('Notification' in window)) {
    // early return if not
    return;
  }

  // Check if the user denied notifications
  if (Notification.permission === 'denied') {
    // early return if so
    return;
  }

  // Wait for the user to give notification permissions
  await new Promise(async (resolve) => {
    if (Notification.permission === 'granted') {
      resolve();
    }

    const result = await Notification.requestPermission();

    if (result === 'granted') {
      resolve();
    }
  });

  const getMabLibCount = async () =>
    sanity.fetch(`count(*[ _type == 'madLib' ])`);

  let previous = await getMabLibCount();
  // setup interval to poll for new mad libs every minute
  setInterval(async () => {
    const current = await getMabLibCount();
    // the the current count is greater than the previous, send a notification
    if (current > previous) {
      previous = current;
      new Notification("There's a new Mad Lib for you to try!");
    }
  }, 60 * 1000);
}

export default setupNotifications;

// /src/index.js
import 'modern-css-reset';
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from 'react-query';
import { persistWithLocalStorage } from 'react-query/persist-localstorage-experimental';
import App from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
import reportWebVitals from './reportWebVitals';
// NEW 👇👇👇
import setupNotifications from './setupNotifications';
//     👆👆👆

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      cacheTime: 1000 * 60 * 60 * 24, // 24 hours
    },
  },
});

persistWithLocalStorage(queryClient);

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);

serviceWorkerRegistration.register();

reportWebVitals();

// NEW 👇👇👇
setupNotifications();
//     👆👆👆

{
  "short_name": "Fill in the Blank",
  "name": "Fill in the Blank",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Fill in the Blank</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

git checkout -b main # create a main branch
git add -A # stage all files for this commit
git commit -m "first commit" # commit the changes

git remote add origin https://github.com/ricokahler/fill-in-the-blank.git
git branch -M main
git push -u origin main