65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
import { api } from "~/utils/api";
|
|
import { useState } from "react";
|
|
|
|
|
|
const Devices: React.FC = (props) => {
|
|
const sessionData = props.sessionData
|
|
const [newDevice, setNewDevice] = useState("");
|
|
const addDevice = api.device.addDevice.useMutation();
|
|
const device = api.device.getAll.useQuery();
|
|
|
|
|
|
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center gap-4">
|
|
<p className="text-center text-2xl text-white">
|
|
</p>
|
|
<h2 className="py-4 text-2xl font-bold text-white">
|
|
Devices
|
|
</h2>
|
|
<div className="flex flex-col items-center justify-center gap-4">
|
|
{
|
|
!device.data ? "Loading tRPC query..."
|
|
:
|
|
device.data.map((device) => (
|
|
<div className="flex flex-col items-center justify-center gap-4">
|
|
<p className="text-xl font-bold text-white">{device.name}</p>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
<div className="flex flex-col items-center justify-center gap-4">
|
|
<h2 className="py-4 text-2xl font-bold text-white">Create Device</h2>
|
|
<form
|
|
className="flex gap-2"
|
|
onSubmit={(event) => {
|
|
event.preventDefault();
|
|
addDevice.mutate({
|
|
name: newDevice
|
|
});
|
|
setNewDevice("");
|
|
}}
|
|
>
|
|
<input
|
|
type="text"
|
|
className="rounded-md border-2 border-zinc-800 bg-neutral-900 px-4 py-2 focus:outline-none"
|
|
placeholder="Your message..."
|
|
minLength={2}
|
|
maxLength={100}
|
|
value={newDevice}
|
|
onChange={(event) => setNewDevice(event.target.value)}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="rounded-md border-2 border-zinc-800 p-2 focus:outline-none"
|
|
>
|
|
Submit
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Devices; |