crud ui start

UserForm.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+
+import { Stack } from '@chakra-ui/react';
+import {
+  isEmail,
+  isMaxLength,
+  isMinLength,
+  isPattern,
+} from '@formiz/validations';
+import { useTranslation } from 'react-i18next';
+
+import { FieldCheckboxes } from '@/components/FieldCheckboxes';
+import { FieldInput } from '@/components/FieldInput';
+import { FieldSelect } from '@/components/FieldSelect';
+import { AVAILABLE_LANGUAGES, DEFAULT_LANGUAGE_KEY } from '@/constants/i18n';
+
+const AUTHORITIES = {
+  ADMIN: 'ROLE_ADMIN',
+  USER: 'ROLE_USER',
+};
+
+export const UserForm = () => {
+  const { t } = useTranslation(['common', 'users']);
+
+  const authorities = Object.values(AUTHORITIES).map((value) => ({ value }));
+  return (
+    <Stack
+      direction="column"
+      borderRadius="lg"
+      spacing="6"
+      shadow="md"
+      bg="white"
+      _dark={{ bg: 'gray.900' }}
+      p="6"
+    >
+      <FieldInput
+        name="login"
+        label={t('users:data.login.label')}
+        required={t('users:data.login.required') as string}
+        validations={[
+          {
+            rule: isMinLength(2),
+            message: t('users:data.login.tooShort', { min: 2 }),
+          },
+          {
+            rule: isMaxLength(50),
+            message: t('users:data.login.tooLong', { max: 50 }),
+          },
+          {
+            rule: isPattern(
+              '^[a-zA-Z0-9!$&*+=?^_`{|}~.-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$|^[_.@A-Za-z0-9-]+$'
+            ),
+            message: t('users:data.login.invalid'),
+          },
+        ]}
+      />
+      <Stack direction={{ base: 'column', sm: 'row' }} spacing="6">
+        <FieldInput name="firstName" label={t('users:data.firstname.label')} />
+        <FieldInput name="lastName" label={t('users:data.lastname.label')} />
+      </Stack>
+      <FieldInput
+        name="email"
+        label={t('users:data.email.label')}
+        required={t('users:data.email.required') as string}
+        validations={[
+          {
+            rule: isMinLength(5),
+            message: t('users:data.email.tooShort', { min: 5 }),
+          },
+          {
+            rule: isMaxLength(254),
+            message: t('users:data.email.tooLong', { min: 254 }),
+          },
+          {
+            rule: isEmail(),
+            message: t('users:data.email.invalid'),
+          },
+        ]}
+      />
+      <FieldSelect
+        name="langKey"
+        label={t('users:data.language.label')}
+        options={AVAILABLE_LANGUAGES.map(({ key }) => ({
+          label: t(`common:languages.${key}`),
+          value: key,
+        }))}
+        defaultValue={DEFAULT_LANGUAGE_KEY}
+      />
+      <FieldCheckboxes
+        name="authorities"
+        label={t('users:data.authorities.label')}
+        options={authorities}
+        required={t('users:data.authorities.required') as string}
+      />
+    </Stack>
+  );
+};

functions/src/index.ts

@@ -1,13 +1,13 @@
-import * as functions from 'firebase-functions';
-import express, { Request, Response } from 'express';
-import cors from 'cors';
-import { Client } from '@hubspot/api-client';
+import {Client} from "@hubspot/api-client";
+import cors from "cors";
+import express, {Request, Response} from "express";
+import * as functions from "firebase-functions";
 
-const TOKEN = 'pat-eu1-cf82e317-f47b-4cf7-b305-be8371c973cf';
+const TOKEN = "pat-eu1-cf82e317-f47b-4cf7-b305-be8371c973cf";
 
 const app = express();
 
-app.use(cors({ origin: true }));
+app.use(cors({origin: true}));
 
 // Start writing Firebase Functions
 // https://firebase.google.com/docs/functions/typescript
@@ -21,22 +21,33 @@ app.use(cors({ origin: true }));
 // functions.logger.info("Hello logs!", {structuredData: true});
 // response.send("Hello from Firebase!");
 // }
-app.get('/', async (request: Request, response: Response) => {
-  const LIMIT = 'limit=100';
-  const ASSOCIATIONS = 'associations=contacts';
-  const PROPERTIES = 'properties=hs_meeting_title,hs_meeting_start_time,hs_meeting_outcome,hs_internal_meeting_notes';
-  const hubspotClient = new Client({ accessToken: TOKEN });
+app.get("/", async (request: Request, response: Response) => {
+  const LIMIT = "limit=100";
+  const ASSOCIATIONS = "associations=contacts";
+  const PROPERTIES = "properties=hs_meeting_title,hs_meeting_start_time,hs_meeting_outcome,hs_internal_meeting_notes";
+  const hubspotClient = new Client({accessToken: TOKEN});
   const contacts = await hubspotClient.crm.contacts.getAll();
   const meetings = await hubspotClient
-    .apiRequest({
-      method: 'get',
-      path: `/crm/v3/objects/meetings?${LIMIT}&${ASSOCIATIONS}&${PROPERTIES}`,
-    })
-    .then((data) => data.json());
-  // functions.logger.info("Hello logs!", {structuredData: true});
-  // response.send("Hello from Fireba);
-  // send meetings and contacts as json
-  response.send({ meetings: meetings.results, contacts });
+      .apiRequest({
+        method: "get",
+        path: `/crm/v3/objects/meetings?${LIMIT}&${ASSOCIATIONS}&${PROPERTIES}`,
+      })
+      .then((data) => data.json());
+  return response.send({meetings: meetings.results, contacts});
+});
+
+app.delete("/:id", async (request: Request, response: Response) => {
+  const hubspotClient = new Client({accessToken: TOKEN});
+  if (!request.params.id) {
+    return response.status(400).send({error: "No id provided"});
+  }
+  const ids = request.params.id.split(",");
+  const data = await Promise.all(
+      ids.map((id: string) =>
+        hubspotClient.apiRequest({method: "delete", path: `/crm/v3/objects/meetings/${id}`}).then((data) => data.status)
+      )
+  );
+  return response.send({statuses: data});
 });
 
 exports.meetings = functions.https.onRequest(app);

package.json

@@ -7,6 +7,8 @@
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@fontsource/inter": "^4.5.15",
+    "@formiz/core": "^1.8.1",
+    "@formiz/validations": "^1.0.0",
     "@formkit/auto-animate": "^1.0.0-beta.6",
     "@lukemorales/query-key-factory": "^1.2.0",
     "@tanstack/react-query": "^4.29.5",

src/components/Toast/index.ts

@@ -0,0 +1,33 @@
+import { UseToastOptions, useToast } from '@chakra-ui/react';
+
+export const toastDefaultConfig: UseToastOptions = {
+  duration: 3000,
+  isClosable: true,
+  position: 'top-right',
+  variant: 'solid',
+};
+
+export const useToastError = () =>
+  useToast({
+    ...toastDefaultConfig,
+    status: 'error',
+    duration: 5000,
+  });
+
+export const useToastWarning = () =>
+  useToast({
+    ...toastDefaultConfig,
+    status: 'warning',
+  });
+
+export const useToastSuccess = () =>
+  useToast({
+    ...toastDefaultConfig,
+    status: 'success',
+  });
+
+export const useToastInfo = () =>
+  useToast({
+    ...toastDefaultConfig,
+    status: 'info',
+  });

src/containers/MeetingCreateView/MeetingCreateView.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+
+import { Button, ButtonGroup, Heading } from '@chakra-ui/react';
+import { Formiz, useForm } from '@formiz/core';
+import { useNavigate } from 'react-router-dom';
+
+import { useToastError, useToastSuccess } from '../../components/Toast';
+// import { UserForm } from '@/spa/admin/users/UserForm';
+// import { useUserCreate } from '@/spa/admin/users/users.service';
+import { Page, PageBottomBar, PageContent, PageTopBar } from '../Page/Page';
+
+export const MeetingCreateView = () => {
+  const navigate = useNavigate();
+  const form = useForm({ subscribe: false });
+
+  const toastError = useToastError();
+  const toastSuccess = useToastSuccess();
+
+  // const createUser = useUserCreate({
+  // onError: (error) => {
+  // if (error.response) {
+  // const { title, errorKey } = error.response.data;
+  // toastError({
+  // title: t('users:create.feedbacks.updateError.title'),
+  // description: title,
+  // });
+  // switch (errorKey) {
+  // case 'userexists':
+  // form.invalidateFields({
+  // login: t('users:data.login.alreadyUsed'),
+  // });
+  // break;
+  // case 'emailexists':
+  // form.invalidateFields({
+  // email: t('users:data.email.alreadyUsed'),
+  // });
+  // break;
+  // }
+  // }
+  // },
+  // onSuccess: () => {
+  // toastSuccess({
+  // title: t('users:create.feedbacks.updateSuccess.title'),
+  // });
+  // navigate('/admin/users');
+  // },
+  // });
+
+  // const submitCreateUser = async (values: TODO) => {
+  // const newUser = {
+  // ...values,
+  // };
+  // await createUser.mutate(newUser);
+  // };
+
+  return (
+    <Page containerSize="md" isFocusMode>
+      <Formiz
+        id="create-user-form"
+        onValidSubmit={() => {
+          console.log('ok');
+        }}
+        connect={form}
+      >
+        <form noValidate onSubmit={form.submit}>
+          <PageTopBar showBack onBack={() => navigate(-1)}>
+            <Heading size="md">New Meeting</Heading>
+          </PageTopBar>
+          <PageContent>{/* <UserForm /> */}</PageContent>
+          <PageBottomBar>
+            <ButtonGroup justifyContent="space-between">
+              <Button onClick={() => navigate(-1)}>Cancel</Button>
+              <Button type="submit" variant="@primary" isLoading={false}>
+                Save
+              </Button>
+            </ButtonGroup>
+          </PageBottomBar>
+        </form>
+      </Formiz>
+    </Page>
+  );
+};
+
+export default MeetingCreateView;