Skip to content

Commit

Permalink
isMobileの同期
Browse files Browse the repository at this point in the history
  • Loading branch information
@suisosuii
suisosuii committed Oct 23, 2023
1 parent dc598ab commit 3866be1
Showing 1 changed file with 94 additions and 101 deletions.
195 changes: 94 additions & 101 deletions src/components/Schedule.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { isMobile } from "react-device-detect";

import { ScheduleType } from "@/types/schedule";
import { schedules } from "@/db/schedule";
import { useEffect, useState } from "react";

interface GroupType {
id: number;
Expand All @@ -27,110 +28,112 @@ interface TimelineDataType {
itemProps?: { [key: string]: string };
}

export const Schedule = () => {
const sortedPlaceSchedule = schedules.sort((a, b) => {
// 先に 'place' プロパティを比較
const placeA = a.place.toLowerCase();
const placeB = b.place.toLowerCase();

if (placeA < placeB) {
return -1; // aをbの前に配置
}
if (placeA > placeB) {
return 1; // bをaの前に配置
}

// 'place' プロパティが同じ場合、'startDate' プロパティを比較
const startDateA = a.startDate.getTime();
const startDateB = b.startDate.getTime();

if (startDateA < startDateB) {
return -1; // aをbの前に配置
}
if (startDateA > startDateB) {
return 1; // bをaの前に配置
}

return 0; // 順序を変更しない
});
//placeが重複している要素をまとめた配列
const uniqueSortedPlaceSchedule: ScheduleType[] = sortedPlaceSchedule.filter(
(item, i, self) => {
// 同じ場所を持つアイテムを重複とみなす
return (
self.findIndex((otherItem) => otherItem.place === item.place) === i
);
},
);
const sortedPlaceSchedule = schedules.sort((a, b) => {
// 先に 'place' プロパティを比較
const placeA = a.place.toLowerCase();
const placeB = b.place.toLowerCase();

const scheduleGroup: GroupType[] = uniqueSortedPlaceSchedule.map(
(items, i) => {
return {
id: i + 1,
title: items.place,
rightTitle: items.title,
};
},
);
if (placeA < placeB) {
return -1; // aをbの前に配置
}
if (placeA > placeB) {
return 1; // bをaの前に配置
}

// 'place' プロパティが同じ場合、'startDate' プロパティを比較
const startDateA = a.startDate.getTime();
const startDateB = b.startDate.getTime();

if (startDateA < startDateB) {
return -1; // aをbの前に配置
}
if (startDateA > startDateB) {
return 1; // bをaの前に配置
}

return 0; // 順序を変更しない
});
//placeが重複している要素をまとめた配列
const uniqueSortedPlaceSchedule: ScheduleType[] = sortedPlaceSchedule.filter(
(item, i, self) => {
// 同じ場所を持つアイテムを重複とみなす
return self.findIndex((otherItem) => otherItem.place === item.place) === i;
},
);

const scheduleGroup: GroupType[] = uniqueSortedPlaceSchedule.map((items, i) => {
return {
id: i + 1,
title: items.place,
rightTitle: items.title,
};
});

const timelineData: TimelineDataType[] = sortedPlaceSchedule.map((item, i) => {
//constで条件演算子を使いgroupを割り振り
const before = i == 0 ? sortedPlaceSchedule[0] : sortedPlaceSchedule[i - 1];

let id: number;

if (before.place == item.place) {
id = before.group ? before.group : 1;
} else {
id = before.group ? before.group + 1 : 1;
}

item.group = id;

const timelineData: TimelineDataType[] = sortedPlaceSchedule.map(
(item, i) => {
//constで条件演算子を使いgroupを割り振り
const before =
i == 0 ? sortedPlaceSchedule[0] : sortedPlaceSchedule[i - 1];

let id: number;

if (before.place == item.place) {
id = before.group ? before.group : 1;
} else {
id = before.group ? before.group + 1 : 1;
}

item.group = id;

//時間修正
const fixedStartDate = new Date(
item.startDate.setMonth(item.startDate.getMonth() - 1),
);
const fixedEndDate = new Date(
item.endDate.setMonth(item.endDate.getMonth() - 1),
);
const epochStartDate = fixedStartDate.getTime();
const epochDndDate = fixedEndDate.getTime();
const epochDiff = epochDndDate - epochStartDate;
const groupId = item.group != null ? item.group : 1;
return {
id: i,
group: groupId,
title: item.title,
start_time: moment(epochStartDate).valueOf(),
end_time: moment(epochStartDate + epochDiff).valueOf(),
itemProps: { "date-tip": item.title },
};
},
//時間修正
const fixedStartDate = new Date(
item.startDate.setMonth(item.startDate.getMonth() - 1),
);
const fixedEndDate = new Date(
item.endDate.setMonth(item.endDate.getMonth() - 1),
);
const epochStartDate = fixedStartDate.getTime();
const epochDndDate = fixedEndDate.getTime();
const epochDiff = epochDndDate - epochStartDate;
const groupId = item.group != null ? item.group : 1;
return {
id: i,
group: groupId,
title: item.title,
start_time: moment(epochStartDate).valueOf(),
end_time: moment(epochStartDate + epochDiff).valueOf(),
itemProps: { "date-tip": item.title },
};
});

export const Schedule = () => {
// 事前レンダリング時の日時とブラウザでレンダリング日時を一致させる。
const [MobileOrPc, setIsMobile] = useState<boolean>(false);

// useEffectを使いハイドレーション後にレンダリングがトリガーされるようにする。
useEffect(() => {
setIsMobile(isMobile);
}, []);

const fesScope = MobileOrPc
? new Date(2023, 9, 27, 12).getTime()
: new Date(2023, 9, 27, 21).getTime();

//UnixTimeが1月ずれているため9月にする
const fesStart = new Date(2023, 9, 27, 9, 0);
const fesEnd = new Date(2023, 9, 29, 21, 0);
const fesScope = isMobile
? new Date(2023, 9, 27, 12).getTime()
: new Date(2023, 9, 27, 21).getTime();
console.log(isMobile);
const minTime = fesStart.getTime();
const maxTime = fesEnd.getTime();
return (
<>
<Timeline
groups={scheduleGroup}
items={timelineData}
sidebarWidth={isMobile ? 100 : 130}
sidebarWidth={MobileOrPc ? 100 : 130}
canResize={false} //サイズ固定
canMove={false} //位置固定
defaultTimeStart={moment(fesScope).add(isMobile ? -6 : -12, "hour")}
defaultTimeEnd={moment(fesScope).add(isMobile ? 6 : 12, "hour")}
minZoom={!isMobile ? 24 * 60 * 60 * 1000 : 3 * 60 * 60 * 1000}
maxZoom={!isMobile ? 24 * 60 * 60 * 1000 : 12 * 60 * 60 * 1000}
defaultTimeStart={moment(fesScope).add(MobileOrPc ? -6 : -12, "hour")}
defaultTimeEnd={moment(fesScope).add(MobileOrPc ? 6 : 12, "hour")}
minZoom={!MobileOrPc ? 24 * 60 * 60 * 1000 : 3 * 60 * 60 * 1000}
maxZoom={!MobileOrPc ? 24 * 60 * 60 * 1000 : 12 * 60 * 60 * 1000}
minResizeWidth={100}
onTimeChange={function (
visibleTimeStart,
Expand All @@ -157,24 +160,14 @@ export const Schedule = () => {
<TimelineHeaders>
<SidebarHeader>
{({ getRootProps }) => {
return (
<div
{...getRootProps()}
style={{
color: "white",
width: isMobile ? "100px" : "130px",
}}
>
場所
</div>
);
return <div {...getRootProps()}>Left</div>;
}}
</SidebarHeader>
<DateHeader unit="primaryHeader" />
<DateHeader />
</TimelineHeaders>
</Timeline>
<p>{isMobile ? "true" : "false"}</p>
<p suppressHydrationWarning={true}>{MobileOrPc ? "true" : "false"}</p>
</>
);
};

0 comments on commit 3866be1

Please sign in to comment.