wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-07-03 17:10:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #771 from notmd/react-hook-form

Browse Source 
migrate `formik` to `react-hook-form`
This commit is contained in:
Keith Stevens
2023-01-16 21:21:12 +09:00
committed by GitHub
parent 7f562fbbae e464fcbbb2
commit 922b422d82
5 changed files with 100 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/package-lock.json
Generated
+26 -95
View File
@@ -29,7 +29,6 @@
"eslint-config-next": "13.0.6",
"eslint-plugin-simple-import-sort": "^8.0.0",
"focus-visible": "^5.2.0",
"formik": "^2.2.9",
"framer-motion": "^6.5.1",
"install": "^0.13.0",
"next": "13.0.6",
@@ -40,6 +39,7 @@
"react": "18.2.0",
"react-dom": "18.2.0",
"react-feature-flags": "^1.0.0",
"react-hook-form": "^7.42.1",
"react-icons": "^4.7.1",
"react-table": "^7.8.0",
"sharp": "^0.31.3",
@@ -20304,47 +20304,6 @@
"node": ">= 6"
}
},
"node_modules/formik": {
"version": "2.2.9",
"resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
"integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
"funding": [
{
"type": "individual",
"url": "https://opencollective.com/formik"
}
],
"dependencies": {
"deepmerge": "^2.1.1",
"hoist-non-react-statics": "^3.3.0",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"react-fast-compare": "^2.0.1",
"tiny-warning": "^1.0.2",
"tslib": "^1.10.0"
},
"peerDependencies": {
"react": ">=16.8.0"
}
},
"node_modules/formik/node_modules/deepmerge": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
"integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/formik/node_modules/react-fast-compare": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
},
"node_modules/formik/node_modules/tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
},
"node_modules/forwarded": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -26443,12 +26402,8 @@
"node_modules/lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"node_modules/lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
},
"node_modules/lodash.debounce": {
"version": "4.0.8",
@@ -32527,6 +32482,21 @@
"node": ">=10"
}
},
"node_modules/react-hook-form": {
"version": "7.42.1",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.42.1.tgz",
"integrity": "sha512-2UIGqwMZksd5HS55crTT1ATLTr0rAI4jS7yVuqTaoRVDhY2Qc4IyjskCmpnmdYqUNOYFy04vW253tb2JRVh+IQ==",
"engines": {
"node": ">=12.22.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/react-hook-form"
},
"peerDependencies": {
"react": "^16.8.0 || ^17 || ^18"
}
},
"node_modules/react-icons": {
"version": "4.7.1",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
@@ -35486,11 +35456,6 @@
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
"integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
},
"node_modules/tiny-warning": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
},
"node_modules/tmp": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
@@ -52929,37 +52894,6 @@
"mime-types": "^2.1.12"
}
},
"formik": {
"version": "2.2.9",
"resolved": "https://registry.npmjs.org/formik/-/formik-2.2.9.tgz",
"integrity": "sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA==",
"requires": {
"deepmerge": "^2.1.1",
"hoist-non-react-statics": "^3.3.0",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"react-fast-compare": "^2.0.1",
"tiny-warning": "^1.0.2",
"tslib": "^1.10.0"
},
"dependencies": {
"deepmerge": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
"integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
},
"react-fast-compare": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
},
"tslib": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
}
}
},
"forwarded": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -57574,12 +57508,8 @@
"lodash": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"lodash-es": {
"version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
},
"lodash.debounce": {
"version": "4.0.8",
@@ -61952,6 +61882,12 @@
}
}
},
"react-hook-form": {
"version": "7.42.1",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.42.1.tgz",
"integrity": "sha512-2UIGqwMZksd5HS55crTT1ATLTr0rAI4jS7yVuqTaoRVDhY2Qc4IyjskCmpnmdYqUNOYFy04vW253tb2JRVh+IQ==",
"requires": {}
},
"react-icons": {
"version": "4.7.1",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.7.1.tgz",
@@ -64265,11 +64201,6 @@
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
"integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
},
"tiny-warning": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
},
"tmp": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
website/package.json
+1 -1
View File
@@ -46,7 +46,6 @@
"eslint-config-next": "13.0.6",
"eslint-plugin-simple-import-sort": "^8.0.0",
"focus-visible": "^5.2.0",
"formik": "^2.2.9",
"framer-motion": "^6.5.1",
"install": "^0.13.0",
"next": "13.0.6",
@@ -57,6 +56,7 @@
"react": "18.2.0",
"react-dom": "18.2.0",
"react-feature-flags": "^1.0.0",
"react-hook-form": "^7.42.1",
"react-icons": "^4.7.1",
"react-table": "^7.8.0",
"sharp": "^0.31.3",
website/src/pages/admin/manage_user/[id].tsx
+44 -45
View File
@@ -1,18 +1,28 @@
import { Button, Container, FormControl, FormLabel, Input, Stack, useToast } from "@chakra-ui/react";
import { Field, Form, Formik } from "formik";
import { Button, Card, CardBody, Container, FormControl, FormLabel, Input, Stack, useToast } from "@chakra-ui/react";
import { InferGetServerSidePropsType } from "next";
import Head from "next/head";
import { useRouter } from "next/router";
import { useSession } from "next-auth/react";
import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { getAdminLayout } from "src/components/Layout";
import { RoleSelect } from "src/components/RoleSelect";
import { Role, RoleSelect } from "src/components/RoleSelect";
import { UserMessagesCell } from "src/components/UserMessagesCell";
import { post } from "src/lib/api";
import { oasstApiClient } from "src/lib/oasst_api_client";
import prisma from "src/lib/prismadb";
import useSWRMutation from "swr/mutation";
const ManageUser = ({ user }) => {
interface UserForm {
user_id: string;
id: string;
auth_method: string;
display_name: string;
role: Role;
notes: string;
}
const ManageUser = ({ user }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
const toast = useToast();
const router = useRouter();
const { data: session, status } = useSession();
@@ -52,6 +62,10 @@ const ManageUser = ({ user }) => {
},
});
const { register, handleSubmit } = useForm<UserForm>({
defaultValues: user,
});
return (
<>
<Head>
@@ -62,46 +76,31 @@ const ManageUser = ({ user }) => {
/>
</Head>
<Stack gap="4">
<Container className="oa-basic-theme">
<Formik
initialValues={user}
onSubmit={(values) => {
trigger(values);
}}
>
<Form>
<Field name="user_id" type="hidden" />
<Field name="id" type="hidden" />
<Field name="auth_method" type="hidden" />
<Field name="display_name">
{({ field }) => (
<FormControl>
<FormLabel>Display Name</FormLabel>
<Input {...field} isDisabled />
</FormControl>
)}
</Field>
<Field name="role">
{({ field }) => (
<FormControl>
<FormLabel>Role</FormLabel>
<RoleSelect {...field}></RoleSelect>
</FormControl>
)}
</Field>
<Field name="notes">
{({ field }) => (
<FormControl>
<FormLabel>Notes</FormLabel>
<Input {...field} />
</FormControl>
)}
</Field>
<Button mt={4} type="submit">
Update
</Button>
</Form>
</Formik>
<Container>
<Card>
<CardBody>
<form onSubmit={handleSubmit((data) => trigger(data))}>
<input type="hidden" {...register("user_id")}></input>
<input type="hidden" {...register("id")}></input>
<input type="hidden" {...register("auth_method")}></input>
<FormControl>
<FormLabel>Display Name</FormLabel>
<Input {...register("display_name")} isDisabled />
</FormControl>
<FormControl>
<FormLabel>Role</FormLabel>
<RoleSelect {...register("role")}></RoleSelect>
</FormControl>
<FormControl>
<FormLabel>Notes</FormLabel>
<Input {...register("notes")} />
</FormControl>
<Button mt={4} type="submit">
Update
</Button>
</form>
</CardBody>
</Card>
</Container>
<UserMessagesCell path={`/api/admin/user_messages?user=${user.user_id}`} />
</Stack>
@@ -122,7 +121,7 @@ export async function getServerSideProps({ query }) {
});
const user = {
...backend_user,
role: local_user?.role || "general",
role: (local_user?.role || "general") as Role,
};
return {
props: {
website/src/styles/Theme/components/Card.ts
+27
View File
@@ -0,0 +1,27 @@
import { cardAnatomy } from "@chakra-ui/anatomy";
import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(cardAnatomy.keys);
export const cardTheme = defineMultiStyleConfig({
baseStyle: definePartsStyle(({ colorMode }) => {
const isLightMode = colorMode === "light";
return {
container: {
backgroundColor: isLightMode ? "white" : "gray.700",
},
header: {},
body: {
padding: 6,
},
footer: {},
};
}),
variants: {
elevated: definePartsStyle({
container: {
borderRadius: "xl",
},
}),
},
});
website/src/styles/Theme/index.ts
+2
View File
@@ -2,6 +2,7 @@ import { type ThemeConfig, extendTheme } from "@chakra-ui/react";
import { Styles } from "@chakra-ui/theme-tools";
import { colors } from "./colors";
import { cardTheme } from "./components/Card";
import { containerTheme } from "./components/Container";
const config: ThemeConfig = {
@@ -12,6 +13,7 @@ const config: ThemeConfig = {
const components = {
Container: containerTheme,
Card: cardTheme,
};
const breakpoints = {