DEV Community: Carl Topham

Putting the `S` in SOLID JavaScript

Carl Topham — Tue, 16 Feb 2021 00:00:00 +0000

S - Single-Responsibility Principle (SRP) is the first design principal covered by SOLID principals.

SOLID is an Object oriented design principal. It stands for:

S - Single-responsiblity Principle

O - Open-closed Principle

L - Liskov Substitution Principle

I - Interface Segregation Principle

D - Dependency Inversion Principle

The principals were originally created and promoted by Robert Martin (aka Uncle Bob).

SRP simply states that Classes and functions should only have a single responsibility. This sounds fairly easy to do in principle, but in practice, especially in React it can be slightly more nuanced. Let me explain with a class that handles an Artist and the artist's details.

// Wrong!
class Artist {
    constructor(id) {
        this.id = id;
        this.getBio()
        this.getSingles();
        this.getAlbums()
    }

    getBio() {
        fetch(`/artist/${this.id}/bio/`)
       //... do stuff with data
    }

    getSingles() {
        fetch(`/artist/${this.id}/singles/`)
        //... do stuff with data
    }

    getAlbums() {
        fetch(`/artist/${this.id}/articles/`)
        //... do stuff with data
    }
}

const theArtist = new Artist('formerlyKnownAsPrince');

In this example the Artist class is responsible for multiple things. It should just represent an artist, but it also has the responsibility to get the bio, the singles and the albums.

Why is this bad? For example, if we ever need to update getBio to have an extra property, such as this.fetchedData = true we could end up breaking other parts of the class. We could be reeeeeally careful and maybe use more specific variables like this.fetchedBio but the more complex our application and classes/functions get the harder it will be to manage and track this. Instead, we can split the responsibilities up and create different classes and funcions that only handle one responsibility.

// Right!

function getBio(id) {
    fetch(`/artist/${id}/bio/`)
    //... do stuff with data
    return bio;
}

function getSingles(id) {
    fetch(`/artist/${id}/singles/`)
    //... do stuff with data
    return singles;
}

function getAlbums(id) {
    fetch(`/artist/${this.id}/articles/`)
    //... do stuff with data
    return albums;
}

class Artist {
    constructor(bio, singles, albums) {
        this.bio = bio;
        this.singles = singles;
        this.albums = albums;
    }
}

function getArtistDetails(id) {
    const bio = getBio(id);
    const singles = getSingles(id);
    const albums = getAlbums(id);

    return { bio, singles, albums };
}

const { bio, singles, albums } = getArtistDetails('formerlyKnownAsPrince')

const theArtist = new Artist(bio, singles, albums);

Now we have split up the Artist class and moved the methods to pure functions. Each one has a single responsibility.

But what about the getArtistDetails function being responsible for getting the 3 things (bio, singles and albums)? Well this is ok because that it's really 1 responsibility - to get the data!

Now if we want to save that artist, then we can create a new class - Saver which can have just one responsibility too! We don't have to worry about what other methods are on the Artist or what properties it may have. We can just take an Artist and save it without worrying about breaking other properties or methods.

//... the rest
const theArtist = new Artist(bio, singles, albums); // from before

class Saver {
    save (data) {
        // something to save the data
    }
}

const saver = new Saver();

saver.save(theArtist);

React

The same principles apply to react, whether you are creating component classes or functional components.

// Wrong
const Artist = ({ id }) => {
    const [bio, setBio] = useState(null);
    const [singles, setSingles] = useState([]);
    const [albums, setAlbums] = useState([]);

    useEffect(()=> {
        fetch(`/artist/${id}/bio/`)
            .then(data => {
                setBio(data);
            })
    }, [id])

    useEffect(()=> {
        fetch(`/artist/${id}/singles/`)
            .then(data => {
                setSingles(data);
            })
    }, [id])

    useEffect(()=> {
        fetch(`/artist/${id}/albums/`)
            .then(data => {
                setAlbums(data);
            })
    }, [id])

    const singlesList = singles.map(single => (
        <li key={single.id}>{single.title} - {single.releaseDate}</li>
    ));

    const albumsList = albums.map(album => (
        <li key={album.id}>{album.title} <img src={album.artWorkUrl} /></li>
    ));

    return (
        <div>
            { bio ? <h2>{bio.name}</h2> : null }
            <ul>{singlesList}</ul>
            <ul>{albumsList}</ul>
        </div>
    )
}

We have a few things going on that are wrong with the component. There is data retrieval/state logic and there is presentational logic all in the same component. We have the rendering of each list withing the main component. It makes the component very hard to reuse, or change for other uses because it's doing so many things.

Let's fix it! We will separate the data logic from the presentational UI and logic. Each part of the UI has it's own dedicated single responsibility component.


const Bio = ({bio}) => {
    if (!bio) return null;

    return <h2>{ bio.name}</h2>;
}

const SingleList = ({singles}) => {
    const singlesList = singles.map(single => (
        <li key={single.id}>{single.title} - {single.releaseDate}</li>
    ));

    return (
        <ul>
            {singlesList}
        </ul>
    )
}

const AlbumList = ({albums}) => {
    const albumsList = albums.map(album => (
        <li key={album.id}>{album.title} <img src={album.artWorkUrl} /></li>
    ));

    return (
        <ul>
            {albumsList}
        </ul>
    )
}

const ArtistCard = ({bio, singles, albums}) => (
    <div>
        <Bio bio={bio} />
        <SingleList singles={singles} />
        <AlbumList albums={albums} />
    </div>
)

const Artist = ({ id }) => {
    const [bio, setBio] = useState(null);
    const [singles, setSingles] = useState([]);
    const [albums, setAlbums] = useState([]);

    useEffect(()=> {
        fetch(`/artist/${id}/bio/`)
            .then(data => {
                setBio(data);
            })
    }, [id])

    useEffect(()=> {
        fetch(`/artist/${id}/singles/`)
            .then(data => {
                setSingles(data);
            })
    }, [id])

    useEffect(()=> {
        fetch(`/artist/${id}/albums/`)
            .then(data => {
                setAlbums(data);
            })
    }, [id])

    return <ArtistCard bio={bio} singles={singles} albums={albums} />
}

Now it means that we can reuse the UI in other places, for example we could use the ArtistCard for a list of artists. We didn't need to recreate the same UI or handle any logic. It just works™️.

const ArtistList = ({listOfArtists}) => {
    const artists = listOfArtists.map(({bio, singles, albums}) => (
        <ArtistCard bio={bio} singles={singles} albums={albums} />
    ));

    return <div>{artists}</div>;
}

Because the components we have created are all pure (given the same input they will return the same value) this means that we gain 2 very useful benefits.

We can optimise them easily with react memo since the same input returns the same output.
Testing is easy because, again, the output is always the same given the same input, and we don't need to depend on the data source, so we can supply our own data any way we want to mock it!

Summary

Single-Responsibility Principle is a great fundamental principle to learn and use because it makes your Classes, functions and components more reliable, reusable, optimisable and testable.

Just remember to:

Check every function you create to see if there are any smaller parts that can be moved in to single use functions. 2.Check your functions to make sure they are not doing 2 or more different things.
Repeat

React and Material UI (MUI)

Carl Topham — Fri, 08 Jan 2021 00:00:00 +0000

When I first used Material UI, I struggled with a few concepts. I've written this quick overview to help get my head around it, and hopefully guide others to a quicker start.

I'm going to make a new project and then create some (horrible) styles!

Create the project and add MUI

Create a project and install the Material UI package

npx create-react-app material-ui-playground


cd material-ui-playground


yarn add @material-ui/core

Clean up the initial templates

Remove some unused contents (import of the styles) from the index.js

import React from 'react';
import ReactDOM from 'react-dom';
// import './index.css'; DELETE this line and the file
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Replace the App.js content with the following:


const App = () => {
  return (
    <div>
      <h1>Material UI Playground</h1>
    </div>
  );
}

export default App;

Creating a theme

First we need to define a palette to work with - This will define the core color and tones of the UI.

Then we can use the palette to create a theme that we can use around the site. It's not just the color that can be in a theme, but also all other properties such as spacing and font-family.

In my example we will be using colors only. You can import the core colors from the mui package and use them. They come with a range of shades built. We can also specify light, dark and contrastText colors for our palette, but if we don't MUI will automagically do this for us.

import { createMuiTheme } from '@material-ui/core/styles';

import { purple } from '@material-ui/core/colors';
import { amber } from '@material-ui/core/colors';
import { red } from '@material-ui/core/colors';

const theme = createMuiTheme({
    palette: {
        primary: {
            main: purple["500"],
            // We don't need to set the text colour as MUI will work this out
        },
        secondary: {
            main: amber["600"],
            // We will manually set the alternate colours
            light: amber["200"],
            dark: amber["900"],
            contrastText: '#222222'
        },
        error: {
            main: red["500"]
        },
        background: {
            default: '#fff',
        },
    },
});

export default theme;

Then in the App.js import the theme and theme provdier.

import { ThemeProvider } from '@material-ui/styles';

import theme from "./theme";

// ... the rest

Then wrap the returned DOM in a <ThemeProvider /> like so:

// ... rest

const App = () => {
  return (
      <ThemeProvider theme={theme} >
        <div>
          <h1>Material UI Playground</h1>
        </div>
      </ThemeProvider>
  );
}

export default App;

Now the components within the ThemeProvider will all be able to use the theme we have just created. Let's use it.

We could just import the components directly into our App but to keep them nice and tidy (and reusable elsewhere) we will make a component!

Create a component components/TitleBlock.index.jsx. In this we will use the build in MUI Typography component. This takes a few props. We are going to set the varient to h1 so we get a <h1 /> rendered, and give it a color to use. This is one of our colors we set up in the theme palette.

We're also going to use a Divider which will create a <hr />.

import Typography from "@material-ui/core/Typography";
import Divider from '@material-ui/core/Divider';

const TitleBlock = ({title}) => (
    <>
        <Typography variant={"h1"} color={"primary"} >{title}</Typography>
        <Divider />
    </>
)

export default TitleBlock

Now we can import it and use it in the App.js.

import { ThemeProvider } from '@material-ui/styles';

import theme from "./theme";
import TitleBlock from "./Components/TitleBlock";

const App = () => {
return (
    <ThemeProvider theme={theme} >
        <TitleBlock title="Material UI Playground" />
    </ThemeProvider>
);
}

export default App;

You should see something like this:

Material UI contains a full set of built in components used to build a website from Layout to Forms.

There is the more core components like Typography, Container and Link.

Typography component which we have just used which has a whole range of variants that allow all headings & paragraphs.
Layout components like Box and Container for building wrappers and containers.
Interactive components like Link replace <a /> tags

Then there are more bespoke components like Breadcrumb and Paper. These are prebuilt components that allow you to build the detail of your component more quickly in a uniform design language.

However if you find that there is a component that you need to build yourself, you are not just stuck with what is provided. There are also tools so that you can style your own components and create the styles for them.

Making styles

Styling is done using JSS. It's like CSS but done with JavaScript objects and the JavaScript names for properties (camelCase).

Styling child elements

We have created a theme and it can be used by the built in components, but what if we have some user generated content or there is some markup that you don't want to convert directly to use MUI components. This is where you can use styles.

Let's say we have the following:

const UserContent = () => {

    return (
        <div>
            <h3>I am a user comment</h3>
            <p>Here is a list:</p>
            <ul>
                <li>Point A</li>
                <li>Point 2</li>
                <li>Final point</li>
                <li>The end!</li>
            </ul>
        </div>
    )
}

export default UserContent;

First we want to create some styles in the UserContent component:

import makeStyles from "@material-ui/core/styles/makeStyles";

// Takes the theme we have used in the ThemeProvider
const useStyles = makeStyles((theme) => ({
    userContentStyles : {
        // Create a catch all style for all elements so we don't
        // need to create each HTML element
        // we use the body1 property which is for <p />
        // the theme.typography.body1 is an object so this can be added straight on the key
        "& *": theme.typography.body1,
        // To style the <h3 /> we can create a style for it.
        "& h3": {
            // because we are using 2 properties in here we need to wrap them in braces. 
            // We also have to spread the typography object.
            ...theme.typography.h3,
            // Then we can just apply the color using the theme's color object which is a string.
            color: theme.palette.secondary.main
        },
        "& li": {
            // To apply some spacing to our list we could use some spacing properties
            marginBottom: theme.spacing(4)
        },
    }
}));
// ... rest

With the h3 element we have to spread the typography object because it contains things like font-sizes, line-height, weight etc. When it is the only value we're using for a key (eg & *) you don't need to spread it!

If you wanted to pick only certain aspects of the h3 typography object you could just pull out the values you need.

"& h3": {
    fontWeight: theme.typography.body1.fontWeight, // pseudo code: Not sure these are the prop names!
    lineHeight: theme.typography.body1.lineHeight, // pseudo code: Not sure these are the prop names!
    // and so on!
}

With the palette properties we don't need to spread them because they are just a value so we can use it as is.

Now we can use the styles in the component itself.

const UserContent = () => {
    // Then we get the created styles in the component
    const styles = useStyles()

    // Add them as a className. Note we use the "userContentStyles" key of the styles object
    return (
        <div className={styles.userContentStyles}>
            <h3>I am a user comment</h3>
            <p>Here is a list:</p>
            <ul>
                <li>Point A</li>
                <li>Point 2</li>
                <li>Final point</li>
                <li>The end!</li>
            </ul>
        </div>
    )
}

export default UserContent;

Note: I am making very obvious changes for illustrative purposes. My UI skills are better than the above design!

Classes for each element

The other way we can style child elements is using class names for all elements.

Make a new component Classy/index.jsx. First we import the makeStyles and use this to define a style function that uses the theme to return our styles.

import makeStyles from "@material-ui/core/styles/makeStyles";

 // Takes the theme we have used in the ThemeProvider
 const useStyles = makeStyles((theme) => ({
     // These keys will be used to define the classes for components/elements
    wrapper: {
        // set the properties using theme values
        padding: theme.spacing(1),
        background: theme.palette.secondary.light
    },
     heading: {
         color: theme.palette.secondary.contrastText,
         ...theme.typography.h4, // spread objects
     },
     content: {
        padding: theme.spacing(2),
         color: theme.palette.primary.contrastText,
         background: theme.palette.primary.dark,
         // We can also target nested children as per the other example
         "& *": theme.typography.body1,
     }
 }));
// ..rest

In the above example the wrapper, heading and content are all going to be propeties of the style object we create so we can then use them as our classes. We do this by creating the style object in the component as styles and then we can use styles.PROPRTY_NAME to use the className that the JSS/makeStyles has created for us, like so:

You should have noticed that we have mixed both classes on multiple components (styles.WHATEVER), and child component styling (& *). That gives us great flexibility to style what we need.

const Classy = () => {
    // Create the styles object
    const styles = useStyles()

    // Then use the keys we created above to apply the classes to the right elements
    return (
        <div className={styles.wrapper}>
            <h4 className={styles.heading}>I am styled by the "styles.heading".</h4>
            <div className={styles.content}>
                <p>Hello! 👋. This element is styled by the nested selector "& *".</p>
            </div>
        </div>
    )
}

export default Classy;

Import it into your App.js and add it to the component and you should see something like this:

That covers child components, but what about global elements!

Global styles

So far we have seen how to style components and their descendants. But what about if you need to apply style to the html or body?

In this case you still create a component, however you can style Global elements by creating a @global style. Anything within this is applied to the the root and becomes global. Within this you can add your selectors such as body and apply the styles you need.

Note: By default, MUI already has normalised styles applied to elements to keep all browsers consistent.

import withStyles from "@material-ui/core/styles/withStyles";

const GlobalCss = withStyles({
    '@global': { // Declare a @global selector in order for jss to pull out the styles
        "html, body": { // create your styles to apply globally
            margin: 0,
            padding: 0,
            backgroundColor: "#pink"
        },
    },
})(() => null);

export default GlobalCss;

Then import and use it in your App:

import { ThemeProvider } from '@material-ui/styles';

import theme from "./theme";
import TitleBlock from "./Components/TitleBlock";
import UserContent from "./Components/UserContent";
import GlobalCss from "./Components/GlobalCSS";

const App = () => {
  return (
    <>
      <GlobalCss />
      <ThemeProvider theme={theme} >
          <TitleBlock title="Material UI Playground" />
          <UserContent />
      </ThemeProvider>
    </>
  );
}

export default App;

You can also create global styles for the MUI component classNames in the GlobalCSS.

const GlobalCss = withStyles({
    '@global': { // Declare a @global selector in order for jss to pull out the styles
        "html, body": { // create your styles to apply globally
            margin: 0,
            padding: 0,
            backgroundColor: "pink"
        },
        // Target the MUI class
        ".MuiTypography-h1": {
            textDecoration: "underline" // A silly style to make a point!
        }
    },
})(() => null);

export default GlobalCss;

Nested themes

With nested themes you need to target classes via the more generic [class*="MuiTypography-h1"] if you wish to style all of an element.

The [class*="CLASSNAME"] selector selects all classes that contain a value of CLASSNAME.

We need to use this because the nested theme class names change from MuiTypography-h1 to MuiTypography-h1-9999 where 9999 is a unique theme number! We are selecting all classes that contains MuiTypography-h1.

const GlobalCss = withStyles({
    '@global': {
        // ... the rest
        ".MuiTypography-h1": { // only targets the to level / single theme
            textDecoration: "underline"
        },
        '[class*="MuiTypography-h1"]': { // Targets all themes due to selector
            fontSize: "1em"
        }
    },
})(() => null);

I am using the same theme twice just to demo the class name changes, but you would use a secondary theme in the real world™️!

<ThemeProvider theme={theme} > // Top level theme
  <TitleBlock title="Material UI Playground" /> // uses only top level theme
  <ThemeProvider theme={theme} > // Nested theme
      <TitleBlock title="Material UI extra themed" /> // Uses nested theme overides and top level theme
      <UserContent />
  </ThemeProvider>
</ThemeProvider>

The end!

And there you have it. You can now style everything from the built in components, through to nested child components and global styles too.

Formatting percentage values with JavaScript Intl

Carl Topham — Tue, 05 Jan 2021 00:00:00 +0000

Javascript contains an Internationalization API that you can use to format numbers to a user's locale. Setting the style to percent is all that is needed.

Intl.NumberFormat("en-GB", { style: "percent"}).format(1.2345); // => "123%"

Note: A value of 1 will return 100% because 1x anything is 100%!
1 * 100 = 100; // 100% 
1.5 * 100 = 150; // 150%   

To specify the decimal places use minimumFractionDigits and maximumFractionDigits to give you more visual control.

Intl.NumberFormat("en-GB", { style: "percent", 
    minimumFractionDigits: 1,
    maximumFractionDigits: 2
}).format(123.45); // => "123.45%"

This can all be wrapped in a function to save repetition and keep consistency across your app.

const formatPercentage = (value, locale = "en-GB") => {
    return Intl.NumberFormat(locale, {
        style: "percent",
        minimumFractionDigits: 1,
        maximumFractionDigits: 2
    }).format(value);
};

formatPercentage(1); // => "100.0%"
formatPercentage(0.1); // => "10.0%"
formatPercentage(0.13); // => "13.0%"
formatPercentage(0.135); // => "13.5%"
formatPercentage(0.1357); // => "13.57%"
formatPercentage(0.13579); // => "13.58%"

Formatting currency with JavaScript Intl

Carl Topham — Thu, 17 Dec 2020 00:00:00 +0000

Javascript's Internationalization API allows you to format currency. It takes the locale and options to configure the currency we're using. The options require the style to be set to currency and a currency option to specify the unit type, as this is returned as part of the result.

Intl.NumberFormat("LOCALE", { style: "currency", currency: "CURRENCY UNIT"}).format(VALUE); // => "€1.23"

The following example formats a EUR (Euro) currency of the value 1.2345 into a en-GB (English - Great Britain) format.

Intl.NumberFormat("en-GB", { style: "currency", currency: "EUR"}).format(1.2345); // => "€1.23"

To save configureing this each time we use the formatting it can be wrapped in a function and the values passes to it. This example tahe the value and optionally a locale, defaulting to en-GB. It returns a USD value formatted to the input locale.

const formatUSDCurrency = (value, locale = "en-GB") => {
    return Intl.NumberFormat(locale, {
        style: "currency",
       currency: 'USD',
    }).format(value);
};


formatUSDCurrency(1230000) // => "US$1,230,000.00"
formatUSDCurrency(1230000, "de-DE") // => "1.230.000,00 $"
formatUSDCurrency(1230000, "fr-FR") // => "1 230 000,00 $US"

You can also configure significant digits, plus/minus signs and other settings as needed.

You can either specify the locale yourself, as I have done above, or you can get the user locale from the browser.

Strava API activity sync with Axios, React, Redux & Saga - part 2

Carl Topham — Wed, 16 Dec 2020 00:00:00 +0000

With the auth and state setup from part 1 of "Strava API activity sync with Axios, React, Redux & Saga" we can now progress to getting the activities and displaying them in a table.

Overview

Now we have tokens we can start to get the data from Strava. The steps we will take cover the following:

Adding moment to handle date based checks
Create constants for getting activities
Create the reducers to handle the results of getting the activities
Using Sagas to retrieve the activities from Strava's API, including;
- Auth - Checking the token is valid and if not getting a new one
- Activities - Retrieving multiple pages of data
Display the activity data on the landing page:
- Creating a Table component.
- Using it on the Homepage
Bonus: Loading states!

Handling dates

We're going to be doing some date manipulations and checks so let's add a library to help us... Moment for some date "maths".

yarn add moment

Note: At this point in time you can, and probably should, use native JavaScript date objects. However, for the sake of simplicity I am using moment.

Create the Activities life cycle

Constants

Firstly we need to create the constants we'll be using to handle the activities. We create one to handle the start of the process, and need a second one which will be used every time we finish loading a page so that we can add the data to our Redux store.

// file: src/redux/constants/activities.js
export const ACTIVITIES_SYNC_START = "ACTIVITIES_SYNC_START";
export const ACTIVITIES_PAGE_LOADING_COMPLETE = "ACTIVITIES_PAGE_LOADING_COMPLETE";

Actions

We only have one action. It will be linked to a button that triggers our syncing process. We import our constant ACTIVITIES_SYNC_START and the use it in the action.

// file: src/redux/constants/actions/activities.js

import { ACTIVITIES_SYNC_START } from "../constants/activities";

export const getActivities = () => ({
    type: ACTIVITIES_SYNC_START
});

Reducers

Because the payload we recieve does not include all of the activities in one page we need to merge the existing activity state with the data from each page. We use unionBy to merge the state based on a property of each activity so that we only keep the unique ones and do not end up with duplicates. We use the activity id as this is unique across all Strava activities. One side effect of this is that if you update an activity and resync the new changes will never be updated because the id already exists in our state. Going forward you could write extra actions/reducers/sagas to remedy this.

import unionBy from "lodash/unionBy";

import { ACTIVITIES_PAGE_LOADING_COMPLETE} from "../constants/activities";

const initialState = {
    activities: [] // we start with no activities
};

export default function (state = initialState, action) {
    switch (action.type) {
        case ACTIVITIES_PAGE_LOADING_COMPLETE:
            // unionBy will merge 2 sets of data by ap property on the objects - our case id
            // if we reimport data at a later date then duplicate ids are ignored!
            const activities = unionBy(state.activities, action.payload, "id");
            return { ...state, activities };
        default:
            return state;
    }
};

Then update the src/reducers/index.js to import and use the activities reducer we just created:

import { combineReducers } from "redux";
import { connectRouter } from "connected-react-router";
import auth from "./auth";
import activities from "./activities"; // import this

export default (history) =>
    combineReducers({
        router: connectRouter(history),
        auth,
        activities // and use it!
    });

Reboot your app and you should have an empty redux state for activities:

activities : {
    activities: []
}

Why do we have activities nested in activities. It's useful to keep the loading state within the outer activities so that we can show loading spinners and display error states. In our tutorial, all we know is that there is a list of activities and have no idea about what currently being updated by the app. This will be covered in a future tutorial.

Updating the token

After a few hours your Strava token will be invalid as it expires. We will use the refresh_token to get a new access token. Starting in validateAuthTokens() we check if the current expires timestamp is still in the future and if it is not, then we know that we need a new set of tokens.

updateRefreshToken calls the token endpoint using our client_id, client_secret, the refresh_token which will return your new tokens. If you hit this endpoint before the tokens expire then it just returns the current ones. Since you have to wait approx 6 hours for tokens to expire you can manually edit the expiresAt in the dev tools > application > localstorage and set it to 0 - This will then think the token has expired!

In the real world™️, the tokenClient should be on a backend (eg Netlify function or AWS lambda) where the client_secret is not accessible to the users browser. The token client would be replaced by a backendClient or secretClient or similar which would be passed only the refreshToken.

// file: src/redux/sagas/auth.js

//... the existing auth.js js file

const updateRefreshToken = () => {
    // Get the refresh token from localstorage
    const refreshToken = localStorage.getItem("refreshToken");

    // using the token client we then post to the token endpoint with
    // our client_id, client_secret, the refresh_token
    // In a realworld app we would pass our refresh_token to a backend where we can keep the client_secret a secret!
    return tokenClient({
        url: "/token",
        method: "post",
        params: {
            client_id: clientID,
            client_secret: clientSecret,
            refresh_token: refreshToken,
            grant_type: "refresh_token"
        }
    })
        .then((response) => {
            // return the new tokens and timestamps to be handled
            return response.data;
        })
        .catch((error) => {
            throw new Error(error);
        });
};

const tokenIsValid = () => {
    // get the existing token from localstorage
    const expiresAt = localStorage.getItem("expiresAt");
    // create a timestamp for now down to the second
    const now = Math.floor(Date.now() / 1000);
    // Check if the expires timestamp is less than now - meaning it's in the past and has expired
    return now < expiresAt;
};

export function* validateAuthTokens() {
    // 1. call the function to check if the token is valid
    const validToken = yield call(tokenIsValid);

    // 2. If the token is invalid then start the process to get a new one
    if (!validToken) {
        // call the function to get new refresh tokens
        const data= yield call(updateRefreshToken);
        // put the action to handle the token updates (which stores them in localstorage)
        yield put(updateAuthTokens(data));
    }
}

Activities Saga

Now that we have a way to update the token and keep our client valid we can create our activities saga. Once triggered, this will:

Check/update the auth tokens (with the tokenClient we just setup)
Starting at an epoch and page 1 it will step through all pages of activities
- Use the apiClient to retrieve each page until it reaches a page with an empty list, meaning we have reached the end.

import get from "lodash/get";
import moment from "moment";
import { call, put, select, takeLeading } from "redux-saga/effects";

import { apiClient } from "../../api";
import { validateAuthTokens} from "./auth";
import {ACTIVITIES_PAGE_LOADING_COMPLETE, ACTIVITIES_SYNC_START} from "../constants/activities";

const getActivity = (epoch, page = 1) => {
    // Get the data from Strava starting from `epoch` and with the page number of `page`
    return apiClient({
        url: `/athlete/activities?per_page=30&after=${epoch}&page=${page}`,
        method: "get"
    })
        .then((response) => {
            // return the data
            return response;
        })
        .catch((err) => {
            throw err;
        });
};

const getLastActivityTimestamp = (state) => {
    // The epoch is dependant on the last activity date if we have one
    // This is so that we only get activities that we don't already have 
    const lastActivity = state.activities.activities.slice(-1)[0];
    const lastDate = get(lastActivity, "start_date");

    if (lastDate) {
        // return the unix timestamp of the last date
        return moment(lastDate).unix();
    }

    // Manually set a year (either in the env or default to 2019)
    // I have set a recent one otherwize it's a big first sync
    // And if there are a LOT of activities then you may run out of local storage!
    const initialYear = Number(process.env.REACT_APP_INITIALYEAR || 2019);

    // Create a timestamp for this year
    return moment().year(initialYear).startOf("year").unix();
};

function* updateAthleteActivity() {
    // 1. Check the tokens are valid and update as needed
    yield call(validateAuthTokens);

    // 2. set the page and epoch - The epoch depends on the last activity date
    let page = 1;
    const epoch = yield select(getLastActivityTimestamp);

    try {
        while (true) {
            // Loop through pages until we manually break the cycle
            // Start the process of getting a page from Strava
            const { data } = yield call(getActivity, epoch, page);

            // Page has no activities - Last page reached
            if (!data.length) {
                // If the result has an empty array (no activities) then end the sync - we must have them all!
                break;
            } else {
                // put the data into redux and let the activity reducer merge it
                yield put({ type: ACTIVITIES_PAGE_LOADING_COMPLETE, payload: data });

                // Next slide please!
                page += 1;
            }
        }
    } catch (e) {
        yield console.log(e)
    }

}

export function* watchUpdateAthleteActivitiesAsync() {
    yield takeLeading(ACTIVITIES_SYNC_START, updateAthleteActivity);
}

Import the new saga to the root saga so we can start to listen for ACTIVITIES_SYNC_START.

// file src/redux/sagas/index.js
import { all } from "redux-saga/effects";

import { beginStravaAuthAsync, validateStravaTokenAsync } from "./auth";
import { watchUpdateAthleteActivitiesAsync} from "./activities"; // Add

// single entry point to start all Sagas at once
export default function* rootSaga() {
    yield all([ 
                beginStravaAuthAsync(), 
                validateStravaTokenAsync(), 
                watchUpdateAthleteActivitiesAsync() // Add
            ]);
}

Create the "front end"

Display activities in a table

Create a table component. This takes an array of activities and renders the title.

const Table = ({activities}) => {

    return (
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody>
                {activities.map(activity => (
                    <tr key={activity.id}>
                        <td>{activity.name}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    )
}

export default Table;

There is a lot more that can be displayed if you wish!

{
    resource_state:2
    name:"Night Ride"
    distance:20800.4
    moving_time:4649
    elapsed_time:4649
    total_elevation_gain:96
    type:"Ride"
    workout_type:null
    id:398412246
    external_id:"Ride390811004.gpx"
    upload_id:447540868
    start_date:"2010-01-01T00:00:00Z"
    start_date_local:"2010-01-01T00:00:00Z"
    timezone:"(GMT+00:00) Europe/London"
    utc_offset:0
    location_city:"Malpas"
    location_state:null
    location_country:"United Kingdom"
    start_latitude:55.06
    start_longitude:-1.68
    achievement_count:0
    kudos_count:0
    comment_count:0
    athlete_count:1
    photo_count:0
    trainer:false
    commute:false
    manual:false
    private:false
    visibility:"everyone"
    flagged:false
    gear_id:"b1131808"
    from_accepted_tag:false
    upload_id_str:"447540868"
    average_speed:4.474
    max_speed:5.4
    average_watts:106.7
    kilojoules:496
    device_watts:false
    has_heartrate:false
    heartrate_opt_out:false
    display_hide_heartrate_option:false
}

The Home page

We need to import our syncActivities action and our Table into the HomePage.

import { useSelector, useDispatch } from "react-redux";

import {beginStravaAuthentication} from "../redux/actions/auth";
import {syncActivities} from "../redux/actions/activities"; // New
import Table from "../components/table"; // New

const HomePage = () => {
    const auth = useSelector((state) => state.auth);
    const activities = useSelector((state) => state.activities.activities); // New: Get the activities from the state

    const dispatch = useDispatch();

    return (
        <div>
            <h1>Home</h1>

            { auth.isAuthenticated ? (
                <>
                    <h2>Logged in</h2>
                    {/* Add a button to dispatch our syncActivities action */}
                    <button type="button" onClick={() => dispatch(syncActivities())}>Sync activities</button>

                    {/* Display the activities in the table */}
                    <Table activities={activities} />
                </>
            ): (
                // add the dispatch to the button onClick
                <button type="button" onClick={() => dispatch(beginStravaAuthentication())}>Authorise on Strava</button>
            )}
        </div>
    )
}

export default HomePage;

With this added you can now sync your activities.

When you do this you will notice that the list slowly starts to grow as it syncs and the only way you know that it is complete is that it stops growing after a while (and you can see your latest activities!).

Some extra bonuses

Save the activities

Now that we have activities it would be nice if they are saved on a refresh! Open up your configureStore and update the saveState to:

saveState({
    auth: store.getState().auth,
    activities: store.getState().activities // Additional state to save
});

Show a loading state

To add a loading state to the activities we need to add a loading state. First add a new constant to handle this:

// file: src/redux/constants/activities.js
export const ACTIVITIES_SYNC_STATE = "ACTIVITIES_SYNC_STATE";
// ... the rest

Then add an acompanying action. This will take a payload as an argument that we can use to update the state. In our case we will be passing it something like {loading: true}.

// file: src/redux/actions/activities.js
export const setActivitiesState = (data) => ({
    type: ACTIVITIES_SYNC_STATE,
    payload: data
});

We now need to update our reducers to handle this new action:

// file: src/redux/reducers/activities.js
import unionBy from "lodash/unionBy";

import { ACTIVITIES_PAGE_LOADING_COMPLETE, ACTIVITIES_SYNC_STATE } from "../constants/activities"; // add ACTIVITIES_SYNC_STATE

const initialState = {
    activities: [],
    loading: false // add the default loading state (false)
};

export default function (state = initialState, action) {
    switch (action.type) {
        // Add the action here
        case ACTIVITIES_SYNC_STATE: 
            // merge our payload in
            return { ...state, ...action.payload}

        case ACTIVITIES_PAGE_LOADING_COMPLETE:
            const activities = unionBy(state.activities, action.payload, "id");
            return { ...state, activities };

        default:
            return state;
    }
};

Our saga must now be updated to put the actions into redux so we can change the loading state.

// file: src/redux/sagas/activities.js
// ... other imports

import { setActivitiesState} from "../actions/activities"; // import the state new action

// ... the rest

function* updateAthleteActivity() {
    // Add the put for ACTIVITIES_SYNC_STATE and we pass a payload of loading: true
    yield put(setActivitiesState({loading: true})) 

    yield call(validateAuthTokens);

    let page = 1;
    const epoch = yield select(getLastActivityTimestamp);
    try {
        while (true) {
            const { data } = yield call(getActivity, epoch, page);

            // Page has no activities - Last page reached
            if (!data.length) {
                break;
            } else {
                yield put({ type: ACTIVITIES_PAGE_LOADING_COMPLETE, payload: data });
                page += 1;
            }
        }
    } catch (e) {
        yield console.log(e)
    }

    // I like to add a small delay to the final action just so that the loading state is visible for a short while
    // so that users *feel* like something has happened and don't miss it!
    yield delay(1000)
    // Add the put for ACTIVITIES_SYNC_STATE and we pass a payload of loading: false
    // This sets it back to the non loading state and the table should show with everything in!
    yield put(setActivitiesState({loading: false}))
}

// ... the rest

On the HomePage update the activities state to it returns the full activity object so we can hook into the loading state:

    // Old
    // const activities = useSelector((state) => state.activities.activities);

    // New
    const activities = useSelector((state) => state.activities);


    // Old
    // <Table activities={activities} />

    // New
    <Table data={activities} />

Finally, update the Table component to take the new data prop, then extract the loading state and activity data, and update the render to display a loading state.

const Table = ({ data }) => {

    const { loading, activities } = data;

    return (
        <>
            {loading ? (
                <div>
                    <h3>Loading...</h3>
                </div>
            ) : (
                <table>
                    <thead>
                    <tr>
                        <th>Name</th>
                    </tr>
                    </thead>
                    <tbody>
                    {activities.map(activity => (
                        <tr>
                            <td>{activity.name}</td>
                        </tr>
                    ))}
                    </tbody>
                </table>
            )}
        </>
    )
}

export default Table;

And that's it! In the final part of the Strava API app (coming soon) we will move our client_secret secret to a Netlify function to keep things safer.

Strava API activity sync with Axios, React, Redux & Saga - part 1

Carl Topham — Sun, 13 Dec 2020 00:00:00 +0000

Why?

I've been using Strava for over 5 years to track my activities, and more recently analyse them too. Towards the end of 2019 I realised that I was getting close to running 1,000km in a year, so I started a basic spreadsheet to track the data so that I could plan my runs accordingly and hit my goal. The spreadsheet was a basic setup that just plotted distance run vs distance I needed to run, but it got me to the end of the year, and I managed to pass my target. As 2020 began I started to update the spreadsheet to calculate more detailed stats, and more in-depth analysis.

Adding activities manually every time I completed them is tedious and more importantly, minor disctane descrepacies were making my analysis inaccurate - Although my entries are only a few metres out per activity it all adds up after a hundred or so and the analysis ends up wrong!

Autotomation of the activity entries is the best and easiest way to manage my data. There are a few scripts out there that allow downloading of your activities to a CSV, however these also involve a manual step which is not ideal.

Let's build a web app to use the Strava API to retrieve activity details and store them in Redux.

Building the web app

We're going to do this in a few sections:

Create the app and install the core dependencies
Get a Strava API key/secret
Setup the API client
Get the Auth tokens
Get some activities (part 2)
Display activities in a table (part 2)

Create the app and install the dependencies

First we want to get the core app setup, and the needed dependencies installed.

npx npx create-react-app strava-api-app

After it creates the app and installs the dependencies go to the directory:

cd strava-api-app

Then we need to install everything that we need. I'm using yarn but npm is also good!

yarn add redux react-redux react-router react-router-dom connected-react-router redux-saga history@4.10.1

Setup the store

Create the Auth state src/redux/reducers/auth.js

// file: src/redux/reducers/auth.js
const initialState = {
    isAuthenticated: false,
};

export default function (state = initialState, action) {
    if (!action) return state;

    switch (action.type) {
        default:
            return state;
    }
}

Create a reducers index file src/redux/reducers/index.js. Here we will add our reducers to handle the app data. For now we will just add the core reducers that we start with.

// file: src/redux/reducers/index.js
import { combineReducers } from "redux";
import { connectRouter } from "connected-react-router";
import auth from "./auth";

export default (history) =>
    combineReducers({
        router: connectRouter(history),
        auth
    });

Create a Saga index file src/redux/sagas/index.js. For now this will do nothing.

// file: src/redux/sagas/index.js

// single entry point to start all Sagas at once
export default function* rootSaga() {

}

Create a file in the src directory named configureStore.js. We will import our reducers and sagas into the store.

// file: src/configureStore.js
import { createBrowserHistory } from "history";
import { applyMiddleware, compose, createStore } from "redux";
import { routerMiddleware } from "connected-react-router";
import createSagaMiddleware from "redux-saga";

import createRootReducer from "./redux/reducers";
import rootSaga from "./redux/sagas";

const sagaMiddleware = createSagaMiddleware();
export const history = createBrowserHistory();

const configureStore = (initialState = {}) => {
    const enhancers = [];
    const __DEV__ = process.env.NODE_ENV !== "production";
    if ( __DEV__ ) {
        const { devToolsExtension } = window;
        if (typeof devToolsExtension === "function") {
            enhancers.push(devToolsExtension());
        }
    }

    const middleware = [routerMiddleware(history), sagaMiddleware];
    const rootReducer = createRootReducer(history);

    const store = createStore(rootReducer, initialState, compose(applyMiddleware(...middleware), ...enhancers));

    sagaMiddleware.run(rootSaga);

    return store;
};

export default configureStore();

Finally in the index file we need to make some updates. First add a few imports so we can use the store. Then update the render to add the <Provider></Provider> with the store, and the <ConnectedRouter></ConnectedRouter> with the history.

// file: src/index.jsx

// Add
import { ConnectedRouter } from "connected-react-router";
import { Provider } from "react-redux";
import storeConfig, { history } from "./configureStore";

// Update
ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
                <ConnectedRouter history={history}>
                    <App />
                </ConnectedRouter>
        </Provider>
    </React.StrictMode>,
  document.getElementById('root')
);

With this you can start the app with yarn start and when it boots you should see the normal CRA landing page and in the console you should see "Hello!".

Get a Strava API key/secret

Login to Strava
Go to the developer API page in your settings
Create an app
You should see some details for your app. The key ones are Client Secret and Your Access Token

Setup the API client

For the API client we're going to use axios - It's very similar to the built in fetch but is more compatible with older browsers out of the box and I prefer the configuration. If you prefer fetch then you can use it but you will need to "translate" the API calls accordingly.

Create a file for the api configurations in src/api/index.js. This will contain 2 clients configs and an inteceptor for the apiClient that handles the extra authorization.

import axios from "axios";

export const tokenClient = axios.create({
    baseURL: "https://www.strava.com/oauth",
    timeout: 3000
});

const apiClient = axios.create({
    baseURL: "https://www.strava.com/api/v3",
    timeout: 3000
});

apiClient.interceptors.request.use(
    (config) => {
        const token = localStorage.getItem("accessToken");

        if (token) {
            // eslint-disable-next-line no-param-reassign
            config.headers.Authorization = `Bearer ${token}`;
        }

        return config;
    },
    (error) => {
        Promise.reject(error);
    }
);

export { apiClient };

Get the Auth tokens

The strava API allows a user authorize your app, which redirects back to your app with a token. The token can then be used to check the required scopes are correct and obtain a short-lived access token, refresh token and expiry date. These tokens are then used to retrieve data or a new token.

NOTE: In this tutorial I will be sending my application secret key from the front end. This is NOT SECURE! The token is visible in the code for all to see. It should be sent by a backend service. In a future post I will cover setting up Netlify functions to keep the secret a secret. DON'T use ths for production code.

Let's create some constants to be used around the app...

// file: src/redux/constants/auth.js
export const STRAVA_AUTH_START = "STRAVA_AUTH_START";
export const STRAVA_AUTH_TOKEN_VALIDATE = "STRAVA_AUTH_TOKEN_VALIDATE";
export const STRAVA_AUTH_TOKEN_UPDATE = "STRAVA_AUTH_TOKEN_UPDATE";
export const STRAVA_AUTH_LOG_OUT = "STRAVA_AUTH_LOG_OUT";

Then lets start creating actions for the authentication life cycle... Authenticate, validate, update, deauthenticate.

// file: src/redux/actions/auth.js
import { STRAVA_AUTH_LOG_OUT, STRAVA_AUTH_START, STRAVA_AUTH_TOKEN_UPDATE, STRAVA_AUTH_TOKEN_VALIDATE } from "../constants/auth";

// To begin auth we request app access from strava and the user logs in. A token is returned
export const beginStravaAuthentication = () => ({
    type: STRAVA_AUTH_START
});

// The token must be validated against the app client id and secret
export const validateStravaToken = (code) => ({
    type: STRAVA_AUTH_TOKEN_VALIDATE,
    payload: code
});

// A validated app access only lasts so long. After a while we need to request a new token. 
// When we do the new tokens must be saved
export const updateAuthTokens = ({ refresh_token: refreshToken, expires_at: expiresAt, access_token: accessToken }) => ({
    type: STRAVA_AUTH_TOKEN_UPDATE,
    payload: {
        isAuthenticated: true,
        refreshToken,
        expiresAt,
        accessToken
    }
});

// A user must be able to log out. When the app recieves this request we will remove all data from storage, remove tokens and deauth the app with Strava.
export const beginStravaDeauthentication = () => ({
    type: STRAVA_AUTH_LOG_OUT
});

Create a src/pages/HomePage.jsx component - We will use this to login / out and sync data.

const HomePage = () => {
    return (
        <div>Home</div>
    )
}

export default HomePage;

Create a src/pages/Token.jsx component - This will eventually handle the incoming token from Strava. For now we just add a placeholder contents.

const Token = () => {
    return (
        <div>Token recieved</div>
    )
}

export default Token;

Open up src/App.js and replace the contents with the following which includes the routes for the initial app and the 2 new components we just created.

// file: src/App.js

import { Route, Switch } from "react-router";

import Token from "./pages/Token";
import HomePage from "./pages/HomePage";

const App = () => {

  return (
      <div>
        <Switch>
          <Route path="/token" exact component={Token} />

          <Route path="/" exact component={HomePage} />
        </Switch>
      </div>
  )
}

export default App;

Update the HomePage to the following:

// import redux hooks
import { useSelector, useDispatch } from "react-redux";
// import the begin auth action
import {beginStravaAuthentication} from "../redux/actions/auth";

const HomePage = () => {
    // get the auth state (so we can use to hide the button when the user is authenticated)
    const auth = useSelector((state) => state.auth);
    // create a dispatch function
    const dispatch = useDispatch();

    return (
        <div>
            <h1>Home</h1>

            {/* Use the auth state to show hide the button */}
            { auth.isAuthenticated ? (
                <h2>Logged in</h2>
            ): (
                // add the dispatch to the button onClick
                <button type="button" onClick={() => dispatch(beginStravaAuthentication())}>Authorise on Strava</button>
            )}
        </div>
    )
}

export default HomePage;

Now if you click the button then the STRAVA_AUTH_START action appear in the Redux dev tools. Next we need to handle it.

Now we need to use the details from the Strava API app we setup earlier.

In the root create a .env file with the following, then stop and restart your app or the new ENV variables will not be in your app.

REACT_APP_STRAVA_CLIENT_ID=your_id
REACT_APP_STRAVA_CLIENT_SECRET=your_secret

NOTE: Again, in this tutorial I will be sending my application secret key from the front end as REACT_APP_STRAVA_CLIENT_SECRET. This is NOT SECURE! The token is visible in the code for all to see. It should be sent by a backend service. In a future post I will cover setting up Netlify functions to keep the secret a secret. DON'T use ths for production code. REACT_APP_STRAVA_CLIENT_ID is ok to be public and will always remain this way.

Create src/redux/sagas/auth.js

import { takeLeading, call } from "redux-saga/effects";
import {STRAVA_AUTH_START} from "../constants/auth";

const clientID = process.env.REACT_APP_STRAVA_CLIENT_ID;

function handOffToStravaAuth() {
    // Get the current address of the app running eg localhost or mycoolapp.io
    const { origin } = window;
    // push the Strava authorise url onto the browser window with our PUBLIC clientID and the return url (origin)
    // Note the redirect_uri=${origin}/token - this is the token page we setup earlier.
    window.location.assign(`https://www.strava.com/oauth/authorize?client_id=${clientID}&redirect_uri=${origin}/token&response_type=code&scope=activity:read_all`);
}

function* beginStravaAuthentication() {
    // A simple generator function
    // Just yeilds one other function - handOffToStravaAuth
    yield call(handOffToStravaAuth);
}

export function* beginStravaAuthAsync() {
    // This will listen for the first STRAVA_AUTH_START and then call beginStravaAuthentication
    yield takeLeading(STRAVA_AUTH_START, beginStravaAuthentication);
}

If you click the Authorise on Strava button now, nothing will happen as we need to link up the sagas:

import { all } from "redux-saga/effects";

// Import the new async function we created above
import { beginStravaAuthAsync } from "./auth";

export default function* rootSaga() {
    // Add beginStravaAuthAsync to the rootSaga
    yield all([beginStravaAuthAsync()]);
}

Now when you click the button:

beginStravaAuthentication is dispatched
The saga middleware handles the action STRAVA_AUTH_START to every function in the yield all([...])
The beginStravaAuthAsync responds to it as it's listening for STRAVA_AUTH_START. takeLeading means that if you click the button multiple times only the first action is handled until it completes.
beginStravaAuthentication yields a single function using call - handOffToStravaAuth
handOffToStravaAuth pushes the authorise url to the browser which loads Strava's auth dialog
The user authorises the app
Strava returns the app to the redirect_uri with a token as a querystring parameter. eg. http://localhost:3000/token?state=&code=ee7c5a... ...1f073&scope=read,activity:read_all

At this point we need to handle this token and authorise that it's correct.

Next we need to install another package to handle querystrings:

yarn add query-string

Then in the Token component we need to update it to handle an incoming token on load.

import React, {useEffect} from "react"
import queryString from "query-string";

const Token = () => {

    const location = useSelector((state) => state.router.location);

    useEffect (() => {
        // pull the code out of the query string
        const {code} = queryString.parse(location.search);

        console.log(code)

    }, [])

    return (
        <div>Token recieved</div>
    )
}

export default Token;

We can now get the token from the return query from Strava. You can test this out now from the homepage by Authenticating with Strava and then logging in and confirming. You will be returned to http://localhost:3000/token?state=&code=ee7c5a... ...1f073&scope=read,activity:read_all. You should see your code in the console.

We now need to validate your code. First we import the validation action (and redux dispatch) and then we can dispatch the action when we get the code. We also have a check to see if the app is already validated, and if it is just return to the homepage as we can't validate a code again.

import React, {useEffect} from "react"
import queryString from "query-string";
// New imports
import {push} from "connected-react-router";
import { useSelector, useDispatch } from "react-redux";
import { validateStravaToken } from "../redux/actions/auth"

const Token = () => {

    const location = useSelector((state) => state.router.location);
    // Get the current auth state and setup a dispatch action
    const auth = useSelector((state) => state.auth);
    const dispatch = useDispatch();

    useEffect (() => {
        // Check if the user/app is authenticated
        if (!auth.isAuthenticated && code) {
            // pull the code out of the query string
            const {code} = queryString.parse(location.search);
            // dispatch the validation code to be handled by saga
            dispatch(validateStravaToken(code));
        } else {
            // Push back to home page because the user is authenticated or there is no code!
            dispatch(push("/"));
        }

    }, [])

    // Return nothing because this page had nothing to display
    return null;
}

export default Token;

If you now reauthenticate, or refresh the page if the token code is still in the url then you should see a redux action in the dev tools but nothing else will happen:

{
    type: "STRAVA_AUTH_TOKEN_VALIDATE"
    payload: "ee7c5a... ...1f073"
}

Next we need to create a saga to handle this action type. In your src/redux/sagas/auth.js we add the following:

import { takeLeading, call, put } from "redux-saga/effects"; // Update to add put
import {STRAVA_AUTH_START, STRAVA_AUTH_TOKEN_VALIDATE} from "../constants/auth"; // add STRAVA_AUTH_TOKEN_VALIDATE
import {push} from "connected-react-router"; // add

import {tokenClient} from "../../api"; // add

const clientID = process.env.REACT_APP_STRAVA_CLIENT_ID;
// Add! But remember this should only ever be done for non PROD. 
// The secret should be on a non client app (ie backend or lambda like Netlify)
const clientSecret = process.env.REACT_APP_STRAVA_CLIENT_SECRET; 

// ... the existing sagas

// Add the new sagas

const apiValidateToken = (code) => {
    return tokenClient({
        url: "/token",
        method: "post",
        params: {
            client_id: clientID,
            client_secret: clientSecret,
            code,
            grant_type: "authorization_code"
        }
    })
        .then((response) => {
            return response.data;
        })
        .catch((error) => {
            Promise.reject(error);
        });
};

function* validateStravaToken({ payload: code }) {
    // here you could dispatch a loading start action!

    // we dispatch a api call to validate the tokens and it returns a data object with the values we need.
    const data = yield call(apiValidateToken, code);

    // push an the action type: STRAVA_AUTH_TOKEN_UPDATE with the data
    yield put(updateAuthTokens(data));

    yield put(push("/")); // Push the browser to the root when we are done!

    // here you could dispatch a loading end action!
}

export function* validateStravaTokenAsync() {
    // Listen for STRAVA_AUTH_TOKEN_VALIDATE
    yield takeLeading(STRAVA_AUTH_TOKEN_VALIDATE, validateStravaToken);
}

Note! I cannot stress enough about the client secret. Anything that is on the client side is public as it is in the code that is on a users browser. In the real world™️ the token client is a backend client where the code is not available to the user!

Then we need to handle the tokens with a reducer. Update the reducers/auth.js to the following:

import { STRAVA_AUTH_TOKEN_UPDATE } from "../constants/auth"; // Import the constant for the action

const initialState = {
    isAuthenticated: false,
};

export default function (state = initialState, action) {
    if (!action) return state;

    switch (action.type) {
        // The new bits
        case STRAVA_AUTH_TOKEN_UPDATE:
            // save the tokens to the local storage
            localStorage.setItem("refreshToken", action.payload.refresh_token);
            localStorage.setItem("expiresAt", action.payload.expires_at);
            localStorage.setItem("accessToken", action.payload.access_token);

            // update the state to show the app the user is logged in
            return { ...state, isAuthenticated: true}

        default:
            return state;
    }
}

If you authenticate again you should now end back at the homepage and you should see the "Logged in" text and in the application data (dev tools) you can see the tokens we recieved after authenticating. It is these that we will send with subsequent requests to get data or new tokens when our existing token expires.

Our auth redux state should also be showing as isAuthenticated: true

Although the tokens have been stored, the redux state is not stored, so refreshing the page will reset the store. There are a few ways to persist the state:

localstorage. This has file size limits and will eventually be full and break your app, however it's an good initial step. See below
IndexDB - The size limit is your machine drive space so I doubt this will run out, however it's more complicated to setup so I'm not going to cover it here!

Save the state

Create a file named src/localStorage.js:

export const loadState = () => {
    try {
        const serializedState = localStorage.getItem("state");
        if (serializedState === null) {
            return undefined;
        }
        return JSON.parse(serializedState);
    } catch (err) {
        return undefined;
    }
};

export const saveState = (state) => {
    try {
        const serializedState = JSON.stringify(state);
        localStorage.setItem("state", serializedState);
    } catch (error) {
        console.log(error)
    }
};

Then update the configureStore.js:

import { createBrowserHistory } from "history";
import { applyMiddleware, compose, createStore } from "redux";
import { routerMiddleware } from "connected-react-router";
import createSagaMiddleware from "redux-saga";
import throttle from "lodash/throttle"; // Add lodash - we will need to throttle the saving
import { loadState, saveState } from "./localStorage"; // Import the load and save

import createRootReducer from "./redux/reducers";
import rootSaga from "./redux/sagas";

const sagaMiddleware = createSagaMiddleware();
export const history = createBrowserHistory();

const persistedState = loadState(); // Get the state from the localstorage

// remove the initial State from the function
const configureStore = () => {
    const enhancers = [];
    const __DEV__ = process.env.NODE_ENV !== "production";
    if ( __DEV__ ) {
        const { devToolsExtension } = window;
        if (typeof devToolsExtension === "function") {
            enhancers.push(devToolsExtension());
        }
    }

    const middleware = [routerMiddleware(history), sagaMiddleware];
    const rootReducer = createRootReducer(history);

    // replace initialState with persistedState so on boot the app will use the data that exists in the state
    const store = createStore(rootReducer, persistedState, compose(applyMiddleware(...middleware), ...enhancers));

    sagaMiddleware.run(rootSaga);

    // subscribe to store updates so we can action saves on change to state 
    store.subscribe(
        // throttle the save
        throttle(() => {
            saveState({
                auth: store.getState().auth // Only save these sections of the auth
                // if we want to save other state we can add it in here
                // activities: store.getState().activities, etc!
            });
        }, 1000) // 1 per second max!
    );

    return store;
};

export default configureStore();

we also need to add lodash to help throttling the saving or every single redux action would trigger it...

yarn add lodash

Authenticate your app again... then reload and you should still see the logged in state! Hurrah! Now let's get some activities!

In part 2 of "Strava API activity sync with Axios, React, Redux & Saga" we will get the activities and display them.

Getting user locale with JavaScript

Carl Topham — Tue, 24 Nov 2020 00:00:00 +0000

To get a user's prefered locale we can query the navigator.language.

const locale = navigator.language;
console.log(locale); // => "fr"

To change your language in Chrome go to chrome://settings/languages and add/edit the list of languages.

To get the full list of user languages we can use navigator.languages. This returns an array of locales in order of preference.

console.log(navigator.languages); // => ["fr", "en", "en-US"]

Note: The locale value from navigator.language is just the first item from the array of locales;

If you need this value on a server side JavaScript build such as Gatsby then remember that the node.js environment has no concept of the navigator so we need to check for it and specify a fallback when it doesn't exist.

const locale = (navigator && navigator.language) || "en";
console.log(locale); // Client => "fr"
console.log(locale); // Server => "en"

We can then use this preference to format content such as dates, currency and time for users to their local preferences.

Styling React apps - what are the options?

Carl Topham — Sun, 01 Nov 2020 00:00:00 +0000

When building a React app there are a number of ways you can styles your components and layout. These range from plain CSS classes on elements through to fully integrated style libraries that handle building the styles and creating class names for you.

This is by no means an exhaustive list, but the key areas are:

Inline styles
CSS
Sass build and imported as CSS
Sass classes imported as a module
Libraries such as Tailwind which are entirely utility class based systems
Libraries such as Bootstrap where utility’s and prebuilt components are available
Component libraries like ReactBootstrap and MUI with fully built components and properties
Style building libraries like Styled Components
JavaScript based styles like JSS

Inline styles

One of the original styling mechanisms of the web. Styles are placed directly on an element to style it.

<div style="margin-top: 10px; margin-bottom: 20px;"></div>

In a React component we need to change a few things... First, the styles string becomes an object. Next, the properties need to be converted to the JavaScript versions - margin-top becomes marginTop. The rule of thumb here is that if there is a hyphen in the property name, it's removed and the next letter is capitalised. Finally the values must be either strings or numbers. You can however concatenate these together - 10 + "px" or ${myVar}px

<div style={{
        marginTop: 10 + "px",
        marginBottom: `${myVar}px`
    }}
/>

It's easy to create styles that work for just one element and there is no risk of namespacing clashes - however duplication is an issue, as is the lack of :hover or @media.

CSS

We all know CSS. As with normal HTML applying classes to React components is just as simple - Just add the class name to the className prop of the element instead of class.

/* index.css */

.myClass {
    property: value;
}


import './index.css'; 

// ...

<div className="myClass" />

An advantage of plain CSS is that it is as simple as creating a .css file and importing it (in the App root or main index). The styles can then be used everwhere in your App. However the disadvantage of this global style is that it could have unintended styling side effects, especially if multiple people are working on a big project.

A convoluted example:

span { color: red; }

/* somewhere else */

div span { color: blue; }

/* somewhere else again */

div {
    color: green !important;
}

👆 All the text will be green!

Sass build and imported as CSS

Sass follows the same pattern to CSS, except that you need to update the app to handle sass.

yarn add node-sass


/* index.scss */

.myClass {
    property: value;
}


import './index.scss'; 

// ...

<div className="myClass" />

It has the same advantages, plus the ability to nest code, create mixins (re-usable blocks), functions and split files up. It used to also have an advantage of variables, but CSS now has them too. It also has the same disadvantages!

CSS and Sass classes imported as modules

The biggest disadvantage of both CSS and Sass is the global scope. By using them as modules (supported in Create React App currently) we can completely remove this issue. In CRA you must have a file with *.module.css or *.module.scss as the name. This makes CRA treat the file as a module and it is scoped to just this component that imports and uses it. There is no setup needed, it works out of the box as long as the files are named correctly. You can still mix normal css or sass with the modular version, but it's best to use global scpoed CSS just to reset browser styles and establish the very base of the styles like default fonts.

/* index.module.css */

.myClass {
    property: value;
}

.myOtherClass {
    property: value;
}


import styles from './index.module.scss'; 

// ...

<div className={styles.myClass} />
<div className={styles.myOtherClass} />

When the component renders, the actual classname used is a unique hash so there is no risk of namespace clashes and style conflicts with other modules. Global styles can still affect the modules though!

This convoluted example will mess up your module styles, but it would also do that to all other examples too!

/* index.css - global css styles */
* {
    display: none !important; 
}

Utility class based frameworks

Up until now we have relied on our own styles to style our app. Now we can look at some other options. Utility class frameworks consist classes that just apply to single things like padding left, margin top or backround colour. It's up to the developer to use these Lego bricks to create more complex kits. There have been a number of these over the years, but I want to focus on Tailwind.

Tailwind

A prime example is Tailwind. All the styles have all be abstracted away as classes that can be used in combination to build up more complex components.

There is a little more to configure than some of the other options but once done there is little need to revisit the config.

Add required packages for Tailwind & React

yarn add tailwindcss autoprefixer postcss postcss-cli

Create a postcss config for Tailwind

// file: postcss.config.js
const tailwindcss = require("tailwindcss");

module.exports = {
    plugins: [tailwindcss("./tailwind.config.js"), require("autoprefixer")]
};

Update the build & start scripts to create the index.css

...
"scripts": {
    "build:css": "postcss src/styles/index.css -o src/index.css",
    "watch:css": "postcss src/styles/index.css -o src/index.css -w",
    "start": "run-p start:react",
    "start:react": "npm run watch:css & react-scripts start",
    "build:react": "npm run build:css && react-scripts build",
    "build": "npm run build:react",
    ...
  },
...

Create a config for Tailwind

// tailwind.config.js
module.exports = {
    purge: ["./src/**/*.jsx"],
    darkMode: "media", // or 'media' or 'class'
    theme: {
        extend: {}
    },
    variants: {
        extend: {}
    },
    plugins: []
};

Import the created CSS and use the classes

import "./index.css";

// ...
<div class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto"/>

Once the config is setup, then it's very similar to just using CSS (or Sass), just with a massive amount of prebuilt classes to utilise.

Component frameworks

Some frameworks have extra patterns pre-built for developers to use. They can include forms, media, or popup, prebuilt so a single class or set of classes can setup a component quickly. Bootstrap is probably the most famous, although there are others like Bulma or Foundation.

Bootstrap

Bootstrap is similar to Tailwind in many respects. It's a library that gives a huge amount of customisation to the developer. Although not as wide ranging as Tailwind with it's utility classes, it makes up for with prebuild component classes.

yarn add bootstrap


import 'bootstrap/dist/css/bootstrap.min.css';

// ...

<div className="mt-2 bg-danger text-white" />

Component based libraries

As well as libraries, such as Bootstrap, that contain the classes to build the components, there are also libraries that consist of prebuilt components. With these there is no need to add classes. The components already contain the styles needed to display correctly, and usually have props to alter it's variant.

React Bootstrap

React Bootstrap is a replacement for using BootStrap classes directly on elements. eg a <h1 /> is replaced with the <H1 /> component.

yarn add react-bootstrap bootstrap


import 'bootstrap/dist/css/bootstrap.min.css';
import Button from 'react-bootstrap/Button';

// ...
<Button variant="primary">Hello</Button>

Themes and customization can still be carried out by importing the bootstrap sass into your own sass file and using it like the sass/css options above.

Material UI, aka. MUI

Material UI is very similar to React Bootstrap in some ways. Unlike React Bootstrap though there is no CSS to import, but it contains a vast array of prebuilt components and layout wrappers. The configuration for MUI is done in JavaScript and not by overriding the Bootstrap theme.

yarn add @material-ui/core


import { Button } from '@material-ui/core';

// ...

<Button color="primary">Hello!</Button>

To theme Material UI there are a few handy utils like createMuiTheme which alows customisation of core variables like Palette, Spacing, Typography; and and a ThemeProvider context that allows the passing of the theme to child components.

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#f00",
    }
  },
});

<ThemeProvider theme={theme}>
  <Button color="primary">Hello!</Button>
</ThemeProvider>

Themes can also be nested to allow customisation of a subset of components.

Style building libraries

These contain the raw building blocks for HTML markup and create a wrapper for creating scoped styled components.

Styled Components is the main example of this and is used under the hood by some other libraries.

yarn add styled-components

Styled components is very simple to get up and running:

import styled from 'styled-components'

const Button = styled.button`
    background: #f00;
`

// ...

<Button>Hello</Button>

Here we created a Button component that uses the styled component's styled.button which returns a HTML button element. We then use regular CSS to set the background color between the ` `. Variables can also be used in styled components like so:

`
import styled from 'styled-components'

const Button = styled.buttonbackground: ${(props) => props.background };

// ...

Hello

This will use the background prop passed to the component, in this case #ff0. Where you are doing this, it's advisable to use propTypes or similar to set default and required props so there is always a value to use!

JavaScript based styles

Who needs CSS anyway! Let's just use JavaScript for everything!

JSS

JSS is

`
yarn add react-jss

import {createUseStyles} from 'react-jss'

// ...

// Create a style
const useStyles = createUseStyles({
myClass: {
color: '#f0f'
},
// ...
})

const Button = ({children}) => {
// Get the styles we created
const classes = useStyles()

// Use them on the button
return (
    <button className={classes.myClass}>
        {children}
    </button>
)

}

const App = () => (
Hello
);

As per MUI there is also the ability to theme;

`
import { createUseStyles, ThemeProvider, useTheme } from 'react-jss'

// ...

// Create a style
const useStyles = createUseStyles({
myClass: {
color: '#f0f',
background: ({ theme }) => theme.background
},
// ...
})

const Button = ({children}) => {
// Get the styles we created
const classes = useStyles()

// Use them on the button
return (
    <button className={classes.myClass}>
        {children}
    </button>
)

}

const theme = {
background: "#00f"
};

const App = () => (

Hello

);

Conclusion

This was never a competition with a winner. All of the options have merits, caveats, pros and cons. I have found that, in my usage at least, each is better suited to different tasks.

BootStrap, React BootStrap and MUI have it all built in and ready to go. You don't need to think about how to build a component, they already exist.

CSS, Sass, JSS and Styled Components are more suited to building the UI from scratch.

Tailwind sits roughly in the middle, with enough wiggle room to have your own styles but still have all the utilities to get something nice looking rapidly.

Getting to grips with CSS variables

Carl Topham — Wed, 21 Oct 2020 00:00:00 +0000

If you have ever used JavaScript variables then the concept of CSS variables should feel pretty familiar.

You set a variable
You use the variable

CSS variables follows this same pattern, but the language is slightly different.

body {
    --my-variable: red;
}

h1 {
    color: var(--my-variable);
}

What is happening here? Firstly we set the variables - essentially they are custom properties. We use -- before the variable name to make it a variable. Then we use the variable by using var(--variable-name).

<body> <!-- --my-variable: red; -->
    <h1>CSS - Carl's Super Styles!</h1> <!-- colour: red -->
</body>

Usually most variables are set on the pseudo element ::root so that every HTML element will be encompassed by it.

:root {
    --color: red;
    --size: 20px;
    --background: #222;
    --padding: 1em;
}

Scope of variables

CSS variables are scoped to their ancestors (parents, though grandparents to the root pseudo element).

Variables can be changed by child elements, but only apply further downstream in the DOM. That means that variables set in different branches of the DOM are only applicable to that tree. A bit like genetics, you only share the same genes from shared ancestors.

Changing a variable

:root {
    --my-variable: red;
}

body {
    --my-variable: blue;
}

h1 {
    color: var(--my-variable);
}

Here the root color of red will be overridden by the my-variable on the body, so the h1 ends up with blue text.

<!-- :root --my-variable: red; -->
<body> <!-- --my-variable: blue; -->
    <h1>CSS - Carl's Super Styles!</h1> <!-- colour: blue -->
</body>

The Same variable in different trees

In the following example the root --color variable is black. We then set the classes of .red and .blue to red and blue respectively. Then we create a h2 to consume the --color variable.

:root {
    --color: black;
}

.red {
    --color: red;
}

.blue {
    --color: blue;
}

h2 {
    color: var(--color);
}

The h2 that is not wrapped by either one of red or blue inherits the value for the root color variable which is black. Both red and blue redefine the value of the variable and the h2 within their trees will be the relevant color.

<h2>Black</h2>

<div class="red">
    <h2>Red</h2>
</div>

<div class="blue">
    <h2>Blue</h2>
</div>

Media queries

In the pre variable days of css we did this:

.red { 
    font-size: 1em;
}

.blue { 
    font-size: 1em;
}

@media screen and (min-width: 32em) {
    .red {
         font-size: 2em;
     }
    .blue {
         font-size: 2em;
     }

}

With variables we can replace the hardcoded values with values set at the :root.

:root {
    --mobile-size: 1em;
    --desktop-size: 2em;
}

.red { 
    width: var(--mobile-size);
}

.blue { 
    width: var(--mobile-size);
}

@media screen and (min-width: 32em) {
    .red {
         width: var(--desktop-size);
     }
    .blue {
         width: var(--desktop-size);
     }
}

We can do one better and move the media queries to the root, cutting out the need to add extra code for developers to maintain. Media queries will all be managed in 1 place too!

:root {
    --font-size: 1em;
}

@media screen and (min-width: 32em) {
    :root {
        --font-size: 2em;
    }
}

.red { 
    width: var(--font-size);
}

.blue { 
    width: var(--font-size);
}

Final notes and thoughts

One of the important things to remember about CSS variables v1 is that the CSS spec states that var can only be used to set properties, so you cannot use them as part of a media query.

The var() function can be used in place of any part of a value in any property on an element. The var() function can not be used as property names, selectors, or anything else besides property values. (Doing so usually produces invalid syntax, or else a value whose meaning has no connection to the variable.)

That means that the following will currently not work.

@media screen and (min-width: var(--min-width-desktop)) {
  /* ... the content */
}

This is subject to change as later versions of the CSS spec are going to be rolled out in the future.

Even without the current ability to use variables as media queries values, the extra control gained by having reusable values for regular CSS properties is invaluable. With the vast majority of browsers supporting CSS variables then there really is no excuse not to use them in your daily workflow.

React - Memo

Carl Topham — Fri, 24 Jul 2020 00:00:00 +0000

Memoization is used to speed up applications by remembering the results of "expensive" function calls and calculations, so that they don't need to be recalculated again when the inputs have not changed.

For example, if I ask you to calculate the results of a multiplication on paper or in your head, say 23 x 27, then I would expect that it would take you a little time to work out. Then, if I ask you to calculate it again with the same values (23 x 27) would you calculate it again, or would you remember the previous answer and skip the calculation? You would re-use the previous result to save time. This is what memoization does.

Of course in my example the maths is quick and easy for a computer and it's just meant to illustrate the concept. "Expensive" is just a way to describe things that take a longer time to be completed. Expensive for computers could be anything from complex maths, to iterating through large arrays of data to derive an answer.

An example memoization function

If we take a regular function that does a slow calculation, then calling it multiple times will equal multiple long calculations.

function myFunction(input) {
  // Do things that take 5 seconds
  // return the calculated value
  return output;
}

myFunction(x); // 5 seconds
myFunction(x); // 5 seconds
myFunction(x); // 5 seconds

If we memoize this function we can save time on later calculations. The first time we call the function it completes the long calculation and caches the result. Every time we call the function after the first result it accesses the cache and can skip the long function resulting in a quicker return value.

function myMemoisedFunction(input) {
  // create a cache property on the function and initialise it if it's not already
  myMemoisedFunction.memoCache = myMemoisedFunction.memoCache || {};

  // Check the cache for our input values
  // If it has them, then we have doen this before
  if (myMemoisedFunction.memoCache[input]) {
    // return the already calculated value
    return myMemoisedFunction.memoCache[input]
  }

  // Otherwize caluclate the slow things
  // Do things that take 5 seconds
  // set the cache values for next time
  myMemoisedFunction.memoCache[input] = output;

  // return the calculated value
  return output;
}

myMemoisedFunction(x); // 5 seconds
myMemoisedFunction(x); // 0.01 seconds
myMemoisedFunction(x); // 0.01 seconds

This is what the higher order functions of memo and useMemo are used for in React.

React

To understand why it can improve the performance you need to understand a few things about React.

Components re-render during their lifecycle.
When a parent re-renders, all it's children and descendants also re-render.
When a component re-renders, it will recalculate variables.
Recalculating has an overhead.
If the calculation is expensive it will take time, and the application will be less performant.

To counteract this issue react has 2 functions that can be used to memoize variables and components. These are the useMemo hook and the memo function. Both are higher-order functions - namely are used to wrap other functions (and functional components) to cache the results of expensive calculations and renders.

The `useMemo` hook

The purpose of useMemo is to optimize variable recalculation so that expensively generated variables only need to be calculated once, or if an argument changes.

Note: Even though memo can speed up an application, it does have an overhead, so using it on everything could be detrimental. The use case for useMemo is to cache the results of expensive functions and shouldn't be used on all calculations.

useMemo consists of 2 parts:

An anonymous function that takes our expensive calculation which want to memoize.
A dependency array that lists the variables that would cause the result to change - so it will only recalculate if one of these changes.

useMemo( ()=> { /* expensive function */ }, [/* Array of dependencies */])

E.g:

const memoizedResults = useMemo( ()=> reallyReallyComplexAndSlowCalculation(x, y), [x, y])

The dependency array is used to determine if and when to re run the function.

In the following contrived example the a + b will only be run if a or b change.

const memoizedResults = useMemo(()=> { return a + b }, [a, b]);

The `memo` function.

Memoization can also be used for components, however you need to use the memo function to wrap your component. This can either be done when you declare your component, or when you export it.

const MyComponent = React.memo(({a, b}) => {
  // ... the component
})

// or 

const MyComponent = ({a, b}) => {
  // ... the component
};

export default React.memo(MyComponent);

Here is an example component that renders the result of a + b as c. In this example the component will only render the first time, and if either a or b change, otherwise it will use the cached rendered version.

const MyComponent = ({a, b}) => {
    const c = a + b;

    return (
        <div>{a} + {b} = {c}</div>
    )
}

// Memoize the component
export default React.memo(MyComponent);

It is worth noting that if your component uses useContext or useState hooks as part of its implementation, then any changes to their values will trigger a re-render.

In the following example we have a useState hook. Only if the setCount is called by clicking the "More!" button will the count update and trigger a component re-render.

const MyComponent = ({a, b}) => {

    const [count, setCount] = useState(0);

    const c = a + b + count;

    return (
        <div>
          <button onClick={() => setCount(count++)}>More!</button>
          <div>{a} + {b} + {count} = {c}</div>
        </div>
    )
}

// Memoize the component
export default React.memo(MyComponent);

Considerations for using `memo`

It's always worth looking at the profiler to see which components are slow to render and work from there with your optimisation. Even then, there are a few considerations to when you should use memoization on components.

Pure functional components

Because the memo function compares variables and caches the result, the memo fucnction should only be used on pure components - ones that will always render the same results given the same props. This means that the memo function will render the component on the first pass and won't render it again unless the props change.

Rendered often

If your component is rendered often then it's worth considering using memo. If it's not rendered often then the optimisation may be unnecessary.

Uses the same props

If you have a component where the props provided to it are often the same then you can optimise with memo. If the props change regularly then there is no sense in optimising since the re-render with the same values will never (or rarely) be used and caching the values is an unnecessary overhead.

Final thoughts

useMemo and memo should have an integral part in most complex React applications, however their usage should be considered carefully as there is an overhead to using them. Using the profiler to detect and measure your performance gains should be a key part of your development cycle.

If you use both useMemo and memo correctly then you will save your app from needless re-renders and you will have a more optimised and performant app.

Hooking into Gatsby's navigation changes

Carl Topham — Sun, 19 Jul 2020 00:00:00 +0000

On my site there is a toggling navigation menu. But when I toggle it open and then click a link it stays open. This is not right - it should close when you change location. Let's fix it using some really simple hooks in a few minutes. First lets see what we have to start with.

// Original basic version of my Nav component
import React, { useState } from "react";

const Nav = ({ nav }) => {
    const [open, setOpen] = useState(false);

    return (
      <div>
       <button
          type="button"
          onClick={() => {
              setOpen(!open);
          }}
      >
        Toggle
      </button>
        <div className={`${open ? "show" : null}`}>
          <Link to="/">Home</Link>
          <Link to="/about/">About</Link>
        </div>
      </div>
    )
}

This will let the user toggle the nav and see the links by toggling setOpen. They can then navigate to a new page, but because the Nav exists higher up the nesting it never gets re-mounted so open stays in the same state which is true - which is open.

We need to hook into navigation changes - these are from the router and (luckily) are in the context sent to the page. Let's pull out the data.

// Now with some location awareness
import React, { useState } from "react";
import { useLocation } from "@reach/router"; // NEW

const Nav = ({ nav }) => {
    const [open, setOpen] = useState(false);
    const location = useLocation(); // NEW

    return (
      <div>
       <button
          type="button"
          onClick={() => {
              setOpen(!open);
          }}
      >
        Toggle
      </button>
        <div className={`${open ? "show" : null}`}>
          <Link to="/">Home</Link>
          <Link to="/about/">About</Link>
        </div>
      </div>
    )
}

The component is now aware of the location, but had no lasting memory so it does not know if anything has changed. Luckily we can use a hook to track that.

// Now with some location awareness
import React, { useState, useRef } from "react"; // UPDATED
import { useLocation } from "@reach/router";

// New hook
const usePrevious = (value) => {
    const ref = useRef();
    useEffect(() => {
        ref.current = value;
    });
    return ref.current;
};

const Nav = ({ nav }) => {
    const [open, setOpen] = useState(false);
    const location = useLocation(); 
    const prevLocation = usePrevious(location); // NEW

    return (
      <div>
       <button
          type="button"
          onClick={() => {
              setOpen(!open);
          }}
      >
        Toggle
      </button>
        <div className={`${open ? "show" : null}`}>
          <Link to="/">Home</Link>
          <Link to="/about/">About</Link>
        </div>
      </div>
    )
}

Now we have the current and previous locations it's a simple step to compare them. To make sure this only happens when the location changes we will use a useEffect() and set the inputs to location and prevLocation.

// Now with some location awareness
import React, { useState, useRef, useEffect } from "react"; // UPDATED
import { useLocation } from "@reach/router";

const usePrevious = (value) => {
    const ref = useRef();
    useEffect(() => {
        ref.current = value;
    });
    return ref.current;
};

const Nav = ({ nav }) => {
    const [open, setOpen] = useState(false);
    const location = useLocation(); 
    const prevLocation = usePrevious(location);

    // NEW
    useEffect(() => {
        if (location !== prevLocation) {
            setOpen(false);
        }
    }, [location, prevLocation, setOpen]);

    return (
      <div>
       <button
          type="button"
          onClick={() => {
              setOpen(!open);
          }}
      >
        Toggle
      </button>
        <div className={`${open ? "show" : null}`}>
          <Link to="/">Home</Link>
          <Link to="/about/">About</Link>
        </div>
      </div>
    )
}

With the final update the Nav will now "listen" to location changes. When it changes and the location does not equal the previous one we set the state to false, closing the toggled menu.

Running WordPress on Docker

Carl Topham — Tue, 14 Jul 2020 00:00:00 +0000

WordPress runs on a variety of platforms, but last time I was developing I was using a MAMP stack - Mac Apache MySQL & PHP. It's been a while since I was working on WordPress sites and I no longer have MAMP installed on my machine, however I do have Docker running. Since I can create a LAMP stack (Linux... AMP) running on my Mac. This is a bit closer to what the site would be running on in the real world, plus I can deploy the Docker app to something like a DigitalOcean Droplet quickly.

Let's start by creating a folder for this to contain all the configs and data.

mkdir wordpress-docker && cd wordpress-docker

Then add a Docker Compose file, which is used to define and run multiple containers easily.

touch docker-compose.yml

Next we need to configure the file itself, so in your favorite editor open up docker-compose.yml. A few things are configured in the Docker Compose:

The version of Docker Compose to use
The services (containers) we are configuring. These consist of the database and the code.
The image for each container to use
What ports to open and bind to the host (your machine). This allows each container to speak to the other when needed
An env file, where variables like database passwords can be stored so they can be exempt from being committed to source
And in the case of the wp container a link to the database container so it can be accessed by name as mysql since the wordpress container image uses this to connect.

version: "2"
services:
  db:
    image: mariadb
    ports:
      - "8081:3306"
    env_file:
      - .env
  wp:
    image: wordpress
    volumes:
      - ./html/:/var/www/html
    ports:
      - "8080:80"
    env_file:
      - .env
    links:
      - db:mysql

Create a .env files for the variables (You could also use 2 .env files, one for each container). Note that both passwords MUST be the same!

 MYSQL_ROOT_PASSWORD=SuperSecretTellNobody!
 WORDPRESS_DB_PASSWORD=SuperSecretTellNobody!

That's it for config, now it's time to start your Docker containers. The following command will start to download and build the images and then boot them up. Running it with -d runs it in the background once

docker-compose up -d

Once it's booted up and is ready to go you will see something like this:

Starting wordpress-docker_db_1 ... done
Starting wordpress-docker_wp_1 ... done

In your browser head over to http://localhost:8080/ and you'll be welcomed by the initial setup screens.

If you take a look in your directory you'll have a ./html sub-directory that contains all your WordPress files just like a normal WordPress install.

Note: You can stop docker by running docker compose down

DEV Community: Carl Topham

Putting the `S` in SOLID JavaScript

React

Summary

React and Material UI (MUI)

Create the project and add MUI

Clean up the initial templates

Creating a theme

Making styles

Styling child elements

Classes for each element

Global styles

Nested themes

The end!

Formatting percentage values with JavaScript Intl

Formatting currency with JavaScript Intl

Strava API activity sync with Axios, React, Redux & Saga - part 2

Overview

Handling dates

Create the Activities life cycle

Constants

Actions

Reducers

Updating the token

Activities Saga

Create the "front end"

Display activities in a table

The Home page

Some extra bonuses

Save the activities

Show a loading state

Next

Strava API activity sync with Axios, React, Redux & Saga - part 1

Why?

Building the web app

Create the app and install the dependencies

Setup the store

Get a Strava API key/secret

Setup the API client

Get the Auth tokens

Save the state

Next

Getting user locale with JavaScript

Styling React apps - what are the options?

Inline styles

CSS

Sass build and imported as CSS

CSS and Sass classes imported as modules

Utility class based frameworks

Tailwind

Add required packages for Tailwind & React

Create a postcss config for Tailwind

Update the build & start scripts to create the index.css

Create a config for Tailwind

Import the created CSS and use the classes

Component frameworks

Bootstrap

Component based libraries

React Bootstrap

Material UI, aka. MUI

Style building libraries

JavaScript based styles

JSS

Conclusion

Getting to grips with CSS variables

Scope of variables

Changing a variable

The Same variable in different trees

Media queries

Final notes and thoughts

React - Memo

An example memoization function

React

The useMemo hook

The memo function.

Considerations for using memo

Pure functional components

Rendered often

Uses the same props

Final thoughts

The `useMemo` hook

The `memo` function.

Considerations for using `memo`