Added frontend Input Field Validations on the EventForm.tsx and Enabl…

…ed validations in app.ts (#707)

* Added frontend Input Field Validations on the EventForm
1. Added type to input component in the Event form page
2. removed the DefaultValue prop from input component since it is already
  getting set via UseForm react hook
3. changed the type of UrL and Video URL to url

* Updated cypress tests of Event form for changes in type
1. Updated cypress tests to match the role of type=number of Capacity
2. Changed the query for start_at and ends_at

* Added class Validation decorators for Url and Vidio URL fields

1. Added decorators for URL and Video URL fields
2. Enabled Validations in app.ts

* Updated cypress tests
1.Added Get instaed of find to query starts_at and ends_at
2.Added 5 sec wait time for event to save

* Updated app.ts and event.js based on code review comments

1. removed validate:tru from app.ts as it is default value
2. changed the location function from get to findbyLabelText in cypress
   test

Co-authored-by: Ravi <Ravichandra.cheekati@oracle.com>

client/src/modules/dashboard/Events/components/EventForm.tsx

@@ -27,15 +27,21 @@ const EventForm: React.FC<EventFormProps> = (props) => {
  } = useVenuesQuery();
 
  const defaultValues = useMemo(() => {
- if (!data) return {};
+ if (!data)
+ return {
+ start_at: new Date().toISOString().slice(0, 16),
+ ends_at: new Date(Date.now() + 1000 * 60 * 60)
+ .toISOString()
+ .slice(0, 16),
+ };
  return {
  name: data.name,
  description: data.description,
  url: data.url,
  video_url: data.video_url,
  capacity: data.capacity,
- start_at: data.start_at,
- ends_at: data.ends_at,
+ start_at: new Date(data.start_at).toISOString().slice(0, 16),
+ ends_at: new Date(data.ends_at).toISOString().slice(0, 16),
  tags: (data.tags || []).map((t) => t.name).join(', '),
  venueId: data.venueId,
  };
@@ -66,11 +72,11 @@ const EventForm: React.FC<EventFormProps> = (props) => {
  ) : (
  <Input
  key={field.key}
+ type={field.type}
  label={field.label}
  placeholder={field.placeholder}
  isRequired
  {...register(field.key)}
- defaultValue={formatValue(field, data)}
  />
  ),
  )}

client/src/modules/dashboard/Events/components/EventFormUtils.ts

@@ -23,13 +23,13 @@ export const fields: Field[] = [
  },
  {
  key: 'url',
- type: 'text',
+ type: 'url',
  label: 'Url',
  placeholder: '',
  },
  {
  key: 'video_url',
- type: 'text',
+ type: 'url',
  label: 'Video Url',
  placeholder: '',
  },

cypress/integration/dashboard/events.js

@@ -38,14 +38,14 @@ describe('events dashboard', () => {
  cy.findByRole('textbox', { name: 'Description' }).type(fix.description);
  cy.findByRole('textbox', { name: 'Url' }).type(fix.url);
  cy.findByRole('textbox', { name: 'Video Url' }).type(fix.videoUrl);
- cy.findByRole('textbox', { name: 'Capacity' }).type(fix.capacity);
+ cy.findByRole('spinbutton', { name: 'Capacity' }).type(fix.capacity);
  cy.findByRole('textbox', { name: 'Tags (separated by a comma)' }).type(
  'Test, Event, Tag',
  );
- // TODO: it shouldn't be necessary to clear the date textboxes - the page needs to
- // be fixed
- cy.findByRole('textbox', { name: 'Start at' }).clear().type(fix.startAt);
- cy.findByRole('textbox', { name: 'End at' }).clear().type(fix.endAt);
+
+ cy.findByLabelText(/^Start at/).type(fix.startAt);
+
+ cy.findByLabelText(/^End at/).type(fix.endAt);
  // TODO: figure out why cypress thinks this is covered.
  // cy.findByRole('checkbox', { name: 'Invite only' }).click();
  cy.get('[data-cy="invite-only-checkbox"]').click();
@@ -60,6 +60,7 @@ describe('events dashboard', () => {
  .as('venueTitle');
 
  cy.findByRole('form', { name: 'Add event' }).submit();
+
  cy.location('pathname').should('match', /^\/dashboard\/events\/\d/);
  // confirm that the test data appears in the new event
  cy.wrap(Object.entries(fix)).each(([key, value]) => {

server/src/app.ts

@@ -26,7 +26,7 @@ export const main = async (app: Express) => {
  app.use(cors({ credentials: true, origin: true }));
  app.use(userMiddleware);
 
- const schema = await buildSchema({ resolvers, validate: false });
+ const schema = await buildSchema({ resolvers });
  const server = new ApolloServer({
  schema,
  context: ({ req, res }: { req: Request; res: Response }): GQLCtx => ({

server/src/controllers/Events/inputs.ts

@@ -1,3 +1,4 @@
+import { IsUrl } from 'class-validator';
 import { InputType, Field, Int } from 'type-graphql';
 import { VenueType } from 'src/models';
 
@@ -10,9 +11,11 @@ export class CreateEventInputs {
  description: string;
 
  @Field(() => String, { nullable: true })
+ @IsUrl()
  url?: string;
 
  @Field(() => String, { nullable: true })
+ @IsUrl()
  video_url?: string;
 
  @Field(() => VenueType, { nullable: true })
@@ -46,9 +49,11 @@ export class UpdateEventInputs {
  description: string;
 
  @Field(() => String, { nullable: true })
+ @IsUrl()
  url?: string;
 
  @Field(() => String, { nullable: true })
+ @IsUrl()
  video_url?: string;
 
  @Field(() => VenueType, { nullable: true })