filter by pf only and changed interfaces and forms. still has checkbo…

src/components/EventsForm.tsx

@@ -8,6 +8,7 @@ import {
   Typography,
   Upload,
 } from 'antd';
+import Checkbox from 'antd/lib/checkbox/Checkbox';
 import { Moment } from 'moment';
 import React from 'react';
 import { Helmet } from 'react-helmet';
@@ -47,6 +48,7 @@ export interface EventsForm {
   price: number;
   description: string;
   location: string;
+  forPFOnly: boolean
 }
 
 export interface EventsFormData extends EventsForm {
@@ -177,6 +179,13 @@ const EventsForm: React.FC<EventsFormProps> = ({
           <TextArea rows={3} placeholder="Description" />
         </Form.Item>
 
+        <Form.Item
+          name="forPFOnly"
+          valuePropName="checked"
+        >
+          <Checkbox defaultChecked={false}>For Participating Families Only?</Checkbox>
+        </Form.Item>
+
         {/* TODO: come back to this in a second PR because it requires backend changes too :)
         <Form.Item label="Meeting Link" name="meetingLink">
           <Input placeholder="Meeting Link" />

src/components/event-details/EventDetails.tsx

@@ -33,11 +33,7 @@ const StyledTitle = styled(Title)`
   margin-top: 15px;
 `;
 
-const Time = styled.div`
-  margin-bottom: 0.5em;
-`;
-
-const SeatsRemaining = styled.div`
+const EventInfo = styled.div`
   margin-bottom: 0.5em;
 `;
 
@@ -81,6 +77,7 @@ const EventDetails: React.FC<EventDetailsProps> = ({
   id,
   title,
   details,
+  forPFOnly,
   privilegeLevel,
   announcements,
   hasRegistered,
@@ -101,15 +98,15 @@ const EventDetails: React.FC<EventDetailsProps> = ({
     const endTime = dateFormat(end, 'shortTime');
     return startDate === endDate ? (
       <>
-        <Time>{startDate}</Time>
-        <Time>
+        <EventInfo>{startDate}</EventInfo>
+        <EventInfo>
           {startTime} - {endTime}
-        </Time>
+        </EventInfo>
       </>
     ) : (
-      <Time>
+      <EventInfo>
         {startDate}, {startTime} - {endDate}, {endTime}
-      </Time>
+      </EventInfo>
     );
   };
 
@@ -133,7 +130,8 @@ const EventDetails: React.FC<EventDetailsProps> = ({
                 </EventsTag>
               )}
               {computeDateString()}
-              <SeatsRemaining>Seats Remaining: {spotsAvailable}</SeatsRemaining>
+              <EventInfo>Seats Remaining: {spotsAvailable}</EventInfo>
+              {forPFOnly && <EventInfo>Participating Families Only</EventInfo> }
               <Location>Location: {location}</Location>
               <GreenButton
                 onClick={() => {

src/containers/createEvent/ducks/types.ts

@@ -9,4 +9,5 @@ export interface NewEventInformation {
     start: Date;
     end: Date;
   };
+  forPFOnly: boolean;
 }

src/containers/createEvent/index.tsx

@@ -48,6 +48,7 @@ const CreateEventContainer: React.FC = () => {
           start: data.start,
           end: data.end,
         },
+        forPFOnly: data.forPFOnly
       });
       setCreateEventRequest(AsyncRequestCompleted(response));
     } catch (err) {

src/containers/editEvent/index.tsx

@@ -78,6 +78,7 @@ const EditEventContainer: React.FC = () => {
           start: data.start,
           end: data.end,
         },
+        forPFOnly: data.forPFOnly,
       });
       setEditEventRequest(AsyncRequestCompleted(response));
     } catch (err) {
@@ -97,6 +98,7 @@ const EditEventContainer: React.FC = () => {
       location: info.details.location,
       start: moment(info.details.start),
       end: moment(info.details.end),
+      forPFOnly: info.forPFOnly,
     };
   };
 

src/containers/upcoming-events/ducks/types.ts

@@ -29,4 +29,5 @@ export interface EventInformation {
   };
   price: number;
   ticketCount?: number;
+  forPFOnly: boolean;
 }

src/containers/upcoming-events/index.tsx

@@ -1,15 +1,17 @@
 import { Radio, Typography } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
-import { connect, useDispatch } from 'react-redux';
+import { connect, useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
+import { getPrivilegeLevel } from '../../auth/ducks/selectors';
+import { PrivilegeLevel } from '../../auth/ducks/types';
 import { ChungusContentContainer } from '../../components';
 import Calendar from '../../components/Calendar';
 import EventsList from '../../components/events-list/EventsList';
 import { C4CState } from '../../store';
 import { asyncRequestIsComplete } from '../../utils/asyncRequest';
 import { getUpcomingEvents } from './ducks/thunks';
-import { EventsReducerState } from './ducks/types';
+import { EventInformation, EventsReducerState } from './ducks/types';
 const { Title } = Typography;
 
 const Content = styled.div`
@@ -45,6 +47,10 @@ const UpcomingEvents: React.FC<UpcomingEventsProps> = ({ events }) => {
 
   const [view, setView] = useState<EventView>(EventView.List);
 
+  const privilegeLevel: PrivilegeLevel = useSelector((state: C4CState) => {
+    return getPrivilegeLevel(state.authenticationState.tokens);
+  });
+
   return (
     <>
       <Helmet>
@@ -72,9 +78,13 @@ const UpcomingEvents: React.FC<UpcomingEventsProps> = ({ events }) => {
 
         {asyncRequestIsComplete(events) &&
           (view === EventView.List ? (
-            <EventsList events={events.result} />
+            <EventsList events={(privilegeLevel === PrivilegeLevel.ADMIN) || (privilegeLevel === PrivilegeLevel.PF) ? 
+              events.result : 
+              events.result.filter((e: EventInformation) => !e.forPFOnly)} />
           ) : (
-            <Calendar events={events.result} />
+            <Calendar events={(privilegeLevel === PrivilegeLevel.ADMIN) || (privilegeLevel === PrivilegeLevel.PF) ? 
+              events.result : 
+              events.result.filter((e: EventInformation) => !e.forPFOnly)} />
           ))}
       </ChungusContentContainer>
     </>
@@ -83,7 +93,7 @@ const UpcomingEvents: React.FC<UpcomingEventsProps> = ({ events }) => {
 
 const mapStateToProps = (state: C4CState): UpcomingEventsProps => {
   return {
-    events: state.eventsState.upcomingEvents,
+    events: state.eventsState.upcomingEvents
   };
 };