Sign up to event

cypress/fixtures/dummyEventResponses.json

@@ -0,0 +1,13 @@
+{
+    "data": [
+        {
+            "action_id": 22,
+            "response_date": "1111 11 11, 11:11",
+            "person": {
+                "name": "Dummy User",
+                "id": 2
+            },
+            "id": 2
+        }
+    ]
+}

cypress/integration/org_events_page.spec.ts

@@ -22,6 +22,16 @@ describe('/o/[orgId]/events', () => {
         cy.visit('/o/1/events');
         cy.get('[data-test="no-events-placeholder"]').should('be.visible');
     });
+
+    //TODO: Figure out how to make this work. Requires login?
+    xit('contains conditional sign-up/undo sign-up button functionality for event sign-up', () => {
+        cy.visit('/o/1/events');
+        cy.get('[data-test="sign-up-button"]')
+            .eq(5)
+            .contains('Sign-up')
+            .click()
+            .contains('Undo sign-up');
+    });
 });
 
 // Hack to flag for typescript as module

cypress/integration/reocurring_functionality.spec.ts

@@ -1,4 +1,5 @@
 describe('Reocurring functionality', () => {
+
     it('contains a clickable org logo which leads to org page', () => {
         cy.visit('/o/1/events');
         cy.get('[data-test="org-avatar"]')

src/components/EventList.spec.tsx

@@ -1,11 +1,13 @@
 import EventList from './EventList';
 import { mountWithProviders } from '../utils/testing';
 import { ZetkinEvent } from '../interfaces/ZetkinEvent';
+import { ZetkinEventResponse } from '../types/zetkin';
 import { ZetkinOrganization } from '../interfaces/ZetkinOrganization';
 
 describe('EventList', () => {
     let dummyOrg : ZetkinOrganization;
     let dummyEvents : ZetkinEvent[];
+    let dummyEventResponses : ZetkinEventResponse[];
 
     beforeEach(()=> {
         cy.fixture('dummyOrg.json')
@@ -16,11 +18,22 @@ describe('EventList', () => {
             .then((data : {data: ZetkinEvent[]}) => {
                 dummyEvents = data.data;
             });
+        cy.fixture('dummyEventResponses.json')
+            .then((data : {data: ZetkinEventResponse[]}) => {
+                dummyEventResponses = data.data;
+            });
     });
 
     it('contains data for each event', () => {
+        const spyOnSubmit = cy.spy();
+
         mountWithProviders(
-            <EventList events={ dummyEvents } org={ dummyOrg }/>,
+            <EventList
+                eventResponses={ dummyEventResponses }
+                events={ dummyEvents }
+                onEventResponse={ spyOnSubmit }
+                org={ dummyOrg }
+            />,
         );
 
         cy.get('[data-test="event"]').each((item) => {
@@ -36,8 +49,15 @@ describe('EventList', () => {
 
     it('contains an activity title instead of missing event title', () => {
         dummyEvents[0].title = undefined;
+        const spyOnSubmit = cy.spy();
+
         mountWithProviders(
-            <EventList events={ dummyEvents } org={ dummyOrg }/>,
+            <EventList
+                eventResponses={ dummyEventResponses }
+                events={ dummyEvents }
+                onEventResponse={ spyOnSubmit }
+                org={ dummyOrg }
+            />,
         );
 
         cy.get('[data-test="event"]')
@@ -46,33 +66,70 @@ describe('EventList', () => {
     });
 
     it('contains a sign-up button for each event', () => {
+        const spyOnSubmit = cy.spy();
+
         mountWithProviders(
-            <EventList events={ dummyEvents } org={ dummyOrg }/>,
+            <EventList
+                eventResponses={ dummyEventResponses }
+                events={ dummyEvents }
+                onEventResponse={ spyOnSubmit }
+                org={ dummyOrg }
+            />,
         );
 
-        cy.contains('misc.eventList.signup');
+        //Checks for buttons on all events
+        cy.findByText('misc.eventList.signup');
+
+        //Tests button on a single event
+        cy.findByText('misc.eventList.signup')
+            .eq(0)
+            .click()
+            .then(() => {
+                expect(spyOnSubmit).to.be.calledOnce;
+            });
     });
 
     it('contains a button for more info on each event', () => {
+        const spyOnSubmit = cy.spy();
+
         mountWithProviders(
-            <EventList events={ dummyEvents } org={ dummyOrg }/>,
+            <EventList
+                eventResponses={ dummyEventResponses }
+                events={ dummyEvents }
+                onEventResponse={ spyOnSubmit }
+                org={ dummyOrg }
+            />,
         );
 
         cy.contains('misc.eventList.moreInfo');
     });
 
     it('shows a placeholder when the list is empty', () => {
+        const spyOnSubmit = cy.spy();
+
         dummyEvents = [];
         mountWithProviders(
-            <EventList events={ dummyEvents } org={ dummyOrg }/>,
+            <EventList
+                eventResponses={ dummyEventResponses }
+                events={ dummyEvents }
+                onEventResponse={ spyOnSubmit }
+                org={ dummyOrg }
+            />,
         );
 
         cy.contains('misc.eventList.placeholder');
     });
 
     it('shows a placeholder when the list is undefined', () => {
+        const spyOnSubmit = cy.spy();
+
         mountWithProviders(
-            <EventList events={ undefined } org={ dummyOrg }/>,
+            <EventList
+                eventResponses={ dummyEventResponses }
+                events={ undefined }
+                onEventResponse={ spyOnSubmit }
+                org={ dummyOrg }
+            />,
         );
 
         cy.contains('misc.eventList.placeholder');

src/components/EventList.tsx

@@ -11,15 +11,20 @@ import {
     FormattedMessage as Msg,
 } from 'react-intl';
 
+import { OnEventResponse } from '../types/misc';
 import { ZetkinEvent } from '../interfaces/ZetkinEvent';
+import { ZetkinEventResponse } from '../types/zetkin';
 import { ZetkinOrganization } from '../interfaces/ZetkinOrganization';
 
 interface EventListProps {
     events: ZetkinEvent[] | undefined;
-    org: ZetkinOrganization | undefined;
+    org: ZetkinOrganization;
+    eventResponses: ZetkinEventResponse[] | undefined;
+    onEventResponse: OnEventResponse;
 }
 
-const EventList = ({ events, org } : EventListProps) : JSX.Element => {
+const EventList = ({ eventResponses, events, onEventResponse, org } : EventListProps) : JSX.Element => {
+
     if (!events || events.length === 0) {
         return (
             <Text data-test="no-events-placeholder">
@@ -31,46 +36,63 @@ const EventList = ({ events, org } : EventListProps) : JSX.Element => {
     return (
         <>
             <Flex data-test="event-list" direction="row" gap="100" wrap>
-                { events?.map((e) => (
-                    <Flex key={ e.id } data-test="event" direction="column" margin="size-200">
-                        <View data-test="event-title">
-                            { e.title ? e.title : e.activity.title }
-                        </View>
-                        <View data-test="org-title">{ org?.title }</View>
-                        <View data-test="campaign-title">{ e.campaign.title }</View>
-                        <View data-test="start-time">
-                            <FormattedDate
-                                day="2-digit"
-                                month="long"
-                                value={ Date.parse(e.start_time) }
-                            />
-                            , <FormattedTime
-                                value={ Date.parse(e.start_time) }
-                            />
-                        </View>
-                        <View data-test="end-time">
-                            <FormattedDate
-                                day="2-digit"
-                                month="long"
-                                value={ Date.parse(e.end_time) }
-                            />
-                            , <FormattedTime
-                                value={ Date.parse(e.end_time) }
-                            />
-                        </View>
-                        <View data-test="location-title">{ e.location.title }</View>
-                        <Button data-test="sign-up-button" marginTop="size-50" variant="cta">
-                            <Msg id="misc.eventList.signup"/>
-                        </Button>
-                        <NextLink href={ `/o/${org?.id}/events/${e.id}` }>
-                            <a>
-                                <Button marginTop="size-50" variant="cta">
-                                    <Msg id="misc.eventList.moreInfo"/>
+                { events?.map((e) => {
+                    const response = eventResponses?.find(response => response.action_id === e.id);
+                    return (
+                        <Flex key={ e.id } data-test="event" direction="column" margin="size-200">
+                            <View data-test="event-title">
+                                { e.title ? e.title : e.activity.title }
+                            </View>
+                            <View data-test="org-title">{ org.title }</View>
+                            <View data-test="campaign-title">{ e.campaign.title }</View>
+                            <View data-test="start-time">
+                                <FormattedDate
+                                    day="2-digit"
+                                    month="long"
+                                    value={ Date.parse(e.start_time) }
+                                />
+                                , <FormattedTime
+                                    value={ Date.parse(e.start_time) }
+                                />
+                            </View>
+                            <View data-test="end-time">
+                                <FormattedDate
+                                    day="2-digit"
+                                    month="long"
+                                    value={ Date.parse(e.end_time) }
+                                />
+                                , <FormattedTime
+                                    value={ Date.parse(e.end_time) }
+                                />
+                            </View>
+                            <View data-test="location-title">{ e.location.title }</View>
+                            { response ? (
+                                <Button
+                                    data-test="undo-sign-up-button"
+                                    marginTop="size-50"
+                                    onPress={ () => onEventResponse(e.id, org.id, true) }
+                                    variant="cta">
+                                    <Msg id="misc.eventList.undoSignup"/>
+                                </Button>
+                            ) : (
+                                <Button
+                                    data-test="sign-up-button"
+                                    marginTop="size-50"
+                                    onPress={ () => onEventResponse(e.id, org.id, false) }
+                                    variant="cta">
+                                    <Msg id="misc.eventList.signup"/>
                                 </Button>
-                            </a>
-                        </NextLink>
-                    </Flex>
-                )) }
+                            ) }
+                            <NextLink href={ `/o/${org.id}/events/${e.id}` }>
+                                <a>
+                                    <Button marginTop="size-50" variant="cta">
+                                        <Msg id="misc.eventList.moreInfo"/>
+                                    </Button>
+                                </a>
+                            </NextLink>
+                        </Flex>
+                    );
+                }) }
             </Flex>
         </>
     );

src/fetching/deleteEventResponse.ts

@@ -0,0 +1,17 @@
+import apiUrl from '../utils/apiUrl';
+
+import { ZetkinEventSignup, ZetkinMembership } from '../types/zetkin';
+
+export default async function deleteEventResponse({ eventId, orgId } : ZetkinEventSignup) : Promise<void> {
+    const mUrl = apiUrl('/users/me/memberships');
+    const mRes = await fetch(mUrl);
+    const mData = await mRes.json();
+    const orgMembership = mData.data.find((m : ZetkinMembership) => m.organization.id === orgId);
+
+    if (orgMembership) {
+        const url = apiUrl(`/orgs/${orgId}/actions/${eventId}/responses/${orgMembership.profile.id}`);
+        await fetch(url, {
+            method: 'DELETE',
+        });
+    }
+}

src/fetching/getEventResponses.ts

@@ -0,0 +1,10 @@
+import apiUrl from '../utils/apiUrl';
+
+import { ZetkinEventResponse } from '../types/zetkin';
+
+export default async function getEventResponses() : Promise<ZetkinEventResponse[]> {
+    const rUrl = apiUrl('/users/me/action_responses');
+    const rRes = await fetch(rUrl);
+    const rData = await rRes.json();
+    return rData.data;
+}

src/fetching/putEventResponse.ts

@@ -0,0 +1,21 @@
+import apiUrl from '../utils/apiUrl';
+
+import { ZetkinEventResponse, ZetkinEventSignup, ZetkinMembership } from '../types/zetkin';
+
+export default async function putEventResponse({ eventId, orgId } : ZetkinEventSignup) : Promise<ZetkinEventResponse> {
+    const mUrl = apiUrl('/users/me/memberships');
+    const mRes = await fetch(mUrl);
+    const mData = await mRes.json();
+    const orgMembership = mData.data.find((m : ZetkinMembership ) => m.organization.id === orgId);
+
+    if (orgMembership) {
+        const eventUrl = apiUrl(`/orgs/${orgId}/actions/${eventId}/responses/${orgMembership.profile.id}`);
+        const eventRes = await fetch(eventUrl, {
+            method: 'PUT',
+        });
+        const eventData = await eventRes.json();
+        return eventData.data;
+    }
+
+    throw 'no membership';
+}

src/locale/misc/eventList/en.yml

@@ -1,3 +1,4 @@
 placeholder: Sorry, there are no planned events at the moment.
 moreInfo: More info
-signup: Sign-up
+signup: Sign-up
+undoSignup: Undo sign-up

src/locale/misc/eventList/sv.yml

@@ -1,3 +1,4 @@
 placeholder: Tyvärr finns det inga planerade händelser för tillfället.
 moreInfo: Mer info
-signup: Anmälan
+signup: Anmälan
+undoSignup: Ångra anmälan

src/locale/pages/orgEvent/en.yml

@@ -1,2 +1,2 @@
 actions:
-  signUp: Sign-up
+  signUp: Sign-up

src/locale/pages/orgEvent/sv.yml

@@ -1,2 +1,2 @@
 actions:
-  signUp: Anmälan
+  signUp: Anmälan