pancy fants

src/pages/AuthorPage.tsx

@@ -2,6 +2,9 @@ import { useCallback } from 'react'
 import FeedView from '../feed/FeedView.tsx'
 import { PostsService } from '../model/posts/postsService.ts'
 import { useParams } from 'react-router'
+import SingleColumnLayout from '../layouts/SingleColumnLayout.tsx'
+import NavBar from '../components/NavBar.tsx'
+import { useFeedViewModel } from '../feed/FeedView.ts'
 
 interface AuthorPageParams {
   postsService: PostsService
@@ -17,5 +20,11 @@ export default function AuthorPage({ postsService }: AuthorPageParams) {
     [postsService, username],
   )
 
-  return <FeedView loadMore={fetchPosts} />
+  const { pages, loadNextPage } = useFeedViewModel(fetchPosts)
+
+  return (
+    <SingleColumnLayout navbar={<NavBar />}>
+      <FeedView pages={pages} onLoadMore={loadNextPage} />
+    </SingleColumnLayout>
+  )
 }

src/pages/HomePage.tsx

@@ -4,10 +4,11 @@ import { PostsService } from '../model/posts/postsService.ts'
 import { useUserStore } from '../store/userStore.ts'
 import { MediaService } from '../model/mediaService.ts'
 import NewPostWidget from '../components/NewPostWidget.tsx'
-import { useFeedViewModel } from '../feed/feedViewModel.ts'
+import { useFeedViewModel } from '../feed/FeedView.ts'
 import { Post } from '../model/posts/posts.ts'
 import { Temporal } from '@js-temporal/polyfill'
-import AppLayout from '../layouts/AppLayout.tsx'
+import SingleColumnLayout from '../layouts/SingleColumnLayout.tsx'
+import NavBar from '../components/NavBar.tsx'
 
 interface HomePageProps {
   postsService: PostsService
@@ -26,7 +27,7 @@ export default function HomePage({ postsService, mediaService }: HomePageProps)
     [postsService],
   )
 
-  const [pages, setPages, loadNextPage] = useFeedViewModel(fetchPosts)
+  const { pages, setPages, loadNextPage } = useFeedViewModel(fetchPosts)
 
   const onCreatePost = useCallback(
     async (content: string, files: File[]) => {
@@ -49,11 +50,11 @@ export default function HomePage({ postsService, mediaService }: HomePageProps)
   )
 
   return (
-    <AppLayout>
+    <SingleColumnLayout navbar={<NavBar />}>
       <main className={`w-full max-w-3xl mx-auto`}>
         <NewPostWidget onSubmit={onCreatePost} isSubmitting={isSubmitting} />
         <FeedView pages={pages} onLoadMore={loadNextPage} />
       </main>
-    </AppLayout>
+    </SingleColumnLayout>
   )
 }

src/pages/SignupPage.tsx

@@ -1,85 +1,111 @@
 import { useParams } from 'react-router'
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import SingleColumnLayout from '../layouts/SingleColumnLayout.tsx'
+import TextInput from '../components/TextInput.tsx'
+import PrimaryButton from '../components/PrimaryButton.tsx'
+import PrimaryLinkButton from '../components/PrimaryLinkButton.tsx'
+
+const SignupCodeKey = 'signupCode'
 
 export default function SignupPage() {
-  const { code: signupCode } = useParams()
+  const { code } = useParams()
+  const [signupCode, setSignupCode] = useState<string | null>(null)
   const [isSubmitting, setIsSubmitting] = useState(false)
 
+  const [username, setUsername] = useState('')
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+
+  const dialogRef = useRef<HTMLDialogElement | null>(null)
+
+  useEffect(() => {
+    if (signupCode) return
+
+    let theSignupCode: string | null
+    if (code) {
+      theSignupCode = code
+      setSignupCode(theSignupCode)
+      localStorage.setItem(SignupCodeKey, theSignupCode)
+    } else {
+      theSignupCode = localStorage.getItem(SignupCodeKey)
+    }
+
+    if (!theSignupCode) {
+      dialogRef.current?.showModal()
+    }
+  }, [code, signupCode])
+
   const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     setIsSubmitting(true)
-  }
 
-  if (!signupCode) {
-    return <RejectionMessage />
+    try {
+      // todo
+    } finally {
+      setIsSubmitting(false)
+    }
   }
 
   return (
-    <main className="w-full max-w-3xl mx-auto p-4">
-      <div className="mt-12">
-        <form className="flex flex-col gap-4 max-w-md" onSubmit={onSubmit}>
-          <div className="flex flex-col gap-2">
-            <label htmlFor="username" className="text-sm text-gray-600">
-              Username
-            </label>
-            <input
-              id="username"
-              type="text"
-              className="p-2 border rounded bg-white/50 focus:outline-none focus:border-gray-400"
-              required
-            />
-          </div>
+    <SingleColumnLayout>
+      <main className="w-full mx-auto p-4">
+        <div className="mt-12">
+          <form className="flex flex-col gap-4 max-w-md" onSubmit={onSubmit}>
+            <div className="flex flex-col gap-2">
+              <label htmlFor="username" className="text-sm text-gray-600">
+                username
+              </label>
+              <TextInput id="username" value={username} onInput={setUsername} required />
+            </div>
 
-          <div className="flex flex-col gap-2">
-            <label htmlFor="email" className="text-sm text-gray-600">
-              Email (optional)
-            </label>
-            <input
-              id="email"
-              type="email"
-              className="p-2 border rounded bg-white/50 focus:outline-none focus:border-gray-400"
-            />
-          </div>
+            <div className="flex flex-col gap-2">
+              <label htmlFor="email" className="text-sm text-gray-600">
+                email (optional)
+              </label>
+              <TextInput id="email" value={email} onInput={setEmail} required />
+            </div>
 
-          <div className="flex flex-col gap-2">
-            <label htmlFor="password" className="text-sm text-gray-600">
-              Password
-            </label>
-            <input
-              id="password"
-              type="password"
-              className="p-2 border rounded bg-white/50 focus:outline-none focus:border-gray-400"
-              required
-            />
-          </div>
+            <div className="flex flex-col gap-2">
+              <label htmlFor="password" className="text-sm text-gray-600">
+                password
+              </label>
+              <TextInput
+                id="password"
+                type="password"
+                value={password}
+                onInput={setPassword}
+                required
+              />
+            </div>
 
-          <button
-            type="submit"
-            disabled={isSubmitting}
-            className="mt-4 p-2 bg-gray-800 text-white rounded hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            {isSubmitting ? 'Creating account...' : 'Create account'}
-          </button>
-        </form>
-      </div>
-    </main>
-  )
-}
-
-function RejectionMessage() {
-  return (
-    <main className="w-full max-w-3xl mx-auto p-4">
-      <div className="mt-12 text-gray-600 flex flex-col gap-2">
-        <p>An invitation is required to create an account.</p>
-        <p>
-          I'm surprised you even found your way here without one and honestly I'd prefer it if you
-          would leave
-        </p>
-        <p>
-          If you <span className="italic">do</span> want to create an account, you should know who
-          to contact
-        </p>
-      </div>
-    </main>
+            <PrimaryButton className="mt-4" disabled={isSubmitting} type="submit">
+              {isSubmitting ? 'wait...' : 'give me an account pls'}
+            </PrimaryButton>
+          </form>
+        </div>
+      </main>
+
+      <dialog
+        id="go-away-dialog"
+        ref={dialogRef}
+        className="p-6 rounded-lg shadow-lg m-auto outline-none"
+      >
+        <div className="text-gray-600 flex flex-col gap-2">
+          <h1 className={`font-bold text-lg`}>STOP !!!</h1>
+          <p>You need an invitation to sign up</p>
+          <p>
+            I'm surprised you even found your way here without one and honestly I'd prefer it if you
+            would leave
+          </p>
+          <p>
+            If you <span className="italic">do</span> want to create an account, you should know who
+            to contact
+          </p>
+          <PrimaryLinkButton className={`mt-4`} href="https://en.wikipedia.org/wiki/Special:Random">
+            I'm sorry I'll go somewhere else :(
+          </PrimaryLinkButton>
+        </div>
+      </dialog>
+    </SingleColumnLayout>
   )
 }