git.stevedylan.dev

update styles e16c7586

Steve · 2024-09-22 19:36 1 file(s) · +34 −29

src/components/GuestbookFeed.tsx +34 −29

	SignedOut,
	UserButton,
	SignUpButton,
	SignUp,
} from "@clerk/astro/react";

type Message = {

	username: string;
};

const API_URL = "https://guestbook-db-production.up.railway.app";

export function GuestbookFeed() {
	const [messages, setMessages] = useState<Message[]>([]);
	const [isLoading, setIsLoading] = useState(true);
	const [isSending, setIsSending] = useState(false);
	const [inputText, setInputText] = useState("");
	const session = useStore($sessionStore);
	const user = useStore($userStore);

	async function fetchMessages() {
		setIsLoading(true);
		try {
			const req = await fetch(
				"https://guestbook-db-production.up.railway.app/messages",
			);
			const req = await fetch(`${API_URL}/messages`);
			const res = await req.json();
			console.log(res);
			setMessages(res);

	}

	async function sendMessage() {
		setIsSending(true);
		try {
			const req = await fetch(
				"https://guestbook-db-production.up.railway.app/messages",
				{
					method: "POST",
					headers: {
						Authorization: `Bearer ${await session.getToken()}`,
					},
					body: JSON.stringify({ note: inputText }),
			const req = await fetch(`${API_URL}/messages`, {
				method: "POST",
				headers: {
					Authorization: `Bearer ${await session.getToken()}`,
				},
			);
				body: JSON.stringify({ note: inputText }),
			});
			const res = await req.json();
			console.log(res);
			setInputText("");
			setIsSending(false);
			await fetchMessages();
		} catch (error) {
			console.log(error);
			setIsSending(false);
		}
	}

	async function deleteMessage(id: number) {
		try {
			const req = await fetch(
				`https://guestbook-db-production.up.railway.app/messages/${id}`,
				{
					method: "DELETE",
					headers: {
						Authorization: `Bearer ${await session.getToken()}`,
					},
			const req = await fetch(`${API_URL}/messages/${id}`, {
				method: "DELETE",
				headers: {
					Authorization: `Bearer ${await session.getToken()}`,
				},
			);
			});
			const res = await req.json();
			console.log(res);
			await fetchMessages();

					</SignUpButton>
				</SignedOut>
				<SignedIn>
					<div className="flex items-center gap-4 w-full">
					<div className="flex items-start gap-4 w-full">
						<UserButton afterSignOutUrl="/log" />
						<input
							className="p-1 border-current border-2 rounded-md w-96"
							className="p-1 bg-bgColor border-current border-2 rounded-md w-96"
							type="text"
							onChange={inputHandeler}
							value={inputText}

							onClick={sendMessage}
							type="button"
						>
							Send
							{isSending ? "Posting..." : "Post"}
						</button>
					</div>
				</SignedIn>

			) : (
				<div className="flex flex-col gap-6">
					{messages.map((note: Message) => (
						<div className="flex flex-row justify-between" key={note.id}>
							<div className="flex flex-row gap-2 items-center">
								<a href={`https://github.com/${note.username}`} target="_blank">
						<div
							className="flex flex-row justify-between items-start"
							key={note.id}
						>
							<div className="flex flex-row gap-2 items-start">
								<a
									className="flex-shrink-0 h-7 w-7"
									href={`https://github.com/${note.username}`}
									target="_blank"
									rel="noreferrer"
								>
									<img
										className="h-7 w-7 rounded-full"
										className="h-full w-full rounded-full object-cover"
										src={note.pfp_url}
										alt={note.author}
									/>
								</a>
								<div className="flex flex-col justify-between">
									<p className="font-bold text-gray-400">{note.author}</p>
									<p>{note.note}</p>
									<p className="break-words">{note.note}</p>
								</div>
							</div>
							{user && user.id === note.user_id && (

6	6		SignedOut,
7	7		UserButton,
8	8		SignUpButton,
9		-	SignUp,
10	9		} from "@clerk/astro/react";
11	10
12	11		type Message = {

18	17		username: string;
19	18		};
20	19
	20	+	const API_URL = "https://guestbook-db-production.up.railway.app";
	21	+
21	22		export function GuestbookFeed() {
22	23		const [messages, setMessages] = useState<Message[]>([]);
23	24		const [isLoading, setIsLoading] = useState(true);
	25	+	const [isSending, setIsSending] = useState(false);
24	26		const [inputText, setInputText] = useState("");
25	27		const session = useStore($sessionStore);
26	28		const user = useStore($userStore);

28	30		async function fetchMessages() {
29	31		setIsLoading(true);
30	32		try {
31		-	const req = await fetch(
32		-	"https://guestbook-db-production.up.railway.app/messages",
33		-	);
	33	+	const req = await fetch(`${API_URL}/messages`);
34	34		const res = await req.json();
35	35		console.log(res);
36	36		setMessages(res);

46	46		}
47	47
48	48		async function sendMessage() {
	49	+	setIsSending(true);
49	50		try {
50		-	const req = await fetch(
51		-	"https://guestbook-db-production.up.railway.app/messages",
52		-	{
53		-	method: "POST",
54		-	headers: {
55		-	Authorization: `Bearer ${await session.getToken()}`,
56		-	},
57		-	body: JSON.stringify({ note: inputText }),
	51	+	const req = await fetch(`${API_URL}/messages`, {
	52	+	method: "POST",
	53	+	headers: {
	54	+	Authorization: `Bearer ${await session.getToken()}`,
58	55		},
59		-	);
	56	+	body: JSON.stringify({ note: inputText }),
	57	+	});
60	58		const res = await req.json();
61	59		console.log(res);
62	60		setInputText("");
	61	+	setIsSending(false);
63	62		await fetchMessages();
64	63		} catch (error) {
65	64		console.log(error);
	65	+	setIsSending(false);
66	66		}
67	67		}
68	68
69	69		async function deleteMessage(id: number) {
70	70		try {
71		-	const req = await fetch(
72		-	`https://guestbook-db-production.up.railway.app/messages/${id}`,
73		-	{
74		-	method: "DELETE",
75		-	headers: {
76		-	Authorization: `Bearer ${await session.getToken()}`,
77		-	},
	71	+	const req = await fetch(`${API_URL}/messages/${id}`, {
	72	+	method: "DELETE",
	73	+	headers: {
	74	+	Authorization: `Bearer ${await session.getToken()}`,
78	75		},
79		-	);
	76	+	});
80	77		const res = await req.json();
81	78		console.log(res);
82	79		await fetchMessages();

105	102		</SignUpButton>
106	103		</SignedOut>
107	104		<SignedIn>
108		-	<div className="flex items-center gap-4 w-full">
	105	+	<div className="flex items-start gap-4 w-full">
109	106		<UserButton afterSignOutUrl="/log" />
110	107		<input
111		-	className="p-1 border-current border-2 rounded-md w-96"
	108	+	className="p-1 bg-bgColor border-current border-2 rounded-md w-96"
112	109		type="text"
113	110		onChange={inputHandeler}
114	111		value={inputText}

118	115		onClick={sendMessage}
119	116		type="button"
120	117		>
121		-	Send
	118	+	{isSending ? "Posting..." : "Post"}
122	119		</button>
123	120		</div>
124	121		</SignedIn>

128	125		) : (
129	126		<div className="flex flex-col gap-6">
130	127		{messages.map((note: Message) => (
131		-	<div className="flex flex-row justify-between" key={note.id}>
132		-	<div className="flex flex-row gap-2 items-center">
133		-	<a href={`https://github.com/${note.username}`} target="_blank">
	128	+	<div
	129	+	className="flex flex-row justify-between items-start"
	130	+	key={note.id}
	131	+	>
	132	+	<div className="flex flex-row gap-2 items-start">
	133	+	<a
	134	+	className="flex-shrink-0 h-7 w-7"
	135	+	href={`https://github.com/${note.username}`}
	136	+	target="_blank"
	137	+	rel="noreferrer"
	138	+	>
134	139		<img
135		-	className="h-7 w-7 rounded-full"
	140	+	className="h-full w-full rounded-full object-cover"
136	141		src={note.pfp_url}
137	142		alt={note.author}
138	143		/>
139	144		</a>
140	145		<div className="flex flex-col justify-between">
141	146		<p className="font-bold text-gray-400">{note.author}</p>
142		-	<p>{note.note}</p>
	147	+	<p className="break-words">{note.note}</p>
143	148		</div>
144	149		</div>
145	150		{user && user.id === note.user_id && (