DEV Community: Richard Beattie

React Select with options outside

Richard Beattie — Wed, 12 May 2021 15:54:18 +0000

In prepsheets.com users can specify which allergens ingredients and recipes have. The natural UI element for this is a multiselect. I was already using react-select which is an awesome library adding a stylable multi-select with lots of options (creating new options; async loading of options; etc). However after setting it up, it felt too cramped. If users had more than 3 allergen selected (some of which are quite long "") then the select would grow and become cumbersome. Instead I decided to place the selected options above the mutliselect. This article goes over how to do this.

Setting up

We're using react-select here so go ahead and install it



npm install react-select

Now let's see what the default multi-select looks like



import Select from "react-select";

const options = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" },
];

const MyComponent = () => <Select options={options} isMulti />;

I'm using the 24 offical Irish allergens as you can see below when you add a certain amount the select grows which dosn't look nice in my opinion.

Moving selected options to outside the select

The next step is to not show the selected values in the select but rather above it. Let's create a wrapper component for React-Select



// OptionsOutsideSelect.js
import { Select } from "react-select";

const OptionsOutsideSelect = (props) => {
  const { isMulti, value } = props;

  return (
    <div>
      {isMulti ? value.map((val) => <span>{val.label} </span>) : null}
      <Select {...props} controlShouldRenderValue={!isMulti} />
    </div>
  );
};

export default OptionsOutsideSelect;

If isMulti is true then we use the controlShouldRenderValue prop to hide the selected values and loop over the values prop and map them to <span> elements.

It should be possible to use the MultiValue component from react-select however I couldn't get that to work, which brings us to the next step

Styling the selected options

Let's change how we're mapping the selected values to look like



<ValuesContainer>
  {isMulti
    ? value.map((val) => <Value key={val.value}>{val.label}</Value>)
    : null}
</ValuesContainer>

I'm going to use styled-components to style ValusContainer and Value but you can of course move the same rules over to whatever you're using



import styled from "styled-components";

const ValuesContainer = styled.div`
  display: flex;
  flex-wrap: wrap;
  align-items: center;
`;

const Value = styled.div`
  padding: 0.3rem 0.5rem 0.3rem 0.5rem;
  margin: 0 0.55rem 0.55rem 0;
  font-size: 0.75rem;
  color: black;
  background-color: rgba(247, 173, 46, 0.6);
  user-select: none;
`;

This creates the below image which looks resonable

The only thing left to do now is let users remove selected options

Adding a remove button

First we'll add an "X" button to all Values



<Value>
  <XButton name={val.value} onClick={handleRemoveValue}>
    ✕ // This is the mulitply ✕ not the x on your keyboard
  </XButton>
</Value>

Now we need to make the handleRemoveValue function



const { onChange } = props;

const handleRemoveValue = (e) => {
  if (!onChange) return;
  const { name: buttonName } = e.currentTarget;
  const removedValue = value.find((val) => val.value === buttonName);
  if (!removedValue) return;
  onChange(
    value.filter((val) => val.value !== buttonName),
    { name, action: "remove-value", removedValue }
  );
};

And Ta-Da 🎉 you have a react-select with the options rendered outside the select. I've included a code-sandbox below to show what this looks like

SvelteKit Sitemap

Richard Beattie — Mon, 03 May 2021 09:13:09 +0000

SvelteKit came out in public beta a little over a month ago and I've finally gotten around to trying it out. I'll write up my thoughts elsewhere but I've moved r-bt.com over to SvelteKit and replaced my Notion CMS with markdown. The reason being I want to be able to use custom components. Anyway, one problem I had was creating a sitemap.xml for my static build. SvelteKit dosn't support creating sitemaps automatically although it might in the future.

Instead I made a post build step. Some notes about this:

I'm using Node v14 if you use an earlier version you might need to change import to require
I use @sveltejs/adapter-static to build a static site which is stored in /build

The Script

1. Install the dependencies

npm install -D fast-glob xmlbuilder2

2. Create a new file generate-sitemap.xml in the root of your project (e.g. beside svelte.config.cjs, etc) and add the following:

import fs from 'fs';
import fg from 'fast-glob';
import { create } from 'xmlbuilder2';
import pkg from './package.json';

const getUrl = (url) => {
    const trimmed = url.slice(6).replace('index.html', '');
    return `${pkg.url}/${trimmed}`;
};

async function createSitemap() {
    const sitemap = create({ version: '1.0' }).ele('urlset', {
        xmlns: 'http://www.sitemaps.org/schemas/sitemap/0.9'
    });

    const pages = await fg(['build/**/*.html']);

    pages.forEach((page) => {
        const url = sitemap.ele('url');
        url.ele('loc').txt(getUrl(page));
        url.ele('changefreq').txt('weekly');
    });

    const xml = sitemap.end({ prettyPrint: true });

    fs.writeFileSync('build/sitemap.xml', xml);
}

createSitemap();

3. Update your package.json

{
    url: "https://your-url.com",
    scripts: {
        ...,
        "postbuild": "node --experimental-json-modules ./generate-sitemap.js",
    }
}

The Explaination

To make the sitemap we're going to build the site, glob all the .html files, and write the xml back to the /build directory.

Before starting install the dependecies

npm install -D fast-glob xmlbuilder2

Now create a new file generate-sitemap.xml

First, let's get the files we need:

import fg from 'fast-glob';

async function createSitemap() {
    const pages = await fg(['build/**/*.html']);

    console.log({ pages });
}

If you run this you should get an array with the paths of all your pages

{
    pages: [
        'build/index.html',
        'build/blog/index.html',
        'build/about/index.html',
        'build/learning/index.html',
        ...
    ];
}

Next we'll use xmlbuilder to create the xml objects

import { create } from 'xmlbuilder2';

const sitemap = create({ version: '1.0' }).ele('urlset', {
    xmlns: 'http://www.sitemaps.org/schemas/sitemap/0.9'
});

and we just loop through the pages adding each as a url object with a loc and changefrequency to the sitemap

pages.forEach((page) => {
    const url = sitemap.ele('url');
    url.ele('loc').txt(page);
    url.ele('changefreq').txt('weekly');
});

Finally we turn the sitemap into a string and write it to a file using fs.writeFileSync

import fs from 'fs';
import fg from 'fast-glob';
import { create } from 'xmlbuilder2';

async function createSitemap() {
    const sitemap = create({ version: '1.0' }).ele('urlset', {
        xmlns: 'http://www.sitemaps.org/schemas/sitemap/0.9'
    });

    const pages = await fg(['build/**/*.html']);

    console.log({ pages });

    pages.forEach((page) => {
        const url = sitemap.ele('url');
        url.ele('loc').txt(page);
        url.ele('changefreq').txt('weekly');
    });

    const xml = sitemap.end({ prettyPrint: true });

    fs.writeFileSync('build/sitemap.xml', xml);
}

createSitemap();

Except we have a problem. If you run this code:

node generate-sitemap.js

and go to build/sitemap.xml you'll see that the locs are something that looks like:

build/learning/why-is-it-so-hard-to-find-a-domain/index.html

while we want it to be:

https://r-bt.com/learning/why-is-it-so-hard-to-find-a-domain/

To fix this go to your package.json and add

{
    "url": "https://your-url.com"
}

Then in generate-sitemap.js we'll import package.json and append the url to the pages paths. We'll also remove the first 5 characters build/ and index.html

import pkg from './package.json';

const getUrl = (url) => {
    const trimmed = url.slice(6).replace('index.html', '');
    return `${pkg.url}/${trimmed}`;
};

Node.js dosn't yet importing .json files so need to run this script with the
--experimental-json-modules flag

node --experimental-json-modules ./generate-sitemap.js

and you're sitemap should be generated and valid 🎉

To get it to run whenever you build the site go back to package.json and in scripts add

{
    scripts:{
        ...,
        "postbuild": "node --experimental-json-modules ./generate-sitemap.js",
    }
}

React Table useGlobalFilter with two columns

Richard Beattie — Sat, 06 Mar 2021 16:57:45 +0000

This week I needed to filter a table made with React Table. React table is great for its extensibility and so has hooks for this: useFilters and useGlobalFilter. useFilter is for filtering by an individual column and useGlobalFilter for filtering by content in any column.

However I needed to filter two columns by a single input. My table is for ingredients and has columns for: code, name, price per unit, supplier, etc. I need to filter by name and code. I couldn't use useFilters as that would do an intersection (i.e. the search query would need to be in both the code and name row).

See the end Code Sandbox at: https://codesandbox.io/s/fuzzy-text-global-filter-rcy1f?file=/src/Table.tsx

Filtering Prepsheets.com Ingredients by Code

Thankfully, it's possible to do this with useGlobalFilter.



import { 
    ..., 
    useGlobalFilter,
} from 'react-table'

...

const {
    ...,
    setGlobalFilter,
} = useTable(
    {
        ...
    },
    ...
    useGlobalFilter,
);

See Code Sandbox: https://codesandbox.io/s/all-columns-global-filter-buof9?file=/src/Table.tsx

Awesome, by using setGlobalFilter we can now filter by the content in any column. To restrict which columns we filter we'll specify a custom globalFilter function.



import {
    ...
    useGlobalFilter,
    Row, // Typescript
    IdType, // Typescript
}
import React, { ..., useCallback } = 'react'

...

const ourGlobalFilterFunction = useCallback(
    // This is Typescript if you're using JS remove the types (e.g. :string)
    (rows: Row<T>[], ids: IdType<T>[], query: string) => {
        return rows.filter((row) => 
            row.values['code'].includes(query) ||
            row.values['name'].includes(query)
        );
    },
    [],
);

const {
    ...
    setGlobalFilter,
} = useTable(
    {
        globalFilter: ourGlobalFilterFunction
    },
    ...
    useGlobalFilter,
);

See Code Sandbox: https://codesandbox.io/s/specific-columns-global-filter-n1k4v?file=/src/Table.tsx

However, in my case this is inside a Table component which I use in a couple of places, so let's make ourGlobalFilterFunction take arbitrary column names for filtering. We'll also pass the filter query as a prop to Table.



interface TableProps {
    filters: string[];
    filter: string;
}

const Table: React.FC<TableProps> = ({
    filters,
    filter,
}): React.ReactComponent => {

    const ourGlobalFilterFunction = useCallback(
        // This is Typescript if you're using JS remove the types (e.g. :string)
        (rows: Row<T>[], ids: IdType<T>[], query: string) => {
            return rows.filter((row) => 
                for (const filter of filters) {
                    return row.values[filter].includes(query)
                }
            );
        },
        [filters],
    );

    const {
      ...
      setGlobalFilter,
    } = useTable(
        {
            globalFilter: ourGlobalFilterFunction
        },
        ...
        useGlobalFilter,
    );

    useEffect(() => {
        setGlobalFilter(filter) // Set the Global Filter to the filter prop.
    }, [filter, setGlobalFilter]);

    return (
        ...
    );
}

Code Sandbox: https://codesandbox.io/s/filter-props-global-filter-i18bd?file=/src/Table.tsx

Finally, I'd like this to do fuzzy text filtering. We'll use the match-sorter library for this



npm install match-sorter



import { matchSorter } from 'match-sorter';

...

const globalFilter = useCallback(
    (rows: Row<T>[], ids: IdType<T>[], query: string) => {
        return matchSorter(rows, query, {
            keys: filters.map((columnName) => `values.${columnName}`),
        });
    },
    [filters],
);

Code Sandbox: https://codesandbox.io/s/fuzzy-text-global-filter-rcy1f?file=/src/Table.tsx

Building a blog with Svelte and Notion

Richard Beattie — Tue, 02 Mar 2021 17:45:04 +0000

I've finally got my blog(ish) website setup in a way I'm happy with. Most of the site is just a static export from sapper but the learning pieces are all entries in a Notion table. Each page in the table has a slug property which sets the url you navigate to e.g. this piece is building-a-blog-with-svelte-and-notion.

You can see it live at: https://r-bt.com/learning

Setting up

To begin you'll need to create a new sapper project:

npx degit "sveltejs/sapper-template#rollup" my-svelte-notion-blog
cd my-svelte-notion-blog
npm install

This will scaffold the general structure for a sapper site. There's lots of template pages that you'll want to change (index.svelte, about.svelte, etc) but we're going to focus on the blog folder.

Go ahead and delete everything inside the blog folder and create an empty index.svelte file.

Creating the Notion Table

First we'll need a Notion table where we are going to pull the posts from.

Create a new page containing Table - Full Page
Add a table item called My first post or whatever you like
Give My first post a new property slug with value my-first-post – we'll use this for the url
Click on Share and copy the id after the page's title in the url somewhere
- For example this page is https://www.notion.so/rbeattie/Building-a-blog-with-Svelte-and-Notion-510a05b08ef842498d686c92614fe912 so I'll copy the id: 510a05b08ef842498d686c92614fe912

Listing all posts

Now, we can get all the items from this table and display them in our website. Notion doesn't have a public API yet but fortunately Splitbee have created a wrapper for their private API, which we'll interact with using sotion

npm install -D sotion

Sotion has built in support for building a blog based on our Notion table. First we'll scope our posts to that table. In _layout.svelte

<script>
    import { sotion } from "sotion";
    const tableId = 'xxxxxxxx' // Whatever you copied before
    sotion.setScope(tableId)
</script>

In blog/index.svelte let's fetch all our posts:

<script>
    import { onMount } from 'svelte';
    import { sotion } from "sotion";

    let posts = [];

    onMount(() => {
        posts = await sotion.getScope();
    });
</script>

posts is an array of objects representing the pages in our table:

[
    {
      id: "510a05b0-8ef8-4249-8d68-6c92614fe912",
      slug: "building-a-blog-with-svelte-and-notion",
      Name: "Building a blog with Svelte and Notion"
    },
  ...
]

Finally, we'll render this as a list

<ul>
    {#if posts.length === 0}
        <span>Loading...</span>
    {/if}
    {#each posts as item (item.id)}
        {#if item.slug}
            <li>
                <a href="blog/{item.slug}">
                    {item.Name}
                </a>
            </li>
        {/if}
    {/each}
</ul>

<style>
  ul {
    list-style: none;
    margin: 1rem 0 0 0;
    padding: 0;
  }

  li {
    padding: 0.25em 0;
  }
</style>

Awesome! Now you should have something like:

Displaying the posts

Now clicking on one of those posts will redirect you to blog/{slug}. This is a dynamic route as we don't know what slug will be. Sapper handles this by putting brackets around the dynamic parameter in the route's filename: blog/[slug].svelte. We can then access the slug in preload script. For more info see: https://sapper.svelte.dev/docs#Pages

In blog/[slug].svelte

<script context="module">
    import { Sotion, sotion } from "sotion";
  export async function preload({ params }) {
    try {
      const { blocks, meta } = await sotion.slugPage(params.slug);
      return { blocks, meta, slug: params.slug };
    } catch (e) {
      return e;
    }
  }
</script>

We use context="module" so the page only renders once it has fetched the content. Importantly as we don't link to these slug pages before client-side javascript is executed this won't interfere with sapper export

If we linked to a slug page sapper export will save the page when exporting stopping it from updating in the future (when directly navigated to)

Then let's get the post's blocks and metadata (Notion properties)

<script>
    export let blocks;
    export let meta;
</script>

and finally we render those blocks

<Sotion {blocks} />

Now you should be able to able to view your posts at http://localhost:3000/blog/[slug] and see the content from your Notion post rendered. This includes text, headings, code, lists and everything else

Post Metadata

Unfortunately we're not done yet. If you want your blog to have reasonable SEO and appear nicely on Twitter and Facebook it's important we add some metadata to the page. Twitter and Facebook have need special meta tags so they're is some duplication.

<svelte:head>
    <title>{meta.Name}</title>
    <meta name="twitter:title" content={meta.Name} />
    <meta property="og:title" content={meta.Name} />
</svelte:head>

To set the page description we'll first add a description property to our posts' Notion page

Then we set the description

<svelte:head>
    ...
    {#if meta.description}
        <meta name="description" content={meta.description} />
        <meta name="twitter:description" content={meta.description} />
        <meta property="og:description" content={meta.description} />
    {/if}
</svelte:head>

Finally there's some miscellaneous meta properties you might want to set for Twitter

<meta name="twitter:card" content="summary" />
 <!-- Your twitter handle -->
<meta name="twitter:site" content="@r_bt_" />
<meta name="twitter:creator" content="@r_bt_" /> 
<!-- An image for the article -->
<meta name="twitter:image" content="https://r-bt.com/profile.jpg" />

and Facebook

<meta property="og:type" content="article" />
<meta property="og:url" content="https://r-bt.com/learning/{slug}" />
<meta property="og:image" content="https://r-bt.com/profile.jpg" />
<meta property="og:site_name" content="R-BT Blog" />

Finish!

You're done. You should now have your own blog powered by Notion with a page listing all your pages and then a dynamic route which renders these pages 😎

You can put this online however you want. I export it and then host it on Netlify

npm run export

If you do export your site you need to redirect requests from blog/[slug] to blog/index.html or else users will get a 404 error since no static files will exist for these routes. With Netlify this is really easy. Create a netlify.toml file and set:

[[redirects]]
    from = "/blog/*"
    to = "/blog/index.html"
    status = 200
    force = true

Now when users go to yoursite.com/blog/first-post Netlify will serve oursite.com/blog/index.html and svelte's client side routing will step in.

Extra: Sitemap

It's good practice to include a sitemap.xml for your site. Since this needs to be dynamic we can't serve it with Sapper's Server Routes (these are static when exported). Instead we can use Netlify Functions.

Create a new folder functions in the root of your directory and then sitemap.js inside this.

We're going to need node-fetch to get the posts from our Notion table, in your root directory run (i.e. functions does not have it's own package.json )

npm install node-fetch

Now in sitemap.js

const fetch = require("node-fetch");

exports.handler = async (event) => {
    const NOTION_API = "https://notion-api.splitbee.io";
    // Your Notion Table's ID
    const id = "489999d5f3d240c0a4fedd9de71cbb6f";

    // Fetch all the posts
    let posts = [];
    try {
        posts = await fetch(`${NOTION_API}/table/${id}`, {
            headers: { Accept: "application/json" },
        }).then((response) => response.json());
    } catch (e) {
        return { statusCode: 422, body: String(e) };
    }

    // Filter those posts to get their slugs
    const filteredPages = pages
        .filter((item) => item.slug !== undefined)
        .map((item) => item.slug);

    // Create the sitemap
    const domain = "https://r-bt.com";
    const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
        <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
            ${filteredPages
                .map((page) =>`
                    <url>
                        <loc>${domain}/learning/${page}</loc>
                        <changefreq>weekly</changefreq>
                    </url>
                `).join("")}
        </urlset>
    `;

    return {
        statusCode: 200,
        contentType: "text/xml",
        body: sitemap,
    };
}

We're nearly there (both creating this sitemap and me finishing this post 🙂). Lastly we need to run this function when yoursite.com/sitemap.xml is requested. In netlify.toml add

[[redirects]]
    from = "/sitemap.xml"
    to = "/.netlify/functions/sitemap"
    status = 200
    force = true

That's it. Commit and deploy to Netlify and your sitemap should be working. I actually had lots of issues getting this to work so if it dosen't for you reach out

Improvements

I'd love if I could someway update each page automatically whenever there's a change in Notion. Live-reloading would be a nice UX while writing.

Firestore Data Validation

Richard Beattie — Sat, 20 Feb 2021 10:27:03 +0000

For prepsheets.com I use Firebase and Typescript. At the start I sort-of took type-safety to the extreme. I use runtypes to validate all the data that comes into the app and have firestore security rules which enforce a schema on the database. This is somewhat annoying, but I think it's end-positive as I can be sure of what data ends up in the database.

The first step is to ensure only valid field names are submitted (to stop users storing lots of arbitrary data)

function incomingData() {
   return request.resource.data;
}

function onlyHasAttrs(attrs){
   return incomingData().keys().hasOnly(attrs);
}

match /users/{userId} {
    allow create: if onlyHasAttrs(['name', 'email', 'picture', 'age']);
}

This uses the hasOnly function on lists. It checks if all keys in incomingData are in attrs

Next I ensure that fields are off the correct type. This is easy for strings and numbers

function hasValidSchema() {
    return (
        onlyHasAttrs(['name', 'email', 'picture', 'age']) &&
        incomingData().name is string &&
        incomingData().name.size() > 0 &&
        incomingData().age is number
    );
}

allow create: if hasValidSchema();

Unfortunately things are more complicated with lists and maps. While you can ensure that a field is off the type list or map you can't validate the members of those objects. Or at least you can't validate an arbitrary number of them. See: https://stackoverflow.com/a/58257828/3949864. Apparently the firebase team is looking into this so you can help get list type safety faster by filing a feature request.

For map attributes I only allow them to be set or updated to being empty. I use Cloud Functions to actually set the data, validating whatever is passed with runtypes.

function hasValidMap() {
    return (
        incomingData().map is map &&
        incomingData().map.size() == 0 ||
        incomingData().map == existingData().map
    );
}

For lists I either use Cloud Functions to set the data or impose a maximum length. For example say we let users list their interests, but they can only list 5. Then in security rules we can use:

function hasValidInterests(interests) {
    return (
        interests is list &&
        (interests.size() < 1 || interests[0] is string) &&
        (interests.size() < 2 || interests[1] is string) &&
        (interests.size() < 3 || interests[2] is string) &&
        (interests.size() < 4 || interests[3] is string) &&
        (interests.size() < 5 || interests[4] is string) &&
        (interests.size() < 6)
    );
}

Using Svelte-Notion & Code Blocks

Richard Beattie — Sat, 20 Feb 2021 09:53:32 +0000

I use svelte-notion to dynamic add learning pieces to my personal site a Notion table. It's a really nice experience and uses Splitbee's Notion-API-Worker. However I had some difficulty getting code-highlighting to work.

svelte-notion uses PrismJS to do the highlighting. This package takes a string of code and then formats it by wrapping the code in different elements with different classes. Of course, to get them styled you have to import a style-sheet from PrismJS, I like Okaidia.

Sapper has built-in support for importing css files so it's as simple as:

import "prismjs/themes/prism-okaidia.css";

Unfortunately this didn't work properly as svelte-notion doesn't wrap the code in a pre and code tag as PrismJS requires: https://prismjs.com/#basic-usage . I've submitted a pull-request but I'm not sure if the package is still maintained so have forked it here

Firebase emulators:start – getaddrinfo ENOTFOUND localhost localhost:4400

Richard Beattie — Sat, 20 Feb 2021 09:45:00 +0000

For some reason today firebase start:emulators broke on me. In the morning it worked fine but when I returned after lunch I just got

An unexpected error has occurred.

I tried restarting my laptop, rolling back firestore.rules changes and updating firebase-tools but nothing worked. The firebase-debug.log had some errors talking about not being able to find localhost

port check error: Error: getaddrinfo ENOTFOUND localhost localhost:4400

However, googling this query returned nothing for the first 30 mins. However, googling this query returned nothing. After an hour of experimenting I found the solution. Add the following to your /etc/hosts file:

127.0.0.1 localhost

Well that was an hour wasted. I still don't know how localhost got disassociated with 127.0.0.1.