Merge pull request #25 from Sun-Mountain/21-tourny-material-filters

21 tourny material filters

frontend/components/DailyTabs.tsx

@@ -5,7 +5,9 @@ import Box from '@mui/material/Box';
 
 import TimeComponent from './TimeComponent';
 
-import { UniqueFilter } from '@/helpers/getData';
+import { DailyTabs } from '@/interfaces/Components';
+
+import { tournamentFilterOptions } from '@/pages';
 
 interface TabPanelProps {
   children?: ReactNode;
@@ -40,23 +42,16 @@ function a11yProps(index: number) {
   };
 }
 
-interface DailyTabs {
-  allBaseFilters: number[];
-  showOnly: Array<number[]>;
-  dateList: UniqueFilter;
-  hideSoldOut: boolean;
-  soldOutEvents: number[];
-  earlyStartTime: string;
-  lateStartTime: string;
-  startTimes: UniqueFilter;
-}
-
 export default function DailyTabs({
   allBaseFilters,
   showOnly,
   dateList,
+  hideMaterialReq,
   hideSoldOut,
+  materialsRequired,
   soldOutEvents,
+  tournamentFilter,
+  tourneyList,
   earlyStartTime,
   lateStartTime,
   startTimes
@@ -73,10 +68,22 @@ export default function DailyTabs({
 
     var eventsForDay = dayEvents.filter(val => !allBaseFilters.includes(val));
 
+    if (hideMaterialReq) {
+      eventsForDay = eventsForDay.filter(val => !materialsRequired.includes(val));
+    }
+
     if (hideSoldOut) {
       eventsForDay = eventsForDay.filter(val => !soldOutEvents.includes(val));
     }
 
+    if (tournamentFilter === tournamentFilterOptions[1]) {
+      eventsForDay = eventsForDay.filter(val => tourneyList.includes(val))
+    }
+
+    if (tournamentFilter === tournamentFilterOptions[2]) {
+      eventsForDay = eventsForDay.filter(val => !tourneyList.includes(val))
+    }
+
     timeLabels.map(timeLabel => {
       if (timeLabel < earlyStartTime || timeLabel > lateStartTime) {
         var events = startTimes[timeLabel]

frontend/components/EventModal.tsx

@@ -1,5 +1,5 @@
 import { Dispatch, SetStateAction } from 'react';
-import { NewEvent } from '@/helpers/getData';
+import { NewEvent } from '@/interfaces/Events';
 import Box from '@mui/material/Box';
 import Modal from '@mui/material/Modal';
 import ConfirmationNumberIcon from '@mui/icons-material/ConfirmationNumber';
@@ -78,6 +78,10 @@ export default function BasicModal({
             <TableRow label='Experience Requirement' value={event.experienceRequirement} />
             {event.group && <TableRow label='Group' value={event.group} />}
             {event.location && <TableRow label='Location' value={event.location} />}
+            {event.materialsRequired && (
+              <TableRow label='Materials Required' value={`${event.materials}`} />
+            )}
+            <TableRow label='Tournament' value={event.tournament ? 'Yes' : 'No'} />
             <TableRow label='Tickets Available' value={`${event.ticketsAvailable}/${event.maxTickets}`} />
           </table>
         </Box>

frontend/components/FilterAutoList.tsx

@@ -1,8 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
-
-import { UniqueFilter } from '@/helpers/getData';
+import { UniqueFilter } from '@/interfaces/Filters';
 
 interface FilterAutoList {
   filter: UniqueFilter,

frontend/components/FilterButtons.tsx

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction, useState } from 'react';
 
-import { UniqueFilter } from '@/helpers/getData';
+import { UniqueFilter } from '@/interfaces/Filters';
 
 export default function FilterButtons({
   filter,

frontend/components/RadioGroup.tsx

@@ -0,0 +1,42 @@
+import { ChangeEvent } from 'react';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormControl from '@mui/material/FormControl';
+
+import { RadioGroupInterface } from '@/interfaces/Components';
+
+export default function RadioButtonsGroup({
+  formLabel,
+  options,
+  setValue,
+  value
+}: RadioGroupInterface) {
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setValue((event.target as HTMLInputElement).value);
+  };
+
+  return (
+    <div className='radio-group-container'>
+      <FormControl>
+        <strong id="radio-buttons-group-tournament-label">{formLabel}</strong>
+        <RadioGroup
+          aria-labelledby="demo-radio-buttons-group-label"
+          value={value}
+          onChange={handleChange}
+          name="radio-buttons-group"
+        >
+          {options.map(option => (
+            <FormControlLabel
+              key={option}
+              value={option}
+              control={<Radio />}
+              label={option}
+            />
+          ))}
+        </RadioGroup>
+      </FormControl>
+    </div>
+  );
+}

frontend/components/SwitchComponent.tsx

@@ -1,13 +1,7 @@
-import { Dispatch, SetStateAction } from 'react';
 import Switch from '@mui/material/Switch';
+import { SwitchInterface } from '@/interfaces/Components';
 
-interface Switch {
-  switchLabel: string;
-  hide: boolean;
-  setHide: Dispatch<SetStateAction<boolean>>;
-}
-
-export default function SwitchComponent({ switchLabel, hide, setHide }: Switch) {
+export default function SwitchComponent({ switchLabel, hide, setHide }: SwitchInterface) {
   const aria = { inputProps: { 'aria-label': `${switchLabel} Switch` } };
   const label = hide ? `Show ${switchLabel}` : `Hide ${switchLabel}`;
 
@@ -18,7 +12,8 @@ export default function SwitchComponent({ switchLabel, hide, setHide }: Switch)
   return (
     <div className='switch-container'>
       <div>
-        <strong>{label}</strong> <Switch checked={hide} onChange={handleChange}{...aria} />
+        <strong>{label}</strong>
+        <Switch checked={hide} onChange={handleChange} {...aria} />
       </div>
     </div>
   );

frontend/components/TimeRange.tsx

@@ -30,7 +30,7 @@ export default function TimeRange({
   return (
     <div className='time-range-container'>
       <div className='time-range-label'>
-        <strong>Start Time Range</strong>: {earlyStartTime} - {lateStartTime}
+        <strong>Start Time Range:</strong>
       </div>
       <div className='flex-row'>
         <Autocomplete

frontend/helpers/getData.tsx

@@ -1,92 +1,7 @@
 import Events from '@/data/events.json';
 
-interface rawEvent {
-  'Game ID': string,
-  Group?: string,
-  Title: string,
-  'Short Description'?: string,
-  'Long Description'?: string,
-  'Event Type': string,
-  'Game System'?: string,
-  'Rules Edition'?: string,
-  'Minimum Players'?: string,
-  'Maximum Players'?: string,
-  'Age Required': string,
-  'Experience Required': string,
-  'Materials Required': string,
-  'Materials Required Details'?: string,
-  'Start Date & Time': string,
-  Duration?: string,
-  'End Date & Time': string,
-  'GM Names'?: string,
-  Website?: string,
-  Email?: string,
-  'Tournament?': 'No',
-  'Round Number'?: string,
-  'Total Rounds'?: string,
-  'Minimum Play Time'?: string,
-  'Attendee Registration?'?: string,
-  'Cost $': string,
-  Location?: string,
-  'Room Name'?: string,
-  'Table Number'?: '',
-  'Special Category'?: string,
-  'Tickets Available'?: string,
-  'Last Modified': string
-}
-
-export interface NewEvent {
-  id: number,
-  gameId: string,
-  group?: string,
-  title: string,
-  shortDescription?: string,
-  longDescription?: string,
-  eventType: string,
-  gameSystem?: string,
-  ageRequirement: string,
-  experienceRequirement: string,
-  startDate: string,
-  startTime: string,
-  endDate: string,
-  endTime: string,
-  duration: number,
-  tournament: boolean,
-  cost: number,
-  location?: string,
-  ticketsAvailable?: number,
-  maxTickets?: number
-}
-
-export interface UniqueFilter {
-  [index: string]: Array<number>
-}
-
-interface TournamentFilter {
-  true: Array<number>,
-  false: Array<number>
-}
-
-export interface FilterTypes {
-  groups: UniqueFilter,
-  eventTypes: UniqueFilter,
-  gameSystems: UniqueFilter,
-  ageRequirements: UniqueFilter,
-  experienceRequirements: UniqueFilter,
-  startDates: UniqueFilter,
-  startTimes: UniqueFilter,
-  endDates: UniqueFilter,
-  endTimes: UniqueFilter,
-  tournament: Array<number>,
-  costs: UniqueFilter,
-  locations: UniqueFilter,
-  noTickets: Array<number>
-}
-
-interface Data {
-  eventData: Array<NewEvent>,
-  filters: FilterTypes
-}
+import { NewEvent, RawEvent } from '@/interfaces/Events';
+import { Data } from '@/interfaces/Data';
 
 const getTime = (time: Date) => {
   const hours = time.getHours();
@@ -106,16 +21,15 @@ const isTournament = (eventTournament: string) => {
   return false;
 }
 
-const toTitleCase = (str: string) => {
-  return str.replace(
-    /\w\S*/g,
-    function(txt) {
-      return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
-    }
-  );
+const areMaterialsRequired = (materialsRequired: string) => {
+  if (materialsRequired === "Yes") {
+    return true;
+  }
+
+  return false;
 }
 
-const cleanData = (events: Array<rawEvent>) => {
+const cleanData = (events: Array<RawEvent>) => {
   const data: Data = {
     eventData: [],
     filters: {
@@ -129,6 +43,7 @@ const cleanData = (events: Array<rawEvent>) => {
       endDates: {},
       endTimes: {},
       tournament: [],
+      materialsRequired: [],
       costs: {},
       locations: {},
       noTickets: []
@@ -153,6 +68,8 @@ const cleanData = (events: Array<rawEvent>) => {
       endTime: '',
       duration: 0,
       tournament: false,
+      materialsRequired: false,
+      materials: '',
       cost: 0,
       location: '',
       ticketsAvailable: 0,
@@ -173,7 +90,9 @@ const cleanData = (events: Array<rawEvent>) => {
     const eventStartTime = getTime(rawStart);
     const eventEndDate = rawEnd.toLocaleDateString();
     const eventEndTime = getTime(rawEnd);
-    const isTourny = isTournament(event["Tournament?"]);
+    const isTourney = isTournament(event["Tournament?"]);
+    const materialsRequired = areMaterialsRequired(event["Materials Required"]);
+    const materials = event["Materials Required Details"];
     const eventCost = Number(event["Cost $"]);
     const eventLocation = event["Location"]?.toUpperCase();
     const eventTickets = Number(event["Tickets Available"]);
@@ -271,10 +190,17 @@ const cleanData = (events: Array<rawEvent>) => {
     newEvent.endTime = eventEndTime;
 
     // Tournament
-    if (isTourny) {
+    if (isTourney) {
       data.filters.tournament.push(index);
     };
-    newEvent.tournament = isTourny;
+    newEvent.tournament = isTourney;
+
+    // Tournament
+    if (materialsRequired) {
+      data.filters.materialsRequired.push(index);
+      newEvent.materials = materials;
+    };
+    newEvent.materialsRequired = materialsRequired;
 
     // Costs
     if (!data.filters.costs[eventCost]) {
@@ -305,7 +231,7 @@ const cleanData = (events: Array<rawEvent>) => {
 };
 
 export default function getData() {
-  const rawData = Events as Array<rawEvent>;
+  const rawData = Events as Array<RawEvent>;
 
   const data = cleanData(rawData);
 

frontend/interfaces/Components.tsx

@@ -0,0 +1,37 @@
+import { Dispatch, SetStateAction } from 'react';
+import { UniqueFilter } from './Filters';
+
+export interface DailyTabs {
+  allBaseFilters: number[];
+  showOnly: Array<number[]>;
+  dateList: UniqueFilter;
+  hideMaterialReq: boolean;
+  hideSoldOut: boolean;
+  materialsRequired: number[];
+  soldOutEvents: number[];
+  tournamentFilter: string;
+  tourneyList: number[];
+  earlyStartTime: string;
+  lateStartTime: string;
+  startTimes: UniqueFilter;
+}
+
+export interface RadioGroupInterface {
+  formLabel: string;
+  options: string[];
+  setValue: Dispatch<SetStateAction<string>>;
+  value?: string;
+}
+
+export interface SwitchInterface {
+  switchLabel: string;
+  hide: boolean;
+  setHide: Dispatch<SetStateAction<boolean>>;
+}
+
+export interface TournamentSwitches {
+  hideTourney: boolean;
+  setHideTourney: Dispatch<SetStateAction<boolean>>;
+  tourneyOnly: boolean;
+  setTourneyOnly: Dispatch<SetStateAction<boolean>>;
+}

frontend/interfaces/Data.tsx

@@ -0,0 +1,7 @@
+import { FilterTypes } from "@/interfaces/Filters"
+import { NewEvent } from "@/interfaces/Events"
+
+export interface Data {
+  eventData: Array<NewEvent>,
+  filters: FilterTypes
+}