👔(app-impress) add is_public switch button
Add a switch button to the create pad form to allow the user to set the pad as public or private.
This commit is contained in:
@@ -361,6 +361,7 @@ const config = {
|
||||
'forms-switch': {
|
||||
'handle-border-radius': '2px',
|
||||
'rail-border-radius': '4px',
|
||||
'accent-color': 'var(--c--theme--colors--primary-text)',
|
||||
},
|
||||
'forms-textarea': {
|
||||
'border-radius': '0',
|
||||
|
||||
@@ -486,6 +486,9 @@
|
||||
);
|
||||
--c--components--forms-switch--handle-border-radius: 2px;
|
||||
--c--components--forms-switch--rail-border-radius: 4px;
|
||||
--c--components--forms-switch--accent-color: var(
|
||||
--c--theme--colors--primary-text
|
||||
);
|
||||
--c--components--forms-textarea--border-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -487,6 +487,7 @@ export const tokens = {
|
||||
'forms-switch': {
|
||||
'handle-border-radius': '2px',
|
||||
'rail-border-radius': '4px',
|
||||
'accent-color': 'var(--c--theme--colors--primary-text)',
|
||||
},
|
||||
'forms-textarea': { 'border-radius': '0' },
|
||||
},
|
||||
|
||||
@@ -1,18 +1,22 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
|
||||
import { APIError, errorCauses, fetchAPI } from '@/api';
|
||||
import { KEY_LIST_PAD } from '@/features/pads';
|
||||
import { KEY_LIST_PAD, Pad } from '@/features/pads';
|
||||
|
||||
type CreatePadResponse = {
|
||||
id: string;
|
||||
type CreatePadParam = {
|
||||
title: string;
|
||||
is_public: boolean;
|
||||
};
|
||||
|
||||
export const createPad = async (title: string): Promise<CreatePadResponse> => {
|
||||
export const createPad = async ({
|
||||
title,
|
||||
is_public,
|
||||
}: CreatePadParam): Promise<Pad> => {
|
||||
const response = await fetchAPI(`documents/`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
title,
|
||||
is_public,
|
||||
}),
|
||||
});
|
||||
|
||||
@@ -20,16 +24,16 @@ export const createPad = async (title: string): Promise<CreatePadResponse> => {
|
||||
throw new APIError('Failed to create the pad', await errorCauses(response));
|
||||
}
|
||||
|
||||
return response.json() as Promise<CreatePadResponse>;
|
||||
return response.json() as Promise<Pad>;
|
||||
};
|
||||
|
||||
interface CreatePadProps {
|
||||
onSuccess: (data: CreatePadResponse) => void;
|
||||
onSuccess: (data: Pad) => void;
|
||||
}
|
||||
|
||||
export function useCreatePad({ onSuccess }: CreatePadProps) {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation<CreatePadResponse, APIError, string>({
|
||||
return useMutation<Pad, APIError, CreatePadParam>({
|
||||
mutationFn: createPad,
|
||||
onSuccess: (data) => {
|
||||
void queryClient.invalidateQueries({
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Button } from '@openfun/cunningham-react';
|
||||
import { Button, Switch } from '@openfun/cunningham-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
@@ -52,12 +52,16 @@ export const CardCreatePad = () => {
|
||||
label={t('Pad name')}
|
||||
{...{ error, isError, isPending, setPadName }}
|
||||
/>
|
||||
<Switch label={t('Is it public ?')} labelSide="right" />
|
||||
</Box>
|
||||
<Box $justify="space-between" $direction="row" $align="center">
|
||||
<StyledLink href="/">
|
||||
<Button color="secondary">{t('Cancel')}</Button>
|
||||
</StyledLink>
|
||||
<Button onClick={() => createPad(padName)} disabled={!padName}>
|
||||
<Button
|
||||
onClick={() => createPad({ title: padName, is_public: true })}
|
||||
disabled={!padName}
|
||||
>
|
||||
{t('Create the pad')}
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
@@ -1,20 +1,22 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
|
||||
import { APIError, errorCauses, fetchAPI } from '@/api';
|
||||
import { KEY_LIST_TEMPLATE } from '@/features/templates';
|
||||
import { KEY_LIST_TEMPLATE, Template } from '@/features/templates';
|
||||
|
||||
type CreateTemplateResponse = {
|
||||
id: string;
|
||||
type CreateTemplateParam = {
|
||||
title: string;
|
||||
is_public: boolean;
|
||||
};
|
||||
|
||||
export const createTemplate = async (
|
||||
title: string,
|
||||
): Promise<CreateTemplateResponse> => {
|
||||
export const createTemplate = async ({
|
||||
title,
|
||||
is_public,
|
||||
}: CreateTemplateParam): Promise<Template> => {
|
||||
const response = await fetchAPI(`templates/`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
title,
|
||||
is_public,
|
||||
}),
|
||||
});
|
||||
|
||||
@@ -25,16 +27,16 @@ export const createTemplate = async (
|
||||
);
|
||||
}
|
||||
|
||||
return response.json() as Promise<CreateTemplateResponse>;
|
||||
return response.json() as Promise<Template>;
|
||||
};
|
||||
|
||||
interface CreateTemplateProps {
|
||||
onSuccess: (data: CreateTemplateResponse) => void;
|
||||
onSuccess: (data: Template) => void;
|
||||
}
|
||||
|
||||
export function useCreateTemplate({ onSuccess }: CreateTemplateProps) {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation<CreateTemplateResponse, APIError, string>({
|
||||
return useMutation<Template, APIError, CreateTemplateParam>({
|
||||
mutationFn: createTemplate,
|
||||
onSuccess: (data) => {
|
||||
void queryClient.invalidateQueries({
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Button } from '@openfun/cunningham-react';
|
||||
import { Button, Switch } from '@openfun/cunningham-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
@@ -52,13 +52,16 @@ export const CardCreateTemplate = () => {
|
||||
label={t('Template name')}
|
||||
{...{ error, isError, isPending, setTemplateName }}
|
||||
/>
|
||||
<Switch label={t('Is it public ?')} labelSide="right" />
|
||||
</Box>
|
||||
<Box $justify="space-between" $direction="row" $align="center">
|
||||
<StyledLink href="/">
|
||||
<Button color="secondary">{t('Cancel')}</Button>
|
||||
</StyledLink>
|
||||
<Button
|
||||
onClick={() => createTemplate(templateName)}
|
||||
onClick={() =>
|
||||
createTemplate({ title: templateName, is_public: true })
|
||||
}
|
||||
disabled={!templateName}
|
||||
>
|
||||
{t('Create the template')}
|
||||
|
||||
Reference in New Issue
Block a user