👔(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:
Anthony LC
2024-04-17 17:13:10 +02:00
committed by Anthony LC
parent 7463735a38
commit ef2ebf596a
7 changed files with 38 additions and 20 deletions

View File

@@ -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',

View File

@@ -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;
}

View File

@@ -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' },
},

View File

@@ -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({

View File

@@ -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>

View File

@@ -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({

View File

@@ -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')}