feat: add event images (#652)

* feat: add image event * chore: regenerate code * fix: show image source on event dashboard * test: fix events test Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
freeCodeCamp · Oct 8, 2021 · 537bdb6 · 537bdb6
1 parent b892d88
commit 537bdb6
Show file tree

Hide file tree

Showing 12 changed files with 96 additions and 1 deletion.
diff --git a/client/graphql.schema.json b/client/graphql.schema.json
@@ -509,6 +509,22 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "image_url",
+            "description": null,
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "defaultValue": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "invite_only",
             "description": null,
@@ -959,6 +975,22 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "image_url",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "invite_only",
             "description": null,
@@ -2978,6 +3010,18 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "image_url",
+            "description": null,
+            "type": {
+              "kind": "SCALAR",
+              "name": "String",
+              "ofType": null
+            },
+            "defaultValue": null,
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "invite_only",
             "description": null,

diff --git a/client/src/generated/graphql.tsx b/client/src/generated/graphql.tsx
@@ -61,6 +61,7 @@ export type CreateEventInputs = {
   chapterId: Scalars['Int'];
   description: Scalars['String'];
   ends_at: Scalars['DateTime'];
+  image_url: Scalars['String'];
   invite_only?: Maybe<Scalars['Boolean']>;
   name: Scalars['String'];
   start_at: Scalars['DateTime'];
@@ -99,6 +100,7 @@ export type Event = {
   description: Scalars['String'];
   ends_at: Scalars['DateTime'];
   id: Scalars['Int'];
+  image_url: Scalars['String'];
   invite_only: Scalars['Boolean'];
   name: Scalars['String'];
   rsvps: Array<Rsvp>;
@@ -329,6 +331,7 @@ export type UpdateEventInputs = {
   capacity?: Maybe<Scalars['Float']>;
   description?: Maybe<Scalars['String']>;
   ends_at?: Maybe<Scalars['DateTime']>;
+  image_url?: Maybe<Scalars['String']>;
   invite_only?: Maybe<Scalars['Boolean']>;
   name?: Maybe<Scalars['String']>;
   start_at?: Maybe<Scalars['DateTime']>;
@@ -625,6 +628,7 @@ export type EventQuery = {
         capacity: number;
         start_at: any;
         ends_at: any;
+        image_url: string;
         chapter: { __typename?: 'Chapter'; id: number; name: string };
         tags?:
           | Array<{ __typename?: 'Tag'; id: number; name: string }>
@@ -1486,6 +1490,7 @@ export const EventDocument = gql`
       capacity
       start_at
       ends_at
+      image_url
       chapter {
         id
         name

diff --git a/client/src/modules/dashboard/Events/components/EventFormUtils.ts b/client/src/modules/dashboard/Events/components/EventFormUtils.ts
@@ -21,6 +21,12 @@ export const fields: Field[] = [
     label: 'Description',
     placeholder: '',
   },
+  {
+    key: 'image_url',
+    type: 'text',
+    label: 'Event Image Url',
+    placeholder: 'https://www.example.image/url',
+  },
   {
     key: 'url',
     type: 'url',
@@ -65,6 +71,7 @@ export interface EventFormData {
   name: string;
   description: string;
   url?: string | null;
+  image_url: string;
   video_url?: string | null;
   capacity: number;
   tags: string;

diff --git a/client/src/modules/dashboard/Events/graphql/queries.ts b/client/src/modules/dashboard/Events/graphql/queries.ts
@@ -37,6 +37,7 @@ export const EVENT = gql`
       capacity
       start_at
       ends_at
+      image_url
       chapter {
         id
         name

diff --git a/client/src/modules/dashboard/Events/pages/EventPage.tsx b/client/src/modules/dashboard/Events/pages/EventPage.tsx
@@ -56,6 +56,12 @@ export const EventPage: NextPage = () => {
 
         {data.event.canceled && <Heading color="red.500">Canceled</Heading>}
         <Text>{data.event.description}</Text>
+        {data.event.image_url && (
+          <Text>
+            Event Image Url:{' '}
+            <a href={data.event.image_url}>{data.event.image_url}</a>
+          </Text>
+        )}
         {data.event.url && (
           <Text>
             Event Url: <a href={data.event.url}>{data.event.url}</a>

diff --git a/client/src/modules/events/pages/eventPage.tsx b/client/src/modules/events/pages/eventPage.tsx
@@ -2,6 +2,7 @@ import { LockIcon } from '@chakra-ui/icons';
 import {
   Heading,
   VStack,
+  Image,
   Text,
   Button,
   useToast,
@@ -114,6 +115,15 @@ export const EventPage: NextPage = () => {
         userIds={data?.event?.rsvps.map((r) => r.user.id) || []}
         modalProps={modalProps}
       />
+      <Image
+        data-cy="event-image"
+        boxSize="100%"
+        maxH="300px"
+        src={data.event.image_url}
+        alt=""
+        borderRadius="md"
+        objectFit="cover"
+      />
 
       <Heading as="h1">
         {data.event.invite_only && <LockIcon />}

diff --git a/cypress/integration/dashboard/events.js b/cypress/integration/dashboard/events.js
@@ -8,6 +8,7 @@ const testEvent = {
   startAt: '2022-01-01T00:01',
   endAt: '2022-01-02T00:02',
   venueId: '1',
+  imageUrl: 'https://test.event.org/image',
 };
 
 describe('events dashboard', () => {
@@ -72,6 +73,9 @@ describe('events dashboard', () => {
     cy.findByRole('textbox', { name: 'Description' }).type(
       testEvent.description,
     );
+    cy.findByRole('textbox', { name: 'Event Image Url' }).type(
+      testEvent.imageUrl,
+    );
     cy.findByRole('textbox', { name: 'Url' }).type(testEvent.url);
     cy.findByRole('textbox', { name: 'Video Url' }).type(testEvent.videoUrl);
     cy.findByRole('spinbutton', { name: 'Capacity' }).type(testEvent.capacity);

diff --git a/cypress/integration/events/[eventId].js b/cypress/integration/events/[eventId].js
@@ -17,6 +17,9 @@ describe('event page', () => {
       .next()
       .should('be.visible')
       .should('match', 'ul');
+    cy.get('[data-cy="event-image"]')
+      .should('be.visible')
+      .and('have.attr', 'alt', '');
   });
 
   it('ask the user to login before they can RSVP', () => {

diff --git a/server/db/generator/factories/events.factory.ts b/server/db/generator/factories/events.factory.ts
@@ -1,5 +1,5 @@
 import { addHours, add } from 'date-fns';
-import { company, internet, lorem } from 'faker';
+import { company, internet, lorem, image } from 'faker';
 import { random, randomEnum, randomItem, randomItems } from '../lib/random';
 import {
   Chapter,
@@ -45,6 +45,7 @@ const createEvents = async (
       start_at,
       ends_at: addHours(start_at, random(5)),
       user_roles: [],
+      image_url: image.imageUrl(640, 480, 'nature', true),
     });
 
     await event.save();

diff --git a/server/src/controllers/Events/inputs.ts b/server/src/controllers/Events/inputs.ts
@@ -38,6 +38,9 @@ export class CreateEventInputs {
 
   @Field(() => Boolean, { nullable: true })
   invite_only: boolean;
+
+  @Field(() => String)
+  image_url: string;
 }
 
 @InputType()
@@ -73,4 +76,7 @@ export class UpdateEventInputs {
 
   @Field(() => Boolean, { nullable: true })
   invite_only: boolean;
+
+  @Field(() => String, { nullable: true })
+  image_url: string;
 }
diff --git a/server/src/controllers/Events/resolver.ts b/server/src/controllers/Events/resolver.ts
@@ -233,6 +233,7 @@ ${unsubscribe}
     event.start_at = new Date(data.start_at) ?? event.start_at;
     event.ends_at = new Date(data.ends_at) ?? event.ends_at;
     event.capacity = data.capacity ?? event.capacity;
+    event.image_url = data.image_url ?? event.image_url;
 
     if (data.venueId) {
       const venue = await Venue.findOne(data.venueId);

diff --git a/server/src/models/Event.ts b/server/src/models/Event.ts
@@ -90,6 +90,10 @@ export class Event extends BaseModel {
   @OneToMany((_type) => UserEventRole, (UserEventRole) => UserEventRole.event)
   user_roles!: UserEventRole[];
 
+  @Field(() => String)
+  @Column({ nullable: false })
+  image_url!: string;
+
   constructor(params: {
     name: string;
     description: string;
@@ -104,6 +108,7 @@ export class Event extends BaseModel {
     chapter: Chapter;
     invite_only?: boolean;
     user_roles: UserEventRole[];
+    image_url: string;
   }) {
     super();
     if (params) {
@@ -121,6 +126,7 @@ export class Event extends BaseModel {
         chapter,
         invite_only,
         user_roles,
+        image_url,
       } = params;
 
       this.name = name;
@@ -136,6 +142,7 @@ export class Event extends BaseModel {
       this.chapter = chapter;
       this.invite_only = invite_only || false;
       this.user_roles = user_roles;
+      this.image_url = image_url;
     }
   }
 }