Reroll Epic Stack again, Experiments with Weather API (#76)

* re-roll epic-stack to remix 2.0 15Sept2023 release

* Experimenting with Remix & weather API

Co-authored-by: plocket <[email protected]>
Co-authored-by: Gavin Kimball <[email protected]>
Co-authored-by: Leopardfoot <[email protected]>

---------

Co-authored-by: plocket <[email protected]>
Co-authored-by: Gavin Kimball <[email protected]>
Co-authored-by: Leopardfoot <[email protected]>

heat-stack/.env.example

@@ -6,3 +6,9 @@ SESSION_SECRET="super-duper-s3cret"
 INTERNAL_COMMAND_TOKEN="some-made-up-token"
 RESEND_API_KEY="re_blAh_blaHBlaHblahBLAhBlAh"
 SENTRY_DSN="your-dsn"
+
+# the mocks and some code rely on these two being prefixed with "MOCK_"
+# if they aren't then the real github api will be attempted
+GITHUB_CLIENT_ID="MOCK_GITHUB_CLIENT_ID"
+GITHUB_CLIENT_SECRET="MOCK_GITHUB_CLIENT_SECRET"
+GITHUB_TOKEN="MOCK_GITHUB_TOKEN"

heat-stack/.eslintrc.cjs

@@ -10,6 +10,8 @@ module.exports = {
 		'prettier',
 	],
 	rules: {
+		// playwright requires destructuring in fixtures even if you don't use anything 🤷‍♂️
+		'no-empty-pattern': 'off',
 		'@typescript-eslint/consistent-type-imports': [
 			'warn',
 			{
@@ -18,7 +20,22 @@ module.exports = {
 				fixStyle: 'inline-type-imports',
 			},
 		],
-		'import/no-duplicates': 'warn',
+		'import/no-duplicates': ['warn', { 'prefer-inline': true }],
+		'import/consistent-type-specifier-style': ['warn', 'prefer-inline'],
+		'import/order': [
+			'warn',
+			{
+				alphabetize: { order: 'asc', caseInsensitive: true },
+				groups: [
+					'builtin',
+					'external',
+					'internal',
+					'parent',
+					'sibling',
+					'index',
+				],
+			},
+		],
 	},
 	overrides: [
 		{

heat-stack/.github/workflows/deploy.yml

@@ -111,7 +111,16 @@ jobs:
         uses: actions/cache@v3
         with:
           path: prisma/data.db
-          key: db-cache
+          key:
+            db-cache-schema_${{ hashFiles('./prisma/schema.prisma')
+            }}-migrations_${{ hashFiles('./prisma/migrations/*/migration.sql')
+            }}
+
+      - name: 🌱 Seed Database
+        if: steps.db-cache.outputs.cache-hit != 'true'
+        run: npx prisma db seed
+        env:
+          MINIMAL_SEED: true
 
       - name: 🏗 Build
         run: npm run build
@@ -153,20 +162,20 @@ jobs:
           mv ./other/Dockerfile ./Dockerfile
           mv ./other/.dockerignore ./.dockerignore
 
+      - name: 🎈 Setup Fly
+        uses: superfly/flyctl-actions/[email protected]
+
       - name: 🚀 Deploy Staging
         if: ${{ github.ref == 'refs/heads/dev' }}
-        uses: superfly/[email protected]
-        with:
-          args:
-            'deploy --remote-only --build-arg COMMIT_SHA=${{ github.sha }} --app
-            ${{ steps.app_name.outputs.value }}-staging'
+        run:
+          flyctl deploy --remote-only --build-arg COMMIT_SHA=${{ github.sha }}
+          --app ${{ steps.app_name.outputs.value }}-staging
         env:
           FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
 
       - name: 🚀 Deploy Production
         if: ${{ github.ref == 'refs/heads/main' }}
-        uses: superfly/[email protected]
-        with:
-          args: 'deploy --remote-only --build-arg COMMIT_SHA=${{ github.sha }}'
+        run:
+          flyctl deploy --remote-only --build-arg COMMIT_SHA=${{ github.sha }}
         env:
           FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

heat-stack/.gitignore

@@ -1,5 +1,5 @@
 node_modules
-.DS_Store
+.DS_store
 
 /build
 /public/build

heat-stack/.prettierrc.cjs → heat-stack/.prettierrc.js

@@ -1,4 +1,5 @@
-module.exports = {
+/** @type {import("prettier").Options} */
+export default {
 	arrowParens: 'avoid',
 	bracketSameLine: false,
 	bracketSpacing: true,
@@ -25,5 +26,5 @@ module.exports = {
 			},
 		},
 	],
-	plugins: [require('prettier-plugin-tailwindcss')],
+	plugins: ['prettier-plugin-tailwindcss'],
 }

heat-stack/.vscode/extensions.json

@@ -1,8 +1,11 @@
 {
   "recommendations": [
+    "bradlc.vscode-tailwindcss",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "prisma.prisma",
-    "bradlc.vscode-tailwindcss"
+    "qwtel.sqlite-viewer",
+    "yoavbls.pretty-ts-errors",
+    "github.vscode-github-actions"
   ]
 }

heat-stack/.vscode/settings.json

@@ -4,9 +4,16 @@
     "@remix-run/router",
     "express",
     "@radix-ui/**",
+    "@react-email/**",
+    "react-router-dom",
     "react-router",
     "stream/consumers",
-    "node:stream/consumers"
+    "node:stream/consumers",
+    "node:test",
+    "console",
+    "node:console"
   ],
-  "tailwindCSS.experimental.classRegex": [["cn\\(([^)]*)\\)"]]
+  "workbench.editorAssociations": {
+    "*.db": "sqlite-viewer.view"
+  }
 }

heat-stack/README.md

@@ -60,7 +60,7 @@ To re-create the patch for py file support in `/patch`, use these [instructions]
 - `npx patch-package @remix-run/dev`
 - it should auto-apply any time you do `npm install`, but it may get out of sync with upstream
 
-## Epic Stack docs:
+### Epic Stack Docs: 
 <div align="center">
   <h1 align="center"><a href="https://www.epicweb.dev/epic-stack">The Epic Stack 🚀</a></h1>
   <strong align="center">
@@ -75,7 +75,7 @@ To re-create the patch for py file support in `/patch`, use these [instructions]
 </div>
 
 ```sh
-npx create-remix@latest --typescript --install --template epicweb-dev/epic-stack
+npx create-remix@latest --install --template epicweb-dev/epic-stack
 ```
 
 [![The Epic Stack](https://github-production-user-asset-6210df.s3.amazonaws.com/1500684/246885449-1b00286c-aa3d-44b2-9ef2-04f694eb3592.png)](https://www.epicweb.dev/epic-stack)

heat-stack/app/components/WeatherExample.tsx

@@ -0,0 +1,56 @@
+import test from "@playwright/test";
+import { json } from "@remix-run/node"; // or cloudflare/deno
+import { useLoaderData } from "@remix-run/react";
+
+export async function loader() {
+ const href = 'https://archive-api.open-meteo.com/v1/archive?latitude=52.52&longitude=13.41&daily=temperature_2m_max&timezone=America%2FNew_York&start_date=2022-01-01&end_date=2023-08-30&temperature_unit=fahrenheit';
+  const res = await fetch(href);
+  return json(await res.json());
+}
+
+export function WeatherExample() {
+
+  const gists = useLoaderData<typeof loader>();
+  return (
+    <ul>
+      {'5'}
+    </ul>
+  );
+}
+
+// import { useFetcher } from "@remix-run/react";
+// import { useEffect } from "react";
+
+// export function WeatherExample() {
+
+//     // 2 separate routes - including one that doesn't load
+//     // the python to avoid the long restart times.
+
+//     /* 
+//         Historical archival records API: https://archive-api.open-meteo.com/v1/archive?latitude=52.52&longitude=13.41&daily=temperature_2m_max&timezone=America%2FNew_York&start_date=2022-01-01&end_date=2023-08-30&temperature_unit=fahrenheit
+//         Current week forecast API: https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.41&daily=temperature_2m_max&timezone=America%2FNew_York&past_days=5&forecast_days=1&temperature_unit=fahrenheit
+//     */
+//     const fetcher = useFetcher();
+//     const href = 'https://archive-api.open-meteo.com/v1/archive?latitude=52.52&longitude=13.41&daily=temperature_2m_max&timezone=America%2FNew_York&start_date=2022-01-01&end_date=2023-08-30&temperature_unit=fahrenheit';
+
+//     // trigger the fetch with these
+//     //   <fetcher.Form method="GET" action="https://archive-api.open-meteo.com/v1/archive?latitude=52.52&longitude=13.41&daily=temperature_2m_max&timezone=America%2FNew_York&start_date=2022-01-01&end_date=2023-08-30&temperature_unit=fahrenheit" />;
+
+//     // fetcher.load(href)
+
+//     useEffect(() => {
+//     // fetcher.submit(data, options);
+//     fetcher.load(href);
+//     }, []);
+
+//     // // build UI with these
+//     // fetcher.state;
+//     // fetcher.formMethod;
+//     // fetcher.formAction;
+//     // fetcher.formData;
+//     // fetcher.formEncType;
+//     // fetcher.data;
+//     return (
+//         <div>{ fetcher.data }</div>
+//     )
+// }

heat-stack/app/components/confetti.tsx

@@ -1,18 +1,15 @@
 import { Index as ConfettiShower } from 'confetti-react'
 import { ClientOnly } from 'remix-utils'
 
-/**
- * confetti is a unique random identifier which re-renders the component
- */
-export function Confetti({ confetti }: { confetti?: string }) {
-	if (!confetti) return null
+export function Confetti({ id }: { id?: string | null }) {
+	if (!id) return null
 
 	return (
 		<ClientOnly>
 			{() => (
 				<ConfettiShower
-					key={confetti}
-					run={Boolean(confetti)}
+					key={id}
+					run={Boolean(id)}
 					recycle={false}
 					numberOfPieces={500}
 					width={window.innerWidth}

heat-stack/app/components/error-boundary.tsx

@@ -4,7 +4,7 @@ import {
 	useRouteError,
 } from '@remix-run/react'
 import { type ErrorResponse } from '@remix-run/router'
-import { getErrorMessage } from '~/utils/misc.tsx'
+import { getErrorMessage } from '#app/utils/misc.tsx'
 
 type StatusHandler = (info: {
 	error: ErrorResponse

heat-stack/app/components/forms.tsx

@@ -1,9 +1,9 @@
 import { useInputEvent } from '@conform-to/react'
 import React, { useId, useRef } from 'react'
-import { Input } from '~/components/ui/input.tsx'
-import { Label } from '~/components/ui/label.tsx'
-import { Checkbox, type CheckboxProps } from '~/components/ui/checkbox.tsx'
-import { Textarea } from '~/components/ui/textarea.tsx'
+import { Checkbox, type CheckboxProps } from './ui/checkbox.tsx'
+import { Input } from './ui/input.tsx'
+import { Label } from './ui/label.tsx'
+import { Textarea } from './ui/textarea.tsx'
 
 export type ListOfErrors = Array<string | null | undefined> | null | undefined
 

heat-stack/app/components/search-bar.tsx

@@ -1,9 +1,9 @@
 import { Form, useSearchParams, useSubmit } from '@remix-run/react'
+import { useDebounce, useIsPending } from '#app/utils/misc.tsx'
 import { Icon } from './ui/icon.tsx'
 import { Input } from './ui/input.tsx'
 import { Label } from './ui/label.tsx'
 import { StatusButton } from './ui/status-button.tsx'
-import { useDebounce, useIsSubmitting } from '~/utils/misc.tsx'
 
 export function SearchBar({
 	status,
@@ -16,7 +16,7 @@ export function SearchBar({
 }) {
 	const [searchParams] = useSearchParams()
 	const submit = useSubmit()
-	const isSubmitting = useIsSubmitting({
+	const isSubmitting = useIsPending({
 		formMethod: 'GET',
 		formAction: '/users',
 	})

heat-stack/app/components/toaster.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from 'react'
+import { Toaster, toast as showToast } from 'sonner'
+import { type Toast } from '#app/utils/toast.server.ts'
+
+export function EpicToaster({ toast }: { toast?: Toast | null }) {
+	return (
+		<>
+			<Toaster closeButton position="top-center" />
+			{toast ? <ShowToast toast={toast} /> : null}
+		</>
+	)
+}
+
+function ShowToast({ toast }: { toast: Toast }) {
+	const { id, type, title, description } = toast
+	useEffect(() => {
+		setTimeout(() => {
+			showToast[type](title, { id, description })
+		}, 0)
+	}, [description, id, title, type])
+	return null
+}

heat-stack/app/components/ui/button.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 
-import { cn } from '~/utils/misc.tsx'
+import { cn } from '#app/utils/misc.tsx'
 
 const buttonVariants = cva(
 	'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',

heat-stack/app/components/ui/checkbox.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import * as React from 'react'
 
-import { cn } from '~/utils/misc.tsx'
+import { cn } from '#app/utils/misc.tsx'
 
 export type CheckboxProps = Omit<
 	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,

heat-stack/app/components/ui/dropdown-menu.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import * as React from 'react'
 
-import { cn } from '~/utils/misc.tsx'
+import { cn } from '#app/utils/misc.tsx'
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 

heat-stack/app/components/ui/icon.tsx

@@ -1,8 +1,8 @@
 import { type SVGProps } from 'react'
-import { cn } from '~/utils/misc.tsx'
+import { cn } from '#app/utils/misc.tsx'
+import { type IconName } from '@/icon-name'
 import href from './icons/sprite.svg'
 
-import { type IconName } from '@/icon-name'
 export { href }
 export { IconName }