faahmad

# https://twitter.com/farazamiruddin
# My GitHub Actions workflow for pull requests. Feel free to use this as inspiration.

name: CI React Firebase

on:
  pull_request:
    types: [opened, synchronize, reopened]

jobs:

faahmad

"editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "name": "Comment",
        "scope": "comment",
        "settings": {
          "fontStyle": "italic"
        }
      },
      {

faahmad

import * as React from "react";

export const PersonForm: React.FC = () => {
  return (
    <form>
      <label htmlFor="firstName">First name</label>
      <PersonInput name="firstName" />
      <label htmlFor="lastName">Last name</label>
      <PersonInput name="lastName" />
    </form>

faahmad

interface PersonFormState {
  firstName: string;
  lastName: string;
}
interface PersonFormAction {
  type: "SET_VALUE";
  payload: { [name: string]: string };
}
function personFormReducer(state: PersonFormState, action: PersonFormAction) {
  switch (action.type) {

faahmad

interface MovieListState {
  isLoading: boolean;
  movies: Movie[];
  error: string;
}
type MoveListAction =
  | { type: "fetching" }
  | { type: "success"; payload: Movie[] }
  | { type: "error"; error: Error };
const initialMovieListState: MovieListState = {

faahmad

export const MovieList: React.FC = () => {
  const [isLoading, setIsLoading] = React.useState<boolean>(true);
  const [movies, setMovies] = React.useState<Movie[]>([]);
  const [error, setError] = React.useState<string>("");
  const handleFetchMovies = () => {
    setIsLoading(true); // 😢
    setError(""); // 😢
    return MovieService.fetchInitialMovies()
      .then(initialMovies => {
        setMovies(initialMovies);

faahmad

const MovieList: React.FC = () => {
  const [isLoading, setIsLoading] = React.useState<boolean>(true)
  const [movies, setMovies] = React.useState<Movie[]>([])
  React.useEffect(() => {
    MovieService
      .fetchInitialMovies()
      .then(initialMovies => setMovies(initialMovies))
      .then(() => setIsLoading(false))
  }, [])
  if (isLoading) {

faahmad

const MovieList: React.FC = () => {
  const [movies, setMovies] = React.useState<Movie[]>([])
  React.useEffect(() => {
    MovieService
      .fetchInitialMovies()
      .then(initialMovies => setMovies(initialMovies))
  }, [])
  return (
    <ul>
      {movies.map(movie => <li key={movie.id}>{movie.title}</li>}

faahmad

import * as React from "react";
import { gql } from "apollo-boost";
import { useQuery } from "@apollo/react-hooks";
import { Movie } from "../types/Movie";

const MOVIE_LIST_QUERY = gql`
  query MovieListQuery($movieListId: ID!) {
    movieList(movieListId: $movieListId) {
      id
      name

faahmad

import React from "react";
import { Switch, BrowserRouter, Route } from "react-router-dom";
import { useAuthContext } from "./contexts/AuthContext";
import { Navbar } from "./components/Navbar";
import { LandingPage } from "./pages/LandingPage";
import { DashboardPage } from "./pages/DashboardPage";

export const AppRoutes: React.FC = () => {
  const authAccount = useAuthContext();