Repository navigation
Expand file tree
/
Copy pathpage.tsx
More file actions
133 lines (122 loc) · 4.07 KB
/
Copy pathpage.tsx
File metadata and controls
133 lines (122 loc) · 4.07 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
"use client";
import { useForm } from "react-hook-form";
import { toast } from "react-toastify";
import { useContext, useState } from "react";
import { SupabaseContext } from "@/context/SupabaseContext";
import { useRouter } from "next/navigation";
import { ToastContainer } from "react-toastify";
import Balancer from "react-wrap-balancer";
import GitHubButton from "react-github-button";
import "react-toastify/dist/ReactToastify.css";
import "react-github-button/assets/style.css";
export type ProjectFormInput = { projectId: string; accessToken: string };
export default function Home() {
const { setSchemaTypeData } = useContext(SupabaseContext)!;
const router = useRouter();
const [loading, setLoading] = useState(false);
const {
register,
handleSubmit,
formState: { errors },
} = useForm<ProjectFormInput>();
const fetchTypescriptType = async (input: ProjectFormInput) => {
const response = await fetch(`/api/typescript`, {
method: "POST",
body: JSON.stringify(input),
});
const data = await response.json();
return data;
};
const ProjectFormInput) => {
if (loading) return;
toast.promise(
async () => {
setLoading(true);
const { types } = (await fetchTypescriptType(input)) ?? {};
setSchemaTypeData(types);
setLoading(false);
router.push("/editor");
},
{
pending: "Loading the database schema... ⚙️",
success: "Editor will launch shortly... 👌",
error: {
render({ data }) {
setLoading(false);
return <span>The connection to the server failed. 🤯</span>;
},
},
}
);
};
return (
<main data-theme="dark">
<div className="hero min-h-screen">
<div className="hero-content flex-col lg:flex-row-reverse">
<div className="text-center lg:text-left">
<h1 className="text-5xl font-bold">
<Balancer>Supabase RLS Editor</Balancer>
</h1>
<p className="py-6">
<Balancer>
Helps you write Supabase Row Level Security (RLS) in Typescript.
(* plv8)
</Balancer>
</p>
</div>
<form
>
className="card flex-shrink-0 w-full max-w-sm shadow-2xl bg-base-100"
>
<div className="card-body">
<div className="form-control">
<label className="label">
<span className="label-text">Project Id</span>
</label>
<input
type="text"
placeholder="project id"
className="input input-bordered"
{...register("projectId", { required: true })}
/>
</div>
<div className="form-control">
<label className="label">
<span className="label-text">Access Token</span>
</label>
<input
type="text"
placeholder="access token"
className="input input-bordered"
{...register("accessToken", { required: true })}
/>
<label className="label">
<a
href="https://app.supabase.com/account/tokens"
className="label-text-alt link link-hover"
target="_blank"
>
How to get Access Token?
</a>
</label>
</div>
<div className="form-control mt-6">
<button type="submit" className="btn btn-primary">
Open Editor
</button>
</div>
</div>
</form>
</div>
</div>
<div className="absolute top-4 right-4 hidden sm:block">
<GitHubButton
type="stargazers"
namespace="hmmhmmhm"
repo="rls-ts"
/>
</div>
<ToastContainer />
</main>
);
}