Skip to content

Instantly share code, notes, and snippets.

Avatar

Cory House coryhouse

View GitHub Profile
@coryhouse
coryhouse / mockDataSchema.js
Last active Mar 13, 2021
Mock Data Schema for "Building a JavaScript Development Environment" on Pluralsight
View mockDataSchema.js
export const schema = {
type: "object",
properties: {
users: {
type: "array",
minItems: 3,
maxItems: 5,
items: {
type: "object",
properties: {
@coryhouse
coryhouse / webpack.config.dev.js
Created Feb 28, 2021
Development Webpack config for "Building a JavaScript Development Environment" on Pluralsight
View webpack.config.dev.js
import path from "path";
export default {
mode: "development",
devtool: "eval-source-map",
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "src"),
publicPath: "/",
filename: "bundle.js",
@coryhouse
coryhouse / package.json
Created Feb 28, 2021
package.json for Building a JS Development Environment on Pluralsight
View package.json
{
"name": "javascript-development-environment",
"version": "1.0.0",
"description": "JavaScript development environment Pluralsight course by Cory House",
"scripts": {
},
"author": "Cory House",
"license": "MIT",
"dependencies": {
"whatwg-fetch": "3.6.2"
View ReactQueryDemo.jsx
import React from "react";
import { getUsers } from "./services/userService";
import { useQuery } from "react-query";
export default function ReactQueryDemo() {
const { data, isLoading, error } = useQuery("users", getUsers);
if (isLoading) return "Loading...";
if (error) return "Oops!";
return data[0].username;
}
View HookDemo.jsx
import React from "react";
import useFetch from "./useFetch";
export default function HookDemo() {
const { data, loading, error } = useFetch("users");
if (loading) return "Loading...";
if (error) return "Oops!";
return data[0].username;
}
View useFetch.js
import { useState, useEffect, useRef } from "react";
// This custom hook centralizes and streamlines handling of HTTP calls
export default function useFetch(url, init) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const prevInit = useRef();
const prevUrl = useRef();
View CentralDemo.jsx
import React, { useState, useEffect } from "react";
import { getUsers } from "./services/userService";
export default function CentralDemo() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
getUsers()
.then(json => {
View userService.js
export function getUsers() {
return fetch(`${process.env.REACT_APP_API_BASE_URL}users`).then(response =>
response.json()
);
}
View InlineDemo.jsx
import React, { useState, useEffect } from "react";
export default function InlineDemo() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch(`${process.env.REACT_APP_API_BASE_URL}users`)
.then(response => {
@coryhouse
coryhouse / useIsTabbing.js
Last active Jun 26, 2020
React Hook to monitor if user is tabbing
View useIsTabbing.js
import { useState, useEffect } from "react";
/* Track whether user is interacting via keyboard.
This is used to determine if we should show focus rings.
Focus rings should only display on focus when isTabbing is true.
*/
export default function useIsTabbing() {
const [isTabbing, setIsTabbing] = useState(false);
useEffect(function listenForMouseClicksAndKeydowns() {