rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: migrate org settings to server components

Browse source
This commit is contained in:
swve 2023-06-15 19:39:18 +02:00
parent 1bab95b15a
commit 23d5a80966
4 changed files with 156 additions and 117 deletions
Download patch file Download diff file Expand all files Collapse all files

101
front/app/orgs/[orgslug]/settings/organization/general/organization.tsx Normal file
View file

@ -0,0 +1,101 @@
"use client";
import React from 'react'
import { Field, Form, Formik } from 'formik';
import { updateOrganization } from '@services/settings/org';
interface OrganizationValues {
name: string;
description: string;
slug: string;
email: string;
}
function OrganizationClient(props: any) {
const org = props.org;
let orgValues: OrganizationValues = {
name: org.name,
description: org.description,
slug: org.slug,
email: org.email
}
const updateOrg = async (values: OrganizationValues) => {
let org_id = org.org_id;
await updateOrganization(org_id, values);
}
return (
<div>
<h1 className='text-3xl font-bold'>Organization Settings</h1>
<br /><br />
<Formik
initialValues={orgValues}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
updateOrg(values)
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<label className="block mb-2 font-bold" htmlFor="name">
Name
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="text"
name="name"
/>
<label className="block mb-2 font-bold" htmlFor="description">
Description
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="text"
name="description"
/>
<label className="block mb-2 font-bold" htmlFor="slug">
Slug
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg bg-gray-200 cursor-not-allowed"
disabled
type="text"
name="slug"
/>
<label className="block mb-2 font-bold" htmlFor="email">
Email
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="email"
name="email"
/>
<button
type="submit"
disabled={isSubmitting}
className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-black"
>
Submit
</button>
</Form>
)}
</Formik>
</div>
)
}
export default OrganizationClient

132
front/app/orgs/[orgslug]/settings/organization/general/page.tsx
View file

@ -1,115 +1,33 @@
"use client";
import React from 'react'
import useSWR, { mutate } from "swr";
import { swrFetcher } from "@services/utils/ts/requests";
import { getAPIUrl } from '@services/config/config';
import { Field, Form, Formik } from 'formik';
import { updateOrganization } from '@services/settings/org';
import { getOrganizationContextInfo } from '@services/organizations/orgs';
import { Metadata } from 'next';
import OrganizationClient from './organization';
interface OrganizationValues {
name: string;
description: string;
slug: string;
email: string;
type MetadataProps = {
params: { orgslug: string };
searchParams: { [key: string]: string | string[] | undefined };
};
export async function generateMetadata(
{ params }: MetadataProps,
): Promise<Metadata> {
// Get Org context information
const org = await getOrganizationContextInfo(params.orgslug, { revalidate: 1800, tags: ['organizations'] });
return {
title: `Settings: General — ${org.name}`,
description: org.description,
};
}
function SettingsOrganizationGeneral(params: any) {
async function SettingsOrganizationGeneral(params: any) {
const orgslug = params.params.orgslug;
const { data: org, error: error } = useSWR(`${getAPIUrl()}orgs/slug/${orgslug}`, swrFetcher);
const org = await getOrganizationContextInfo(orgslug, { revalidate: 1800, tags: ['organizations'] });
if (org) {
let orgValues: OrganizationValues = {
name: org.name,
description: org.description,
slug: org.slug,
email: org.email
}
const updateOrg = async (values: OrganizationValues) => {
let org_id = org.org_id;
await updateOrganization(org_id, values);
// Sounds good, doesn't work
// TODO: Fix this
mutate(`${getAPIUrl()}orgs/slug/${values.slug}`);
}
return (
<div>
<h1 className='text-3xl font-bold'>Oganization Settings</h1>
<br /><br />
{error && <p>Failed to load</p>}
{!org ? (
<div>Loading...</div>
) : (
<Formik
initialValues={orgValues}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
updateOrg(values)
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<label className="block mb-2 font-bold" htmlFor="name">
Name
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="text"
name="name"
/>
<label className="block mb-2 font-bold" htmlFor="description">
Description
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="text"
name="description"
/>
<label className="block mb-2 font-bold" htmlFor="slug">
Slug
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg bg-gray-200 cursor-not-allowed"
disabled
type="text"
name="slug"
/>
<label className="block mb-2 font-bold" htmlFor="email">
Email
</label>
<Field
className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
type="email"
name="email"
/>
<button
type="submit"
disabled={isSubmitting}
className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-black"
>
Submit
</button>
</Form>
)}
</Formik>
)}
</div>
)
}
return (
<>
<OrganizationClient org={org} />
</>
)
}
export default SettingsOrganizationGeneral

21
front/app/orgs/[orgslug]/settings/page.tsx
View file

@ -1,4 +1,23 @@
import React from 'react'
import { getOrganizationContextInfo } from "@services/organizations/orgs";
import { Metadata, ResolvingMetadata } from 'next';
type MetadataProps = {
params: { orgslug: string };
searchParams: { [key: string]: string | string[] | undefined };
};
export async function generateMetadata(
{ params }: MetadataProps,
): Promise<Metadata> {
// Get Org context information
const org = await getOrganizationContextInfo(params.orgslug, { revalidate: 1800, tags: ['organizations'] });
return {
title: `Settings — ${org.name}`,
description: org.description,
};
}
function Settings() {
return (