alex/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

order number support

Browse Source
This commit is contained in:
Alex Frantz
2024-03-21 01:40:07 -04:00
parent 381081c051
commit 94b7b9a83c
5 changed files with 122 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/create.tsx
+57 -5
View File
@@ -16,15 +16,16 @@ export default function CreatePage() {
// trpc hooks
const linksMutation = api.links.create.useMutation()
function onLinkSubmit(event: FormEvent<HTMLFormElement>) {
function onLinkCreateSubmit(event: FormEvent<HTMLFormElement>) {
const form = event.target as HTMLFormElement
const urlRegex = new RegExp("^((https):\/\/)?(www.)?[a-z0-9]+\.[a-z]+(\/[a-zA-Z0-9#]+\/?)*$")
const titleElement = form.elements.namedItem('title') as HTMLInputElement;
const urlElement = form.elements.namedItem('url') as HTMLInputElement;
const orderElement = form.elements.namedItem("orderNumber") as HTMLInputElement;
const urlMatches = urlElement.value.match(urlRegex)
if (!titleElement.value || !urlElement.value) {
if (!titleElement.value || !urlElement.value || (orderElement.value && isNaN(Number(orderElement.value)))) {
event.preventDefault();
setMessage("One or more values were missing!")
@@ -37,7 +38,39 @@ export default function CreatePage() {
} else {
const object = {
name: titleElement.value,
url: urlElement.value
url: urlElement.value,
orderNumber: Number(orderElement.value) || 0
}
linksMutation.mutate(object)
}
}
function onLinkUpdateSubmit(event: FormEvent<HTMLFormElement>) {
const form = event.target as HTMLFormElement
const urlRegex = new RegExp("^((https):\/\/)?(www.)?[a-z0-9]+\.[a-z]+(\/[a-zA-Z0-9#]+\/?)*$")
const idElement = form.elements.namedItem("id") as HTMLInputElement;
const titleElement = form.elements.namedItem('title') as HTMLInputElement;
const urlElement = form.elements.namedItem('url') as HTMLInputElement;
const orderElement = form.elements.namedItem("orderNumber") as HTMLInputElement;
const urlMatches = urlElement.value.match(urlRegex)
if (!idElement.value || isNaN(Number(idElement.value)) || (orderElement.value && isNaN(Number(orderElement.value)))) {
event.preventDefault();
setMessage("One or more values were missing!")
setTimeout(() => setMessage(null), 5000)
} else if (urlMatches != null && !urlMatches[1]) {
event.preventDefault();
setMessage("An invalid URL was provided!")
setTimeout(() => setMessage(null), 5000)
} else {
const object = {
id: Number(idElement.value),
name: titleElement.value,
url: urlElement.value,
orderNumber: Number(orderElement.value) || 0
}
linksMutation.mutate(object)
@@ -47,15 +80,34 @@ export default function CreatePage() {
return (
<RootLayout protectedPage={true}>
<div className="space-y-4">
<div className="w-96 p-2 mx-auto bg-gray-500 text-center">
<div className="w-96 p-2 mx-auto bg-gray-500 text-center text-white">
<h1 className="font-bold text-2xl">Create Link</h1>
<div className="pt-2 pb-2">
<hr />
</div>
<form onSubmit={onLinkSubmit}>
<form onSubmit={onLinkCreateSubmit}>
<InputOption inputName="title" label="Title" />
<InputOption inputName="orderNumber" label="Order Number" />
<InputOption inputName="url" label="URL" />
<button className="bg-gray-800 text-white rounded-lg p-2" type="submit">Submit</button>
</form>
<p>{message}</p>
</div>
<div className="w-96 p-2 mx-auto bg-gray-500 text-center text-white">
<h1 className="font-bold text-2xl">Update Link</h1>
<div className="pt-2 pb-2">
<hr />
</div>
<form onSubmit={onLinkUpdateSubmit}>
<InputOption inputName="id" label="Link ID" />
<InputOption inputName="title" label="Title" />
<InputOption inputName="orderNumber" label="Order Number" />
<InputOption inputName="url" label="URL" />
<button className="bg-gray-800 text-white rounded-lg p-2" type="submit">Submit</button>
src/pages/links.tsx
+23 -28
View File
@@ -2,43 +2,16 @@ import SocialCard from '@/components/SocialCard'
import Head from '@/components/Head';
import { api } from "@/utils/api";
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import Image from 'next/image';
import Link from 'next/link';
import React, {useState, useEffect} from 'react';
export default function Links() {
const router = useRouter();
const {status} = useSession();
const [links, setLinks] = useState<React.JSX.Element[] | null>(null);
// trpc hooks
const { data: linkData } = api.links.getAll.useQuery()
const deleteMutation = api.links.delete.useMutation()
useEffect(() => {
if (!links && linkData) {
const allLinks = [];
for (const link of linkData) {
allLinks.push(
<SocialCard
name={link.name}
key={link.id}
url={link.url}
showDelete={status == "authenticated"}
deleteCallback={() => {
deleteMutation.mutate(link.id);
router.reload()
}}
/>
)
}
setLinks(allLinks)
}
})
return (
<main className="bg-black flex flex-col justify-center items-center min-h-screen">
<Head />
@@ -57,7 +30,29 @@ export default function Links() {
<div className="space-y-2">
{
links && links.length > 0 ? links : <h1 className="text-center text-white font-bold">Uh oh, there are no links here!</h1>
linkData ?
linkData.sort((a,b) => {
if (a.orderNumber < b.orderNumber) {
return -1
} else if (a.orderNumber > b.orderNumber) {
return 1
}
return 0
}).map((v,k) => {
return <SocialCard
name={v.name}
key={k}
id={v.id}
url={v.url}
deleteCallback={() => {
deleteMutation.mutate(v.id);
}}
isAuthenticated={ status === "authenticated" }
/>
})
:
<h1 className="text-center text-white font-bold">Uh oh, there are no links here!</h1>
}
</div>
</div>