Merge pull request #24 from snamiki1212/f/refactor

F/refactor

src/constants/fullcalendar/options.ts

@@ -48,17 +48,11 @@ const resourceConfigs = {
   resourcesInitiallyExpanded: false,
 } as const;
 
-const ableConfis = {
-  selectable: true,
-  editable: true,
-} as const;
-
 export const FULL_CALENDAR_CONFIGS = {
   resourceAreaColumns,
   views,
   headerToolbar,
   slotLabelFormat,
-  ...ableConfis,
   ...initialView,
   ...resourceGroupField,
   ...schedulerLicenseKey,

src/containers/TemplateCalendarContainer.tsx

@@ -1,46 +1,36 @@
 import React from "react";
 import { useCommunityCollegeAfterwardsWorkingHolidayCalendar } from "../hooks/useCommunityCollegeAfterwardsWorkingHolidayCalendar";
 import { useUser } from "../hooks/useUser";
-import { DEPRECATED_useEventsHandler } from "../hooks/DEPRECATED_useEventsHandler";
 import { BaseCalendarContainer } from "./BaseCalendarContainer";
 import { useResourceGroupLabelContentInTemplateCalendar } from "../hooks/useResourceGroupLabelContentInTemplateCalendar";
 
+const ableConfis = {
+  selectable: false,
+  editable: false,
+} as const;
+
 export function TemplateCalendarContainer() {
   const { birth } = useUser();
-  const { events, select, click, set: setEvents } = DEPRECATED_useEventsHandler();
-  const { stories, generate } = useCommunityCollegeAfterwardsWorkingHolidayCalendar();
-  const {resourceGroupLabelContent} = useResourceGroupLabelContentInTemplateCalendar()
-
-  const storyResources = React.useMemo(
-    () =>
-      stories.reduce(
-        (prev, story) => [...prev, ...story.resources],
-        [] as any[]
-      ),
-    [stories]
-  );
-  const storyEvents = React.useMemo(
-    () =>
-      stories.reduce((prev, story) => [...prev, ...story.events], [] as any[]),
-    [stories]
-  );
+  const {
+    resources,
+    events,
+    generate,
+  } = useCommunityCollegeAfterwardsWorkingHolidayCalendar();
+  const {
+    resourceGroupLabelContent,
+  } = useResourceGroupLabelContentInTemplateCalendar();
 
   React.useEffect(() => {
     generate(birth);
   }, [generate, birth]);
 
-  React.useEffect(() => {
-    setEvents(storyEvents);
-  }, [storyEvents, setEvents]);
-
   return (
     <BaseCalendarContainer
       events={events}
-      resources={storyResources}
-      select={select}
-      eventClick={click}
+      resources={resources}
       initialDate={"2020-06-01"}
       resourceGroupLabelContent={resourceGroupLabelContent}
+      {...ableConfis}
     />
   );
-}
+}

src/containers/UserCalendarContainer.tsx

@@ -1,43 +1,42 @@
 import React from "react";
 import { useUserCalendar } from "../hooks/useUserCalendar";
 import { useUser } from "../hooks/useUser";
-import { DEPRECATED_useEventsHandler } from "../hooks/DEPRECATED_useEventsHandler";
 import { BaseCalendarContainer } from "./BaseCalendarContainer";
 import { useResourceGroupLabelContentInUserCalendar } from "../hooks/useResourceGroupLabelContentInUserCalendar";
 
+const ableConfis = {
+  selectable: true,
+  editable: true,
+} as const;
+
 export function UserCalendarContainer() {
+  const { birth } = useUser();
+
   const {
     resourceGroupLabelContent,
   } = useResourceGroupLabelContentInUserCalendar();
-  const { birth } = useUser();
+
   const {
     events,
-    select,
-    click,
-    set: setEvents,
-  } = DEPRECATED_useEventsHandler();
-  const {
-    events: _events,
-    resources: _resources,
+    resources,
     init: initUserCalendar,
+    click,
+    select,
   } = useUserCalendar();
 
   React.useEffect(() => {
     initUserCalendar(birth);
   }, [birth, initUserCalendar]);
 
-  React.useEffect(() => {
-    setEvents(_events);
-  }, [setEvents, _events]);
-
   return (
     <BaseCalendarContainer
       events={events}
-      resources={_resources}
+      resources={resources}
       select={select}
       eventClick={click}
       initialDate={"2020-06-01"}
       resourceGroupLabelContent={resourceGroupLabelContent}
+      {...ableConfis}
     />
   );
 }

src/core/calendar/CommunityCollegeAfterwardsWorkingHolidayCalendar/createCalendar.ts

@@ -8,6 +8,7 @@ import { WORKING_HOLIDAY_APPLICATION_LIMITATION_AGE } from "../../../constants/v
 import { COMMUNITY_COLLEGE_EXAMPLE1 } from "../../../constants/school";
 import { range } from "../../../lib/util";
 import { build } from "../../story/CommunityCollegeAfterwardsWorkingHolidayStory/build";
+import { BaseStory } from "../../story/BaseStory";
 
 const startMonths = COMMUNITY_COLLEGE_EXAMPLE1.startMonths;
 
@@ -16,7 +17,7 @@ const addingNumbers = range(
   WORKING_HOLIDAY_APPLICATION_LIMITATION_AGE
 );
 
-const generateStoryList = (birth: Date) => {
+const generateStoryList = (birth: Date): BaseStory[] => {
   return addingNumbers
     .map((num) => addYears(birth, num))
     .flatMap((startDate) => {

src/core/calendar/UserCalendar/createUserCalendar.ts

@@ -4,9 +4,9 @@ import { ProfileStory } from "../../story/ProfileStory/model";
 type Story = ProfileStory;
 
 export const createUserCalendar = ({
-  stories = [],
+  stories,
 }: {
-  stories?: Story[];
+  stories: Story[];
 }): UserCalendar => {
   return {
     id: calendarId,

src/core/event/BaseEvent.ts

@@ -1 +1,12 @@
-export type BaseEvent = any;
+import { EventInput } from "@fullcalendar/react";
+
+type MyEvent = {
+  id: string;
+  resourceId: string;
+  storyId: string;
+  title?: string;
+  start: Date | string;
+  end: Date | string;
+};
+
+export type BaseEvent = MyEvent | EventInput;

src/core/story/BaseStory.ts

@@ -1,23 +1,11 @@
 import { convertIsoToYearAndMonth } from "../../lib/date";
-
-// import { EventInput } from "@fullcalendar/react";
-
-// type _Date = Date | string;
-// type _Event = {
-//   id: string;
-//   resourceId: string;
-//   title?: string;
-//   start: Date | string;
-//   end: Date | string;
-// }; // TODO: maybe should not use fullcalendar type.
-
-type Event = any;
-type Resource = any; // TODO:
+import { BaseEvent } from "../event/BaseEvent";
+import { BaseResource } from "../resource/BaseResource";
 
 export type BaseStory = {
   id: string;
-  events: Event[];
-  resources: Resource[];
+  events: BaseEvent[];
+  resources: BaseResource[];
   name: string;
 };
 

src/core/story/CommunityCollegeAfterwardsWorkingHolidayStory/build.ts

@@ -13,6 +13,8 @@ import {
 import { uuid } from "../../../lib/uuid";
 import { CommunityCollegeAfterwardsWorkingHolidayStory } from "./model";
 import { createStoryName } from "../BaseStory";
+import { BaseEvent } from "../../event/BaseEvent";
+import { BaseResource } from "../../resource/BaseResource";
 
 const VISA_BACKGROUND_COLOR = "#8fbc8b";
 const STATUS_BACKGROUND_COLOR = "#ffd700";
@@ -46,6 +48,7 @@ const generateStory = (storyId: string, startDate: Date) => {
   const coopVisaEvent = {
     id: uuid(),
     resourceId: coopVisaResourceId,
+    storyId,
     start: startDate.toISOString(),
     end: addMonths(startDate, 12 * 2).toISOString(),
     [NAME_OF_ORDER]: 1,
@@ -63,6 +66,7 @@ const generateStory = (storyId: string, startDate: Date) => {
   const studyVisaEvent = {
     id: uuid(),
     resourceId: studyVisaResourceId,
+    storyId,
     start: startDate.toISOString(),
     end: addMonths(startDate, 12 * 2).toISOString(),
     [NAME_OF_ORDER]: 2,
@@ -81,6 +85,7 @@ const generateStory = (storyId: string, startDate: Date) => {
   const workingHolidayVisaEvent = {
     id: uuid(),
     resourceId: workingholidayResourceId,
+    storyId,
     start: dateAsStartWorkingHoliday.toISOString(),
     end: addMonths(dateAsStartWorkingHoliday, 12 * 1).toISOString(),
     [NAME_OF_ORDER]: 3,
@@ -89,6 +94,7 @@ const generateStory = (storyId: string, startDate: Date) => {
   const preWorkingHolidayVisaEvent = {
     id: uuid(),
     resourceId: workingholidayResourceId,
+    storyId,
     start: setMonth(addYears(dateAsStartWorkingHoliday, -1), 8).toISOString(),
     end: dateAsStartWorkingHoliday.toISOString(),
     [NAME_OF_ORDER]: 3,
@@ -103,9 +109,10 @@ const generateStory = (storyId: string, startDate: Date) => {
     [NAME_OF_STORY_ID]: storyId,
     [NAME_OF_ORDER]: 4,
   };
-  const studentStatusVisa = {
+  const studentStatusVisaEvent = {
     id: uuid(),
     resourceId: studentStatusResourceId,
+    storyId,
     start: startDate.toISOString(),
     end: addMonths(startDate, 12 * 2).toISOString(),
     [NAME_OF_ORDER]: 4,
@@ -120,9 +127,10 @@ const generateStory = (storyId: string, startDate: Date) => {
     [NAME_OF_STORY_ID]: storyId,
     [NAME_OF_ORDER]: 5,
   };
-  const workerStatusVisa = {
+  const workerStatusVisaEvent = {
     id: uuid(),
     resourceId: workerStatusResourceId,
+    storyId,
     start: addMonths(startDate, 12 * 1).toISOString(),
     end: addMonths(startDate, 12 * 3).toISOString(),
     [NAME_OF_ORDER]: 5,
@@ -147,8 +155,8 @@ const generateStory = (storyId: string, startDate: Date) => {
     workingHolidayVisaEvent,
 
     // status
-    studentStatusVisa,
-    workerStatusVisa,
+    studentStatusVisaEvent,
+    workerStatusVisaEvent,
   ];
-  return [resources, events] as const;
+  return [resources, events] as [BaseResource[], BaseEvent[]];
 };

src/core/story/ProfileStory/createProfileStory.ts

@@ -1,3 +1,4 @@
+import { addMonths, addYears } from "date-fns";
 import { ProfileStory } from "./model";
 import {
   PROFILE_ID,
@@ -6,11 +7,11 @@ import {
 } from "../../../constants/fullcalendar/settings";
 import { DEPRECATED_SHARED__RESOURCES } from "../../../constants/fullcalendar/templates";
 import { createStoryName } from "../BaseStory";
-import { addMonths, addYears } from "date-fns";
 import { getRangeNumbers } from "../../../lib/age";
 import { uuid } from "../../../lib/uuid";
 import { convertIsoToDateTime } from "../../../lib/date";
 import { WORKING_HOLIDAY_APPLICATION_LIMITATION_AGE } from "../../../constants/visa";
+import { BaseEvent } from "../../event/BaseEvent";
 
 export const createProfileStory = ({
   birth,
@@ -19,23 +20,28 @@ export const createProfileStory = ({
 }): ProfileStory => {
   const _birth = new Date(birth);
 
+  const storyId = PROFILE_ID;
+
   return {
-    id: PROFILE_ID,
+    id: storyId,
     name: createStoryName(_birth),
     resources: DEPRECATED_SHARED__RESOURCES,
-    events: generateEvents(_birth),
+    events: generateEvents(_birth, storyId),
   };
 };
 
-const generateEvents = (startDate: Date) => {
+const generateEvents = (startDate: Date, storyId: string): BaseEvent[] => {
   // get year num
   const endYear = getLastYear();
   const startYear = new Date(startDate).getFullYear();
 
   // create years list
   const years = getRangeNumbers(startYear, endYear);
 
-  const workingHolidayLimitEvent = createWorkingHolidayLimitEvent(startDate);
+  const workingHolidayLimitEvent = createWorkingHolidayLimitEvent(
+    startDate,
+    storyId
+  );
 
   // create EventInput obj
   const ageEventList = years.map((year, index) => {
@@ -53,6 +59,7 @@ const generateEvents = (startDate: Date) => {
       id: uuid(),
       resourceId: RESOURCE_ID__SHARED__AGE,
       title: `Aage:${index}`,
+      storyId,
       start,
       end,
     };
@@ -67,7 +74,10 @@ const getLastYear = () => {
   return addYears(date, BUFFER_YEAR).getFullYear();
 };
 
-const createWorkingHolidayLimitEvent = (birthday: Date) => {
+const createWorkingHolidayLimitEvent = (
+  birthday: Date,
+  storyId: string
+): BaseEvent => {
   const lastYearDate = addYears(
     birthday,
     WORKING_HOLIDAY_APPLICATION_LIMITATION_AGE
@@ -80,6 +90,7 @@ const createWorkingHolidayLimitEvent = (birthday: Date) => {
     id: uuid(),
     resourceId: RESOURCE_ID__SHARED__LIMIT,
     title: "Limitation till WorkingHoliday",
+    storyId,
     start,
     end,
   };