Skip to content

Commit

Permalink
feat: add admin page
Browse files Browse the repository at this point in the history
  • Loading branch information
pauliescanlon committed Sep 11, 2022
1 parent 7e9797f commit 98055a1
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 66 deletions.
137 changes: 72 additions & 65 deletions pages/admin.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import React, { Fragment } from 'react';
import { useMutation, useQuery } from '@tanstack/react-query';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';

import Spinner from '../components/spinner';
import Loading from '../components/loading';
import Error from '../components/error';
import Success from '../components/success';

const Page = () => {
const queryClient = useQueryClient();

const read = async () => {
try {
const response = await (
Expand All @@ -23,20 +26,21 @@ const Page = () => {
}
};

const create = async () => {
const remove = async (id) => {
try {
const response = await (
await fetch('/api/create-location', {
method: 'POST',
await fetch('/api/delete-location', {
method: 'DELETE',
body: JSON.stringify({
date: new Date()
id: id
})
})
).json();

if (!response.data) {
throw new Error();
}

return response;
} catch (error) {
throw new Error();
Expand All @@ -46,74 +50,77 @@ const Page = () => {
const query = useQuery(['query'], read, {
retry: 2
});
const mutation = useMutation(create);

const mutation = useMutation(remove, {
onSuccess: async () => {
queryClient.invalidateQueries(['query']);
}
});

return (
<section className="grid gap-4 prose mx-auto">
<div>
<h2>Create Location</h2>
<section className="grid gap-4 mx-auto p-6 md:p-8">
<aside className="grid gap-8">
<div className="grid gap-4">
<div className="min-h-[40px]">
{mutation.isLoading ? <Loading /> : null}
{mutation.isError ? <Error /> : null}
{mutation.isSuccess ? <Success /> : null}
</div>
<pre className="min-h-[200px] m-0">{JSON.stringify(mutation.data, null, 2)}</pre>
<button
className="min-w-[120px] rounded bg-gray-100 border border-gray-200 px-3 py-1 justify-self-start font-bold"
onClick={() => {
mutation.mutate();
}}
>
{mutation.isLoading ? 'Submitting' : 'Submit'}
</button>
</div>
</div>
<div>
<h2>Read Locations</h2>
<div className="grid gap-4">
<div className="min-h-[40px]">
{query.isLoading ? <Loading /> : null}
{query.isError ? <Error /> : null}
{query.isSuccess ? <Success /> : null}
</div>
<div className="overflow-hidden">
<div className="flex flex-col h-[600px] overflow-hidden">
<div className="flex-grow overflow-auto rounded border border-border">
<table className="relative w-full m-0">
<thead className="text-primary font-bold">
<tr>
<th className="sticky top-0 p-3 bg-table-thead text-left">Id</th>
<th className="sticky top-0 p-3 bg-table-thead text-left">Date</th>
<th className="sticky top-0 p-3 bg-table-thead text-left">City</th>
<th className="sticky top-0 p-3 bg-table-thead text-left">Latitude</th>
<td className="sticky top-0 p-3 bg-table-thead text-left">Longitude</td>
<td className="sticky top-0 p-3 bg-table-thead text-left">Delete</td>
</tr>
</thead>

{query.isSuccess ? (
<tbody className="divide-y divide-table-divide bg-table-tbody text-text">
<Fragment>
{JSON.parse(query.data.data.locations)
.sort((a, b) => b.id - a.id)

<div className="h-[300px] overflow-scroll">
<table>
<thead className="font-bold">
<tr>
<td>Id</td>
<td>Date</td>
<td>Latitude</td>
<td>Longitude</td>
</tr>
</thead>
.map((item, index) => {
const { id, date, city, lat, lng } = item;
const dateFormat = new Date(date).toLocaleString('default', { month: 'short', day: 'numeric', year: '2-digit' });
return (
<tr key={index}>
<td className="text-xs text-secondary p-3">{id}</td>
<td className="p-3 whitespace-nowrap">{dateFormat}</td>
<td className="p-3 whitespace-nowrap">{city}</td>
<td className="p-3 whitespace-nowrap">{lat}</td>
<td className="p-3 whitespace-nowrap">{lng}</td>
<td className="p-3 whitespace-nowrap">
<button
className="min-w-[100px] min-h-[34px] rounded border border-secondary px-2 py-1 text-primary disabled:border-border disabled:cursor-not-allowed"
onClick={() => {
mutation.mutate(id);
}}
>
{mutation.isLoading ? <Spinner /> : 'Delete'}
</button>
</td>
</tr>
);
})}
</Fragment>
</tbody>
) : null}
</table>

<tbody>
{query.isSuccess ? (
<Fragment>
{JSON.parse(query.data.data.locations)
.sort((a, b) => b.id - a.id)
.map((item, index) => {
const { id, date, lat, lng } = item;
console.log(date);
return (
<tr key={index}>
<td className="text-xs text-gray-500">{id}</td>
<td className="font-semibold">{new Date(date).toLocaleString('default', { month: 'long', day: 'numeric', year: '2-digit' })}</td>
<td>{lat}</td>
<td>{lng}</td>
</tr>
);
})}
</Fragment>
{query.isLoading ? (
<div className="flex items-center justify-center h-[240px]">
<Spinner />
</div>
) : null}
</tbody>
</table>
</div>
</div>
</div>
<pre className="min-h-[200px] m-0">{JSON.stringify(query.data, null, 2)}</pre>
{/* <pre className="min-h-[200px] m-0">{JSON.stringify(query.data, null, 2)}</pre> */}
</div>
</div>
</aside>
</section>
);
};
Expand Down
1 change: 0 additions & 1 deletion pages/api/create-location.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@ export default async function handler(req, res) {
}
});
} catch (error) {
console.log(error);
res.status(500).json({ message: 'Error!' });
} finally {
prisma.$disconnect();
Expand Down
32 changes: 32 additions & 0 deletions pages/api/delete-location.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
const { PrismaClient, Prisma } = require('@prisma/client');

export default async function handler(req, res) {
const { id } = JSON.parse(req.body);

const prisma = new PrismaClient({
datasources: {
db: {
url: process.env.DATABASE_URL
}
}
});

try {
const response = await prisma.locations.delete({
where: {
id: BigInt(id)
}
});

res.status(200).json({
message: 'A-OK!',
data: {
id: id
}
});
} catch (error) {
res.status(500).json({ message: 'Error!' });
} finally {
prisma.$disconnect();
}
}

1 comment on commit 98055a1

@vercel
Copy link

@vercel vercel bot commented on 98055a1 Sep 11, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

cockroachdb-edge-locations – ./

cockroachdb-edge-locations-pauliescanlon.vercel.app
cockroachdb-edge-locations-git-main-pauliescanlon.vercel.app
cockroachdb-edge-locations.vercel.app

Please sign in to comment.