ryanflorence

import "./index.css";
import React from "react";
import ReactDOM from "react-dom";
import {
  DataBrowserRouter,
  Route,
  useLoaderData,
  Form,
  useNavigation,
} from "react-router-dom";

ryanflorence

/routes
    /__landing.tsx                   -> (layout: __landing.*)
    /__landing.index.tsx             -> /
    /__landing.company.tsx           -> /company
    /__landing.company.team.tsx      -> /company/team
    /__landing.company.careers.tsx   -> /company/careers
    /__landing.docs.doc.$.tsx        -> /docs/*
    /__auth.tsx                      -> (layout: _auth.*)
    /__auth.login.tsx                -> /login
    /__auth.signup.tsx               -> /signup

ryanflorence

• 💿 Open up the app and show all the features
• 💿 Build a little todo list from scratch
  • normal forms
    • ship it, it works and the UX is fine
  • iterate to useFetcher to show why you'd bring it in
    • useFetcher is the thing that turns your remix app from a "website" to a "web app", if you're into that terminology.
    • still just forms!
      • progressive enhancement is about two things
        • how the app goes from basic functionality to fancy
• how the developer is able to iterate their code from basic to fancy

ryanflorence

function useIsPendingPathname(to) {
  let { location } = useTransition();
  let { pathname } = useResolvedPath(to);
  return location?.pathname === pathname;
}

function useIsSlowTransition(ms = 300) {
  let transition = useTransition();
  let [isSlow, setIsSlow] = useState(false);

ryanflorence

import { useEffect, useRef } from "react";
import {
  Form,
  useFetcher,
  useLoaderData,
  useTransition,
} from "remix";
import { arc } from "~/arc.server";

export async function loader() {

ryanflorence

// hard, buggy, incomplete, slower
<button
  onClick={async () => {
    setLoading(true);
    let result = await updateProject({
      status: "active"
    });
    setLoading(false);
    setResult(result);
  }}

ryanflorence

export let action: ActionFunction = async ({ request, params }) => {
  let session = await requireAuthSession(request);
  await ensureUserAccount(session.get("auth"));

  let data = Object.fromEntries(await request.formData());
  invariant(typeof data._action === "string", "_action should be string");

  switch (data._action) {
    case Actions.CREATE_TASK:
    case Actions.UPDATE_TASK_NAME: {

ryanflorence

import type { LoaderFunction, ActionFunction } from "remix";
import { useLoaderData, useFetcher } from "remix";
import invariant from "tiny-invariant";
import cuid from "cuid";
import React from "react";
import type { Task, User } from "@prisma/client";
import { requireAuthSession } from "~/util/magic-auth";
import { ensureUserAccount } from "~/util/account";
import { placeCaretAtEnd } from "~/components/range";
import { getBacklog } from "~/models/backlog";

ryanflorence

import { createServer } from "http";

createServer(async (req, res) => {
  if (req.url === "/app.js") {
    res.setHeader("Content-Type", "application/javascript; charset=UTF-8");
    res.setHeader("Cache-Control", "max-age=10");
    res.write(`console.log("lol")`);
    res.end();
    return;
  }

ryanflorence

// root.tsx
import { getUserSession, requireUser, logout } from "~/session";

export function loader({ request }) {
  // use case: know if the user is logged in, no redirect to /login
  let userSession = await getUserSession(request);
  let isAuthenticated = userSession.has("userId");
  return { isAuthenticated };
}