🌈 Migrated to Remix v2 with Vite and removed LiveReload 🦄 main

app/package.json

@@ -2,8 +2,8 @@
   "private": true,
   "sideEffects": false,
   "scripts": {
-    "build": "remix build",
+    "build": "remix vite:build",
-    "dev": "remix dev --port 9999",
+    "dev": "remix vite:dev",
     "lint": "eslint --ext .js,.ts,.jsx,.tsx .",
     "lint-fix": "eslint --ext .js,.ts,.jsx,.tsx . --fix",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
@@ -15,13 +15,14 @@
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@remix-run/node": "^1.15.0",
+    "@remix-run/node": "^2.8.1",
-    "@remix-run/react": "^1.15.0",
+    "@remix-run/react": "^2.8.1",
-    "@remix-run/serve": "^1.15.0",
+    "@remix-run/serve": "^2.8.1",
     "@vercel/analytics": "^0.1.11",
     "@vercel/remix": "^1.15.0",
     "draft-js": "^0.11.7",
     "emojis-list": "^3.0.0",
+    "emotion": "^11.0.0",
     "flatted": "^3.2.7",
     "fuse.js": "^6.6.2",
     "gradient-path": "^2.3.0",
@@ -40,8 +41,8 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^1.15.0",
+    "@remix-run/dev": "^2.8.1",
-    "@remix-run/eslint-config": "^1.15.0",
+    "@remix-run/eslint-config": "^2.8.1",
     "@shopify/eslint-plugin": "^42.1.0",
     "@types/eslint": "^8.40.2",
     "@types/react": "^18.0.25",
@@ -57,7 +58,9 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-unused-imports": "^2.0.0",
-    "typescript": "^4.9.3"
+    "typescript": "^4.9.3",
+    "vite": "^5.1.0",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "resolutions": {
     "@types/react": "^17.0.2"

app/src/components/Login/Login.tsx

@@ -1,22 +1,56 @@
 import React, { useState } from 'react';
-import { Flex, Button, FormControl, Input } from '@chakra-ui/react';
+import { Flex, Button, FormControl, Input, Spinner } from '@chakra-ui/react';
+import { useFetcher } from '@remix-run/react';
 
 export const Login = (props) => {
-  const [email, setEmail] = useState('');
+  const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
 
-  const handleLogin = (props) => {
+  const [loading, setLoading] = useState(false);
-    // handle login
 
-    const { username, password } = props;
+  const api = useFetcher();
+
+  const handleLogin = (e) => {
+    e?.preventDefault();
+
+    setLoading(true);
+
+    api.load('/api/$');
+
+    // handle login
 
     console.log('nik username', username);
     console.log('nik password', password);
   };
 
+  if (loading) {
+    return (
+      <Flex alignItems="center" justifyContent="center" height="100vh" width="100%">
+        <Spinner
+          sx={{
+            '@keyframes moving-rainbow': {
+              '0%': { backgroundPosition: '0 0' },
+              '100%': { backgroundPosition: 'calc(100px + 400%) 0' }
+            },
+            '@keyframes rotate': {
+              '0%': { transform: 'rotate(0deg)' },
+              '100%': { transform: 'rotate(360deg)' }
+            },
+            animation: 'rotate 2s linear infinite, moving-rainbow 40s infinite linear'
+          }}
+          bgGradient="linear-gradient(to right, #47b5e6, #a555e8, #f34a4a, #ffbc48, #58ca70, #47b5e6)"
+          // rainbow gradient border
+          backgroundSize="calc(100px + 400%)"
+          color="transparent"
+          size="xl"
+        />
+      </Flex>
+    );
+  }
+
   return (
     <>
-      <form>
+      <form onSubmit={handleLogin}>
         <Flex flexDirection="column" gap={4} width="255px" maxWidth="100%">
           <FormControl>
             <Input
@@ -30,10 +64,10 @@ export const Login = (props) => {
               border="none"
               borderRadius="5px"
               outline="none"
-              onChange={(e) => setEmail(e.target.value)}
+              onChange={(e) => setUsername(e?.target?.value)}
-              placeholder="Email"
+              placeholder="💌 Email"
-              type="username"
+              type="email"
-              value={email}
+              value={username}
             />
           </FormControl>
 
@@ -49,8 +83,8 @@ export const Login = (props) => {
               border="none"
               borderRadius="5px"
               outline="none"
-              onChange={(e) => setPassword(e.target.value)}
+              onChange={(e) => setPassword(e?.target?.value)}
-              placeholder="Password"
+              placeholder="🔑 Password"
               type="password"
               value={password}
             />
@@ -83,7 +117,7 @@ export const Login = (props) => {
             paddingX={4}
             paddingY={2}
           >
-            Login
+            Login ✨
           </Button>
         </Flex>
       </form>

app/src/globals/GlobalStyles.tsx

@@ -0,0 +1,15 @@
+import { Global } from '@emotion/react';
+
+export const Globals = () => {
+  return (
+    <Global
+      styles={{
+        body: {},
+        'input[data-com-onepassword-filled="light"]': {
+          // Doesn't seem to work..?
+          background: 'pink !important'
+        }
+      }}
+    />
+  );
+};

app/src/root.tsx

@@ -1,26 +1,15 @@
 // import type { MetaFunction } from "@vercel/remix"
-import {
+import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
-  Links,
+import { Analytics } from '@vercel/analytics/react';
-  LiveReload,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-} from "@remix-run/react"
-import { Analytics } from "@vercel/analytics/react"
 
-import { Main } from "./components/Layout/Main"
+import { Globals } from './globals/GlobalStyles';
-import { useIcons } from "./hooks/useIcons"
-import { ChakraWrapper } from "./Providers/Chakra/ChakraWrapper"
-import { ThingtimeProvider } from "./Providers/ThingtimeProvider"
 
-function Document({
+import { Main } from './components/Layout/Main';
-  children,
+import { useIcons } from './hooks/useIcons';
-  title = "Thingtime",
+import { ChakraWrapper } from './Providers/Chakra/ChakraWrapper';
-}: {
+import { ThingtimeProvider } from './Providers/ThingtimeProvider';
-  children: React.ReactNode
+
-  title?: string
+function Document({ children, title = 'Thingtime' }: { children: React.ReactNode; title?: string }) {
-}) {
   return (
     <html lang="en">
       <head>
@@ -32,17 +21,18 @@ function Document({
       </head>
       <body>
         {children}
+        <Globals />
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
+        {/* <LiveReload /> */}
         <Analytics />
       </body>
     </html>
-  )
+  );
 }
 
 export default function App() {
-  useIcons()
+  useIcons();
 
   return (
     <Document>
@@ -54,7 +44,7 @@ export default function App() {
         </ThingtimeProvider>
       </ChakraWrapper>
     </Document>
-  )
+  );
 }
 
 // limiter
@@ -69,17 +59,17 @@ const setThingtime = (glob) => {
         db: {},
         limit: 9999,
         maxDepth: 99,
-        count: 0,
+        count: 0
       },
-      things: {},
+      things: {}
-    }
+    };
   } catch (err) {
     // will error on server
   }
-}
+};
 
 try {
-  setThingtime(window)
+  setThingtime(window);
 } catch {
-  setThingtime(globalThis)
+  setThingtime(globalThis);
 }

app/src/routes/$.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { ThingtimeURL } from '~/components/Thingtime/ThingtimeURL';
+
+export default function Index() {
+  return <ThingtimeURL></ThingtimeURL>;
+}

app/src/routes/*.tsx

@@ -1,7 +0,0 @@
-import React from "react"
-
-import { ThingtimeURL } from "~/components/Thingtime/ThingtimeURL"
-
-export default function Index() {
-  return <ThingtimeURL></ThingtimeURL>
-}

app/src/routes/api/$.tsx

@@ -0,0 +1,3 @@
+export async function loader({ request }) {
+  return { message: 'Hello, World!' };
+}

app/vite.config.ts

@@ -0,0 +1,27 @@
+import { vitePlugin as remix } from '@remix-run/dev';
+import { installGlobals } from '@remix-run/node';
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+installGlobals();
+
+// set app path to src/
+
+export default defineConfig({
+  // define web socket port
+
+  server: {
+    port: 9999,
+    hmr: {
+      port: 9998
+    }
+  },
+  plugins: [
+    remix({
+      // app path
+      appDirectory: 'src'
+    }),
+    tsconfigPaths()
+  ]
+  // plugins: [remix(), tsconfigPaths()],
+});