pete-murphy

module Main where

import Prelude

import Data.Bifunctor (bimap)
import Data.Either (Either(..))
import Data.Generic.Rep as Generic
import Data.Generic.Rep.Show as Generic.Show
import Data.Int (toNumber)
import Data.List.NonEmpty (NonEmptyList, fromFoldable, singleton)

pete-murphy

const mod = (x, y) => x - y * Math.floor(x / y)

const carousel = document.querySelector(".carousel")
const imgList = carousel.querySelectorAll("img")
const length = imgList.length
const [left, right] = [...carousel.querySelectorAll("[class$='button']")]

;(function run(current = 0, last) {
  last !== undefined && (imgList[last].style.display = "none")
  imgList[current].style.display = "block"

pete-murphy

Soup Kitchen Inventory App

MVP Features Breakdown:

• Login page: simple form for a user login flow. Users can enter username and password and login or sign up as a soup kitchen manager.
• Home Page: a grid list of inventory items, (uncategorized for MVP, stretch will be to add categories) that a soup kitchen manager can use to track units, weights, quantities etc.
• Add inventory item page: User can add a new item in their inventory to create an item. i.e. potatoes: '20lbs'
• Edit inventory item: user can edit the quantity, amount, weight or value of an item in their kitchen.
• If an inventory item reaches a '0' (or low threshold) quantity, make sure to indicate to the manager that they need to restock the item by showing that item as out of stock etc.

pete-murphy

Adding GraphQL endpoint to React Wars App

Setting up GraphQL server

There is an official GraphQL wrapper for the SWAPI that takes care of setting this up: https://github.com/graphql/swapi-graphql. Inside of Sprint-Challenge-React-Wars/ directory, clone this repo

$ git clone [email protected]:graphql/swapi-graphql.git

then

pete-murphy

Took inspiration from this Wes Bos tutorial: https://youtu.be/y4gZMJKAeWs?t=868 (I fast forwarded to relevant part)

However, he's doing a simple .replace, which works for strings, but we want to return JSX! So his solution doesn't work in our case (at least all the methods I've tried; I found this SO thread from createClass days of React that addresses why this doesn't work and gives a possible solution: https://stackoverflow.com/questions/30474506/replace-part-of-string-with-tag-in-jsx).

Constructing a RegExp

To start, we need a function that constructs a regular expression from some string input. At first I naively thought I could do

pete-murphy

Notes on Redux

The state of your application is stored in an object tree within a single store. (In contrast with vanilla React where app state is held inside of a React component, or across multiple components.)

Actions are JavaScript objects that describe changes that you want to make to your application state. You send them to the store using the dispatch function.

Reducers specify how the application's state changes in response to actions. A reducer is a function that takes the existing state and an action, and returns a new state.

pete-murphy

{
  "data": {
    "rateLimit": {
      "remaining": 4999
    },
    "user": {
      "name": "Peter Murphy",
      "avatarUrl": "https://avatars1.githubusercontent.com/u/26548438?v=4",
      "createdAt": "2017-03-20T15:15:48Z",
      "repositories": {

pete-murphy

{
  "data": [
    { "day": "Sunday", "hour": "12 AM", "commits": 7 },
    { "day": "Sunday", "hour": "1 AM", "commits": 7 },
    { "day": "Sunday", "hour": "2 AM", "commits": 4 },
    { "day": "Sunday", "hour": "3 AM", "commits": 3 },
    { "day": "Sunday", "hour": "4 AM", "commits": 0 },
    { "day": "Sunday", "hour": "5 AM", "commits": 1 },
    { "day": "Sunday", "hour": "6 AM", "commits": 1 },
    { "day": "Sunday", "hour": "7 AM", "commits": 8 },

pete-murphy

module Main where

import Prelude

import Data.Int (fromString)
import Data.Maybe (fromMaybe, maybe)
import Effect (Effect)
import Effect.Class.Console (log)
import HTTPure as HTTPure
import Node.Process (lookupEnv)

pete-murphy

module Main where

import Data.Maybe (Maybe(..), fromJust, fromMaybe)
import Effect (Effect)
import Effect.Console (log)
import Prelude (Unit, bind, pure, ($), (<$>))
import Web.DOM.Element (Element, toNode)
import Web.DOM.Node (setTextContent)
import Web.DOM.NonElementParentNode (NonElementParentNode, getElementById)
import Web.Event.Event (Event, target)