Skip to content

Commit

Permalink
Merge pull request #12 from adrianfocke/fix/AM-25/client-actions-for-…
Browse files Browse the repository at this point in the history
…user-actions

Add filename validation hint
  • Loading branch information
adrianfocke authored Aug 24, 2024
2 parents fd97e75 + efd1d71 commit 3caafe1
Show file tree
Hide file tree
Showing 6 changed files with 59 additions and 19 deletions.
21 changes: 13 additions & 8 deletions components/Card/NewFileCard.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
'use client';
import { LETTERS_NUMBERS_HYPEN_BLANK_REGEX } from '@/utils/constants';
import client from '@/tina/__generated__/client';
import { createFile } from '@/tina/queries';
import { CHARACTERS_REGEX, CHARACTERS_REGEX_HINT } from '@/utils/constants';
import { sanitizeFilenameForURL } from '@/utils/sanitize';
import { AccessibleIcon } from '@radix-ui/react-accessible-icon';
import * as Form from '@radix-ui/react-form';
import { FilePlusIcon } from '@radix-ui/react-icons';
Expand All @@ -17,7 +20,13 @@ export default () => {
</Flex>
<Form.Root
onSubmit={async (event) => {
event.stopPropagation();
event.preventDefault();

const newFilename = Object.fromEntries(
new FormData(event.currentTarget)
).name as string;

createFile(newFilename);
}}
>
<Form.Field name='name'>
Expand All @@ -32,13 +41,9 @@ export default () => {
/>
</Form.Control>
<Form.Message
match={(value) => {
return LETTERS_NUMBERS_HYPEN_BLANK_REGEX.test(value)
? false
: true;
}}
match={(value) => (CHARACTERS_REGEX.test(value) ? false : true)}
>
<p className='mb-2'>Letters, numbers, hyphen and blanks only!</p>
<p className='mb-2'>{CHARACTERS_REGEX_HINT}</p>
</Form.Message>
</Form.Field>
<Form.Submit asChild>
Expand Down
24 changes: 15 additions & 9 deletions tina/collections/files.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import type { Collection } from 'tinacms';
import { CHARACTERS_REGEX, CHARACTERS_REGEX_HINT } from '../../utils/constants';
import { sanitizeFilenameForURL } from '../../utils/sanitize';

export default {
name: 'file',
Expand All @@ -12,15 +14,8 @@ export default {
filename: {
readonly: true,
slugify: (values) => {
const title = values?.name || 'untitled';
// Replace umlauts and other special characters
const sanitizedTitle = title
.normalize('NFD')
.replace(/[\u0300-\u036f]/g, '') // Remove diacritics
.replace(/[^a-zA-Z0-9 ]/g, '') // Remove special characters
.replace(/ /g, '-')
.toLowerCase();
return sanitizedTitle;
const filename = values?.name || 'untitled';
return sanitizeFilenameForURL(filename);
},
},
},
Expand All @@ -30,6 +25,17 @@ export default {
label: 'Name',
type: 'string',
required: true,
ui: {
validate: (value) => {
if (!value) {
return 'Value must be defined';
}

if (!CHARACTERS_REGEX.test(value)) {
return CHARACTERS_REGEX_HINT;
}
},
},
},
{
name: 'entity',
Expand Down
18 changes: 18 additions & 0 deletions tina/queries/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { sanitizeFilenameForURL } from '@/utils/sanitize';
import client from '../__generated__/client';

export const createFile = async (filename: string) => {
try {
const newFile = await client.queries.createFile({
relativePath: `/${sanitizeFilenameForURL(filename)}.mdx`,
params: {
file: {
name: filename,
},
},
});
console.info('New file: ', newFile);
} catch (error) {
console.error('New file error: ', error, client);
}
};
2 changes: 1 addition & 1 deletion tina/tina-lock.json

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion utils/constants.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
/** Regex for placeholder {{field_STRING-OR-NUMBER_STRING-OR-NUMBER_...}} */
export const PLACEHOLDER_REGEX = /{{field_[a-zA-Z0-9]+(?:_[a-zA-Z0-9]+)*}}/g;
export const LETTERS_NUMBERS_HYPEN_BLANK_REGEX = /^[a-zA-Z0-9-\s]+$/;
/** Regex for letters, numbers, umlaute, blank and hyphen */
export const CHARACTERS_REGEX = /^[A-Za-z0-9äöüÄÖÜß\- ]+$/;
export const CHARACTERS_REGEX_HINT =
'Allowed values: letters, numbers, umlaute, blank and hyphen';

export const TIMES = [
'06:30',
Expand Down
8 changes: 8 additions & 0 deletions utils/sanitize.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export const sanitizeFilenameForURL = (filename: string) =>
filename
.toLowerCase()
.replaceAll('ä', 'ae')
.replaceAll('ö', 'oe')
.replaceAll('ü', 'ue')
.replaceAll('ß', 'ss')
.replaceAll(' ', '-');

0 comments on commit 3caafe1

Please sign in to comment.