MeetMartin

return ({
    ...state, // add everything from the previous state
    quote: action.payload.quote, // change quote based on payload
    author: action.payload.author // change author based on payload
}); // return new state

MeetMartin

// src/store/effects/QuoteEffect.js

import { AsyncEffect, Maybe, randomOf, keysOf } from '@7urtle/lambda';

import quotes from '../../../quotesList';

/**
 * Finds a random quote in an array of quotes and returns it.
 * 
 * @HindleyMilner getRandomQuote :: [[a]] -> [a]

MeetMartin

// /src/store/effects/NetlifyFunction.js

import { AsyncEffect, isEqual, Maybe, map } from '@7urtle/lambda';
import axios from 'axios';

const api_url = isEqual('development')(process.env.NODE_ENV) ? 'http://localhost:5000' : '/.netlify/functions';

/**
 * Ansynchronous post request to a Netlify Function on an input path
 * that maybe returns a returns response data based on input data.

MeetMartin

// /src/store/hooks/QuoteHook.js

import { maybe } from '@7urtle/lambda';

import types from "../types";
import { requestQuote, getQuoteFromNetlify } from '../effects/QuoteEffect';

/**
 * getQuote is a hook that processes requesting a quote through QuoteEffect asynchronously.
 * 

MeetMartin

// /src/store/middleware.js

import types from './types';
import { getQuote } from './hooks/QuoteHook';

const applyMiddleware = state => dispatch => action => {
    switch (action.type) {
        case types.REQUEST_RANDOM_QUOTE:
            console.debug('[applyMiddleware]', types.REQUEST_RANDOM_QUOTE);
            getQuote(dispatch)(action);

MeetMartin

// /src/store/StoreContext.js

import React, { createContext, useReducer, useEffect } from 'react';

import { reducer, initialState } from './reducers';
import { useActions } from './actions';
import { applyMiddleware } from './middleware';

const StoreContext = createContext(initialState);

MeetMartin

// /src/App.js

import React from 'react';

import { StoreProvider } from './store/StoreContext';
import HomePage from './pages/HomePage';

const App = () => {
    return (
        <StoreProvider>

MeetMartin

// /src/pages/HomePage.js

import React, { useContext, useEffect } from 'react';

import { StoreContext } from '../store/StoreContext';
import { QuoteComponent, Background, Footer } from '../components';

const HomePage = () => {
    const { state, actions } = useContext(StoreContext);

MeetMartin

// /src/components/Wallpaper.js

import React, { useContext, useEffect, useState } from 'react';
import { randomOf } from '@7urtle/lambda';
import styled from 'styled-components';

import { StoreContext } from '../store/StoreContext';

const BackgroundDiv = styled.div`
    background: ${props => 'linear-gradient(135deg, ' + props.colors[0] + ', ' + props.colors[1] + ')'};

MeetMartin

// JavaScript functional programming
// Monad under 60 seconds

const Functor = {
    of: value => ({
        value: value,
        inspect: () => console.log(`Functor(${value})`),
        map: fn => Functor.of(fn(value))
    })
};