Simple landing page and moved css to the app.css
This commit is contained in:
@@ -1,213 +1,446 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { createContext, useContext, useState, useRef, useEffect } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import {
|
||||
readTweet,
|
||||
QueryClient,
|
||||
QueryClientProvider,
|
||||
useQuery,
|
||||
useMutation,
|
||||
useQueryClient,
|
||||
} from "@tanstack/react-query";
|
||||
import {
|
||||
createTweet,
|
||||
readTweet,
|
||||
destroyTweet,
|
||||
updateTweet,
|
||||
buildCSRFHeaders,
|
||||
} from "./ash_rpc";
|
||||
|
||||
type Tweet = {
|
||||
id: string;
|
||||
content: string;
|
||||
userId: string;
|
||||
state: "posted" | "drafted";
|
||||
};
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: { queries: { staleTime: 10_000 } },
|
||||
});
|
||||
|
||||
function TweetCompose({ onPosted }: { onPosted: (tweet: Tweet) => void }) {
|
||||
const [content, setContent] = useState("");
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
// ── Types ──────────────────────────────────────────────────────────────────────
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!content.trim()) return;
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
const result = await createTweet({
|
||||
input: { content: content.trim() },
|
||||
fields: ["id", "content", "userId", "state"],
|
||||
headers: buildCSRFHeaders(),
|
||||
});
|
||||
setSubmitting(false);
|
||||
if (result.success) {
|
||||
onPosted(result.data as Tweet);
|
||||
setContent("");
|
||||
} else {
|
||||
setError(result.errors.map((e) => e.message).join(", "));
|
||||
}
|
||||
}
|
||||
type Tweet = { id: string; content: string; userId: string; state: string };
|
||||
|
||||
// ── Auth context ───────────────────────────────────────────────────────────────
|
||||
|
||||
const AuthCtx = createContext({ email: "", userId: "" });
|
||||
|
||||
// ── Helpers ────────────────────────────────────────────────────────────────────
|
||||
|
||||
function timeAgo(): string {
|
||||
return "just now";
|
||||
}
|
||||
|
||||
// ── Components ─────────────────────────────────────────────────────────────────
|
||||
|
||||
function Spinner() {
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="card bg-base-200 p-4 mb-6">
|
||||
<textarea
|
||||
className="textarea textarea-bordered w-full mb-3 resize-none"
|
||||
rows={3}
|
||||
placeholder="What's happening?"
|
||||
value={content}
|
||||
maxLength={280}
|
||||
onChange={(e) => setContent(e.target.value)}
|
||||
/>
|
||||
{error && <p className="text-error text-sm mb-2">{error}</p>}
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm opacity-50">{content.length}/280</span>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary btn-sm"
|
||||
disabled={submitting || !content.trim()}
|
||||
>
|
||||
{submitting ? "Posting..." : "Post"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div style={{ display: "flex", justifyContent: "center", padding: "2rem" }}>
|
||||
<div className="mx-spinner" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TweetCard({
|
||||
tweet,
|
||||
currentUserEmail,
|
||||
onDeleted,
|
||||
}: {
|
||||
tweet: Tweet;
|
||||
currentUserEmail: string;
|
||||
onDeleted: (id: string) => void;
|
||||
}) {
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
function ErrorBanner({ message }: { message: string }) {
|
||||
return (
|
||||
<div className="mx-error-banner">
|
||||
<span className="mx-error-icon">⚠</span>
|
||||
{message}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
setDeleting(true);
|
||||
const result = await destroyTweet({
|
||||
identity: tweet.id,
|
||||
headers: buildCSRFHeaders(),
|
||||
});
|
||||
if (result.success) {
|
||||
onDeleted(tweet.id);
|
||||
} else {
|
||||
setDeleting(false);
|
||||
function CharCount({ current, max }: { current: number; max: number }) {
|
||||
const remaining = max - current;
|
||||
const pct = current / max;
|
||||
const color =
|
||||
pct > 0.9 ? "#ef4444" : pct > 0.75 ? "#f59e0b" : "var(--mx-muted)";
|
||||
return (
|
||||
<span style={{ color, fontSize: "0.75rem", fontVariantNumeric: "tabular-nums" }}>
|
||||
{remaining}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function ComposeTweet({ onSuccess }: { onSuccess?: () => void }) {
|
||||
const [text, setText] = useState("");
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const qc = useQueryClient();
|
||||
const MAX = 280;
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: async (content: string) => {
|
||||
const res = await createTweet({
|
||||
input: { content },
|
||||
fields: ["id", "content", "userId", "state"],
|
||||
headers: buildCSRFHeaders(),
|
||||
});
|
||||
if (!res.success) throw new Error(res.errors?.[0]?.message ?? "Failed");
|
||||
return res.data;
|
||||
},
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ["tweets"] });
|
||||
setText("");
|
||||
setError(null);
|
||||
onSuccess?.();
|
||||
},
|
||||
onError: (e: Error) => setError(e.message),
|
||||
});
|
||||
|
||||
function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
submit();
|
||||
}
|
||||
}
|
||||
|
||||
function submit() {
|
||||
const trimmed = text.trim();
|
||||
if (!trimmed) return;
|
||||
if (trimmed.length > MAX) {
|
||||
setError(`Max ${MAX} characters`);
|
||||
return;
|
||||
}
|
||||
setError(null);
|
||||
mutation.mutate(trimmed);
|
||||
}
|
||||
|
||||
// Auto-resize textarea
|
||||
useEffect(() => {
|
||||
const el = textareaRef.current;
|
||||
if (!el) return;
|
||||
el.style.height = "auto";
|
||||
el.style.height = `${el.scrollHeight}px`;
|
||||
}, [text]);
|
||||
|
||||
return (
|
||||
<div className="card bg-base-200 mb-3 p-4">
|
||||
<p className="text-base-content whitespace-pre-wrap break-words">
|
||||
{tweet.content}
|
||||
</p>
|
||||
<div className="flex items-center justify-between mt-3">
|
||||
<span className="text-xs opacity-40 font-mono">
|
||||
{tweet.userId.slice(0, 8)}…
|
||||
</span>
|
||||
{currentUserEmail && (
|
||||
<button
|
||||
className="btn btn-ghost btn-xs text-error"
|
||||
onClick={handleDelete}
|
||||
disabled={deleting}
|
||||
>
|
||||
{deleting ? "…" : "Delete"}
|
||||
</button>
|
||||
)}
|
||||
<div className="mx-compose">
|
||||
<div className="mx-compose-avatar">
|
||||
<span>M</span>
|
||||
</div>
|
||||
<div className="mx-compose-body">
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
className="mx-compose-textarea"
|
||||
placeholder="What's mixing?"
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
rows={2}
|
||||
maxLength={MAX + 1}
|
||||
/>
|
||||
{error && <p className="mx-compose-error">{error}</p>}
|
||||
<div className="mx-compose-footer">
|
||||
<span className="mx-compose-hint">⌘↵ to post</span>
|
||||
<div className="mx-compose-actions">
|
||||
<CharCount current={text.length} max={MAX} />
|
||||
<button
|
||||
className="mx-btn-post"
|
||||
onClick={submit}
|
||||
disabled={!text.trim() || mutation.isPending}
|
||||
>
|
||||
{mutation.isPending ? "Posting…" : "Post"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TweetFeed({
|
||||
tweets,
|
||||
currentUserEmail,
|
||||
onDeleted,
|
||||
}: {
|
||||
tweets: Tweet[];
|
||||
currentUserEmail: string;
|
||||
onDeleted: (id: string) => void;
|
||||
}) {
|
||||
if (tweets.length === 0) {
|
||||
function TweetCard({ tweet }: { tweet: Tweet }) {
|
||||
const { userId: currentUserId } = useContext(AuthCtx);
|
||||
const canModify = !!currentUserId && tweet.userId === currentUserId;
|
||||
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [editText, setEditText] = useState(tweet.content);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [confirmDelete, setConfirmDelete] = useState(false);
|
||||
const qc = useQueryClient();
|
||||
|
||||
const deleteMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
const res = await destroyTweet({
|
||||
identity: tweet.id,
|
||||
headers: buildCSRFHeaders(),
|
||||
});
|
||||
if (!res.success) throw new Error(res.errors?.[0]?.message ?? "Failed to delete");
|
||||
},
|
||||
onSuccess: () => qc.invalidateQueries({ queryKey: ["tweets"] }),
|
||||
onError: (e: Error) => setError(e.message),
|
||||
});
|
||||
|
||||
const updateMutation = useMutation({
|
||||
mutationFn: async (content: string) => {
|
||||
const res = await updateTweet({
|
||||
identity: tweet.id,
|
||||
input: { content },
|
||||
fields: ["id", "content", "userId", "state"],
|
||||
headers: buildCSRFHeaders(),
|
||||
});
|
||||
if (!res.success) throw new Error(res.errors?.[0]?.message ?? "Failed to update");
|
||||
},
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ["tweets"] });
|
||||
setEditing(false);
|
||||
setError(null);
|
||||
},
|
||||
onError: (e: Error) => setError(e.message),
|
||||
});
|
||||
|
||||
function saveEdit() {
|
||||
const trimmed = editText.trim();
|
||||
if (!trimmed) return;
|
||||
updateMutation.mutate(trimmed);
|
||||
}
|
||||
|
||||
return (
|
||||
<article className="mx-tweet">
|
||||
<div className="mx-tweet-avatar">
|
||||
<span>M</span>
|
||||
</div>
|
||||
<div className="mx-tweet-body">
|
||||
<div className="mx-tweet-header">
|
||||
<span className="mx-tweet-handle">@mixer</span>
|
||||
<span className="mx-tweet-dot">·</span>
|
||||
<span className="mx-tweet-time">{timeAgo()}</span>
|
||||
{canModify && (
|
||||
<div className="mx-tweet-actions">
|
||||
<button
|
||||
className="mx-action-btn"
|
||||
title="Edit"
|
||||
onClick={() => {
|
||||
setEditText(tweet.content);
|
||||
setEditing(true);
|
||||
setConfirmDelete(false);
|
||||
}}
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm17.71-10.04a1 1 0 0 0 0-1.41l-2.31-2.31a1 1 0 0 0-1.41 0l-1.79 1.79 3.75 3.75 1.76-1.82z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
className={`mx-action-btn mx-action-delete${confirmDelete ? " mx-action-confirm" : ""}`}
|
||||
title={confirmDelete ? "Confirm delete" : "Delete"}
|
||||
onClick={() => {
|
||||
if (!confirmDelete) {
|
||||
setConfirmDelete(true);
|
||||
setTimeout(() => setConfirmDelete(false), 3000);
|
||||
} else {
|
||||
deleteMutation.mutate();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{deleteMutation.isPending ? (
|
||||
<span style={{ fontSize: "0.65rem" }}>…</span>
|
||||
) : confirmDelete ? (
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{editing ? (
|
||||
<div className="mx-edit-area">
|
||||
<textarea
|
||||
className="mx-edit-textarea"
|
||||
value={editText}
|
||||
onChange={(e) => setEditText(e.target.value)}
|
||||
autoFocus
|
||||
rows={3}
|
||||
/>
|
||||
{error && <p className="mx-compose-error">{error}</p>}
|
||||
<div className="mx-edit-footer">
|
||||
<button
|
||||
className="mx-btn-cancel"
|
||||
onClick={() => {
|
||||
setEditing(false);
|
||||
setError(null);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
className="mx-btn-save"
|
||||
onClick={saveEdit}
|
||||
disabled={!editText.trim() || updateMutation.isPending}
|
||||
>
|
||||
{updateMutation.isPending ? "Saving…" : "Save"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="mx-tweet-text">{tweet.content}</p>
|
||||
)}
|
||||
|
||||
{error && !editing && <p className="mx-compose-error">{error}</p>}
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
|
||||
function Feed() {
|
||||
const { data, isLoading, isError, error, refetch } = useQuery({
|
||||
queryKey: ["tweets"],
|
||||
queryFn: async () => {
|
||||
const res = await readTweet({
|
||||
fields: ["id", "content", "userId", "state"],
|
||||
sort: "-id",
|
||||
headers: buildCSRFHeaders(),
|
||||
});
|
||||
if (!res.success) throw new Error("Failed to load tweets");
|
||||
const tweets = Array.isArray(res.data) ? res.data : (res.data as any)?.results ?? [];
|
||||
return tweets as Tweet[];
|
||||
},
|
||||
});
|
||||
|
||||
if (isLoading) return <Spinner />;
|
||||
if (isError) {
|
||||
return (
|
||||
<p className="text-center opacity-40 py-12">
|
||||
No tweets yet. Be the first!
|
||||
</p>
|
||||
<ErrorBanner message={(error as Error)?.message ?? "Could not load tweets"} />
|
||||
);
|
||||
}
|
||||
|
||||
const tweets = data ?? [];
|
||||
|
||||
if (tweets.length === 0) {
|
||||
return (
|
||||
<div className="mx-empty">
|
||||
<div className="mx-empty-icon">◎</div>
|
||||
<p className="mx-empty-title">Nothing posted yet</p>
|
||||
<p className="mx-empty-sub">Be the first to mix something in.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{tweets.map((tweet) => (
|
||||
<TweetCard
|
||||
key={tweet.id}
|
||||
tweet={tweet}
|
||||
currentUserEmail={currentUserEmail}
|
||||
onDeleted={onDeleted}
|
||||
/>
|
||||
<div className="mx-feed">
|
||||
{tweets.map((t) => (
|
||||
<TweetCard key={t.id} tweet={t} />
|
||||
))}
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RefreshButton() {
|
||||
const qc = useQueryClient();
|
||||
const [spinning, setSpinning] = useState(false);
|
||||
async function refresh() {
|
||||
setSpinning(true);
|
||||
await qc.invalidateQueries({ queryKey: ["tweets"] });
|
||||
setTimeout(() => setSpinning(false), 600);
|
||||
}
|
||||
return (
|
||||
<button className="mx-refresh-btn" onClick={refresh} title="Refresh feed">
|
||||
<svg
|
||||
width="15"
|
||||
height="15"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
style={{
|
||||
transition: "transform 0.6s ease",
|
||||
transform: spinning ? "rotate(360deg)" : "rotate(0deg)",
|
||||
}}
|
||||
>
|
||||
<path d="M17.65 6.35A7.958 7.958 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function App() {
|
||||
const appEl = document.getElementById("app")!;
|
||||
const currentUserEmail = appEl.dataset.currentUserEmail ?? "";
|
||||
|
||||
const [tweets, setTweets] = useState<Tweet[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
readTweet({ fields: ["id", "content", "userId", "state"] }).then(
|
||||
(result) => {
|
||||
if (result.success) {
|
||||
const data = result.data;
|
||||
const list: Tweet[] = Array.isArray(data)
|
||||
? (data as Tweet[]).slice().reverse()
|
||||
: (data as any).results
|
||||
? ((data as any).results as Tweet[]).slice().reverse()
|
||||
: [];
|
||||
setTweets(list);
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
);
|
||||
}, []);
|
||||
|
||||
function handlePosted(tweet: Tweet) {
|
||||
setTweets((prev) => [tweet, ...prev]);
|
||||
}
|
||||
|
||||
function handleDeleted(id: string) {
|
||||
setTweets((prev) => prev.filter((t) => t.id !== id));
|
||||
}
|
||||
const email = appEl.dataset.currentUserEmail ?? "";
|
||||
const userId = appEl.dataset.currentUserId ?? "";
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-base-100 text-base-content">
|
||||
<div className="max-w-xl mx-auto px-4 py-8">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1 className="text-2xl font-bold">Mixer Feed</h1>
|
||||
{currentUserEmail ? (
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-sm opacity-60">{currentUserEmail}</span>
|
||||
<a href="/auth/sign-out" className="btn btn-ghost btn-sm">
|
||||
Sign out
|
||||
</a>
|
||||
<AuthCtx.Provider value={{ email, userId }}>
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<div className="mx-root">
|
||||
<aside className="mx-sidebar">
|
||||
<div className="mx-logo">
|
||||
<span className="mx-logo-icon">⬡</span>
|
||||
<span className="mx-logo-text">Mixer</span>
|
||||
</div>
|
||||
) : (
|
||||
<a href="/register" className="btn btn-primary btn-sm">
|
||||
Sign in
|
||||
</a>
|
||||
)}
|
||||
<nav className="mx-nav">
|
||||
<a className="mx-nav-item mx-nav-active" href="#">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
|
||||
</svg>
|
||||
Feed
|
||||
</a>
|
||||
</nav>
|
||||
<div className="mx-sidebar-footer">
|
||||
{email ? (
|
||||
<>
|
||||
<span className="mx-version" style={{ color: "var(--mx-fg2)" }}>{email}</span>
|
||||
<a className="mx-auth-link" href="/auth/sign-out">Sign out</a>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<a className="mx-auth-link" href="/register">Create account</a>
|
||||
<a className="mx-auth-link" href="/auth/sign-in">Sign in</a>
|
||||
</>
|
||||
)}
|
||||
<span className="mx-version">v0.1.0</span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main className="mx-main">
|
||||
<header className="mx-header">
|
||||
<h1 className="mx-header-title">Feed</h1>
|
||||
<RefreshButton />
|
||||
</header>
|
||||
|
||||
<div className="mx-compose-wrapper">
|
||||
{email ? (
|
||||
<ComposeTweet />
|
||||
) : (
|
||||
<div className="mx-signin-cta">
|
||||
<p>Sign in to start mixing.</p>
|
||||
<a className="mx-btn-post" href="/register">Sign in</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mx-divider" />
|
||||
|
||||
<Feed />
|
||||
</main>
|
||||
|
||||
<div className="mx-rightbar">
|
||||
<div className="mx-info-card">
|
||||
<h3 className="mx-info-title">About Mixer</h3>
|
||||
<p className="mx-info-body">
|
||||
A minimal social feed built with Ash Framework, Phoenix, and React.
|
||||
</p>
|
||||
<div className="mx-stack">
|
||||
{["Ash 3", "Phoenix 1.8", "AshTypescript", "React 19"].map((s) => (
|
||||
<span key={s} className="mx-tag">{s}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{currentUserEmail && <TweetCompose onPosted={handlePosted} />}
|
||||
|
||||
{loading ? (
|
||||
<p className="text-center opacity-40 py-12">Loading…</p>
|
||||
) : (
|
||||
<TweetFeed
|
||||
tweets={tweets}
|
||||
currentUserEmail={currentUserEmail}
|
||||
onDeleted={handleDeleted}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</QueryClientProvider>
|
||||
</AuthCtx.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
createRoot(document.getElementById("app")!).render(
|
||||
// ── Bootstrap ──────────────────────────────────────────────────────────────────
|
||||
|
||||
const root = createRoot(document.getElementById("app")!);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
|
||||
Reference in New Issue
Block a user