jasonleehodges

import { useDispatch } from 'react-redux';
import { setData } from '../actions';

export const useDataService = () => {
  const dispatch = useDispatch();
  const getData = () => {
    fetch(url)
      .then(resp => resp.json())
      .then(data => dispatch(setData(data));
  };

jasonleehodges

import React, { FC } from 'react';
import { useDataSErvice } from '../hooks';
import { useSelector } from 'react-redux';
import { selectData } from '../selectors';

export const ExampleComponent: FC = (props) => {
  const { getData } = useDataService();
  const data = useSelector(selectData);

  useEffect(() => {

jasonleehodges

const numbers: number[] = [3, 5, 7, 9, 12];
let accumulator: number = 0;

for (let i = 0; i < numbers.length; i++) {
    accumulator += numbers[i];
}

// 36

jasonleehodges

const numbers: number[] = [3, 5, 7, 9, 12];
let accumulator: number = 0;

numbers.forEach((number: number) => {
    accumulator += number;
});

jasonleehodges

const numbers: number[] = [3, 5, 7, 9, 12];

const accumulated = numbers.reduce(
    (accumulator: number, number: number) => accumulator + number,
   0);

// 36

const days = [
    "Sunday",

jasonleehodges

const days = ["Sunday", "Monday", "Tuesday", "Wendesday", "Thursday", "Friday", "Saturday"];

let week = {};
for (let i = 0; i < days.length; i++) {
    week[days[i]] = i;
}

// {
//   Sunday: 0,
//   Monday: 1,

jasonleehodges

import { MutableRefObject, useMemo, useRef } from 'react';

export const useDebounce = (milliseconds: number) => {
  const clearable: MutableRefObject<number | undefined> = useRef();

  const debounce = useMemo(
    () => (fn: () => Promise<void>) => {
      if (clearable.current !== undefined) {
        clearTimeout(clearable.current);
      }

jasonleehodges

import React from 'react';

export const Badge = (props) => {
 return (
    <div style={
      {backgroundColor: props.status === 'active' ? 'green' : 'red'}
    }>
      Status: {props.status}
    </div>
   );

jasonleehodges

export const status = {
  active: 'Ready',
  inactive: 'Inactive'
}

jasonleehodges

import React from 'react';
import { status, labels } from './status';

export const Badge = (props) => {
 return (
    <div style={
      {backgroundColor: props.status === status.active ? 'green' : 'red'}
    }>
      {labels.statusPrompt[props.language]}: {props.status}
    </div>