mirror of https://github.com/usememos/memos.git
fix: correct ESLint formatting issues
This commit is contained in:
Alex
parent
f508a82d1a
commit
3e33d0ff7e
|
|
@ -8,7 +8,7 @@ interface Props {
|
|||
month: string;
|
||||
data: Record<string, number>;
|
||||
onClick?: (date: string) => void;
|
||||
selectedDate?: string;
|
||||
selectedDate?: string;
|
||||
}
|
||||
|
||||
const getCellAdditionalStyles = (count: number, maxCount: number) => {
|
||||
|
|
@ -56,7 +56,7 @@ const ActivityCalendar = (props: Props) => {
|
|||
const count = data[date] || 0;
|
||||
const isToday = new Date().toDateString() === new Date(date).toDateString();
|
||||
const tooltipText = count ? t("memo.count-memos-in-date", { count: count, date: date }) : date;
|
||||
const isSelected = date === selectedDate;
|
||||
const isSelected = date === selectedDate;
|
||||
return day ? (
|
||||
<Tooltip className="shrink-0" key={`${date}-${index}`} title={tooltipText} placement="top" arrow>
|
||||
<div
|
||||
|
|
@ -64,7 +64,7 @@ const ActivityCalendar = (props: Props) => {
|
|||
"w-4 h-4 text-[9px] rounded-md flex justify-center items-center border border-transparent",
|
||||
getCellAdditionalStyles(count, maxCount),
|
||||
isToday && "border-gray-600 dark:!border-gray-500",
|
||||
isSelected && "bg-green-500 text-white",
|
||||
isSelected && "bg-green-500 text-white",
|
||||
)}
|
||||
onClick={() => count && onClick && onClick(date)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { Button, Divider, IconButton } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import { Fragment, useEffect, useRef, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import ActivityCalendar from "@/components/ActivityCalendar";
|
||||
import Empty from "@/components/Empty";
|
||||
import Icon from "@/components/Icon";
|
||||
|
|
@ -19,7 +20,6 @@ import i18n from "@/i18n";
|
|||
import { useMemoList, useMemoStore } from "@/store/v1";
|
||||
import { Memo } from "@/types/proto/api/v2/memo_service";
|
||||
import { useTranslate } from "@/utils/i18n";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
interface GroupedByMonthItem {
|
||||
// Format: 2021-1
|
||||
|
|
@ -67,79 +67,85 @@ const Timeline = () => {
|
|||
}
|
||||
};
|
||||
const handlePrevDay = () => {
|
||||
if (!selectedDay) return;
|
||||
|
||||
if (!selectedDay) return;
|
||||
|
||||
const currentDate = new Date(selectedDay);
|
||||
currentDate.setUTCDate(currentDate.getUTCDate() - 1);
|
||||
|
||||
currentDate.setUTCDate(currentDate.getUTCDate() - 1);
|
||||
|
||||
let found = false;
|
||||
while (currentDate >= new Date(Object.keys(activityStats).sort()[0])) {
|
||||
const checkDateStr = currentDate.toISOString().substring(0, 10);
|
||||
const checkDateStr = currentDate.toISOString().substring(0, 10);
|
||||
if (activityStats[checkDateStr] && activityStats[checkDateStr] > 0) {
|
||||
setSelectedDay(checkDateStr);
|
||||
setSelectedDay(checkDateStr);
|
||||
found = true;
|
||||
break;
|
||||
}
|
||||
currentDate.setUTCDate(currentDate.getUTCDate() - 1);
|
||||
}
|
||||
|
||||
|
||||
if (!found) {
|
||||
toast.error(t("message.no-more-memos"));
|
||||
}
|
||||
};
|
||||
const handleNextDay = () => {
|
||||
if (!selectedDay) return;
|
||||
|
||||
if (!selectedDay) return;
|
||||
|
||||
const currentDate = new Date(selectedDay);
|
||||
currentDate.setUTCDate(currentDate.getUTCDate() + 1);
|
||||
|
||||
currentDate.setUTCDate(currentDate.getUTCDate() + 1);
|
||||
|
||||
let found = false;
|
||||
while (currentDate <= new Date(Object.keys(activityStats).sort().reverse()[0])) {
|
||||
const checkDateStr = currentDate.toISOString().substring(0, 10);
|
||||
const checkDateStr = currentDate.toISOString().substring(0, 10);
|
||||
if (activityStats[checkDateStr] && activityStats[checkDateStr] > 0) {
|
||||
setSelectedDay(checkDateStr);
|
||||
setSelectedDay(checkDateStr);
|
||||
found = true;
|
||||
break;
|
||||
}
|
||||
currentDate.setUTCDate(currentDate.getUTCDate() + 1);
|
||||
}
|
||||
}
|
||||
if (!found) {
|
||||
toast.error(t("message.no-more-memos"));
|
||||
toast.error(t("message.no-more-memos"));
|
||||
}
|
||||
};
|
||||
|
||||
const handlePrevMonth = () => {
|
||||
if (!selectedDay) return;
|
||||
const currentMonth = new Date(selectedDay);
|
||||
currentMonth.setUTCMonth(currentMonth.getUTCMonth() - 1);
|
||||
const handlePrevMonth = () => {
|
||||
if (!selectedDay) return;
|
||||
const currentMonth = new Date(selectedDay);
|
||||
currentMonth.setUTCMonth(currentMonth.getUTCMonth() - 1);
|
||||
|
||||
const prevMonthStr = currentMonth.toISOString().substring(0, 7);
|
||||
const datesWithData = Object.keys(activityStats).filter(date => date.startsWith(prevMonthStr)).sort();
|
||||
if (datesWithData.length > 0) {
|
||||
setSelectedDay(datesWithData[0]);
|
||||
const prevMonthStr = currentMonth.toISOString().substring(0, 7);
|
||||
const datesWithData = Object.keys(activityStats)
|
||||
.filter((date) => date.startsWith(prevMonthStr))
|
||||
.sort();
|
||||
if (datesWithData.length > 0) {
|
||||
setSelectedDay(datesWithData[0]);
|
||||
} else {
|
||||
handlePrevDay();
|
||||
}
|
||||
};
|
||||
const handleNextMonth = () => {
|
||||
if (!selectedDay) return;
|
||||
const currentMonth = new Date(selectedDay);
|
||||
currentMonth.setUTCMonth(currentMonth.getUTCMonth() + 1);
|
||||
const nextMonthStr = currentMonth.toISOString().substring(0, 7);
|
||||
const datesWithData = Object.keys(activityStats)
|
||||
.filter((date) => date.startsWith(nextMonthStr))
|
||||
.sort();
|
||||
if (datesWithData.length > 0) {
|
||||
setSelectedDay(datesWithData[0]);
|
||||
} else {
|
||||
const currentMonthStr = selectedDay.substring(0, 7);
|
||||
const datesInCurrentMonth = Object.keys(activityStats)
|
||||
.filter((date) => date.startsWith(currentMonthStr))
|
||||
.sort();
|
||||
if (datesInCurrentMonth.length > 0 && selectedDay !== datesInCurrentMonth[datesInCurrentMonth.length - 1]) {
|
||||
setSelectedDay(datesInCurrentMonth[datesInCurrentMonth.length - 1]);
|
||||
} else {
|
||||
handlePrevDay()
|
||||
toast.error(t("message.no-more-memos"));
|
||||
}
|
||||
};
|
||||
const handleNextMonth = () => {
|
||||
if (!selectedDay) return;
|
||||
const currentMonth = new Date(selectedDay);
|
||||
currentMonth.setUTCMonth(currentMonth.getUTCMonth() + 1);
|
||||
const nextMonthStr = currentMonth.toISOString().substring(0, 7);
|
||||
const datesWithData = Object.keys(activityStats).filter(date => date.startsWith(nextMonthStr)).sort();
|
||||
if (datesWithData.length > 0) {
|
||||
setSelectedDay(datesWithData[0]);
|
||||
} else {
|
||||
const currentMonthStr = selectedDay.substring(0, 7);
|
||||
const datesInCurrentMonth = Object.keys(activityStats).filter(date => date.startsWith(currentMonthStr)).sort();
|
||||
if (datesInCurrentMonth.length > 0 && selectedDay !== datesInCurrentMonth[datesInCurrentMonth.length - 1]) {
|
||||
setSelectedDay(datesInCurrentMonth[datesInCurrentMonth.length - 1]);
|
||||
} else {
|
||||
toast.error(t("message.no-more-memos"));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
nextPageTokenRef.current = undefined;
|
||||
memoList.reset();
|
||||
|
|
@ -221,22 +227,22 @@ const Timeline = () => {
|
|||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end items-center gap-2">
|
||||
{ selectedDay && (
|
||||
<div>
|
||||
<IconButton variant="outlined" size="sm" onClick={()=>handlePrevMonth()}>
|
||||
<Icon.ChevronsLeft className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
<IconButton variant="outlined" size="sm" onClick={()=>handlePrevDay()}>
|
||||
<Icon.ChevronLeft className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
<IconButton variant="outlined" size="sm" onClick={()=>handleNextDay()}>
|
||||
<Icon.ChevronRight className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
<IconButton variant="outlined" size="sm" onClick={()=>handleNextMonth()}>
|
||||
<Icon.ChevronsRight className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
</div>
|
||||
)}
|
||||
{selectedDay && (
|
||||
<div>
|
||||
<IconButton variant="outlined" size="sm" onClick={() => handlePrevMonth()}>
|
||||
<Icon.ChevronsLeft className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
<IconButton variant="outlined" size="sm" onClick={() => handlePrevDay()}>
|
||||
<Icon.ChevronLeft className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
<IconButton variant="outlined" size="sm" onClick={() => handleNextDay()}>
|
||||
<Icon.ChevronRight className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
<IconButton variant="outlined" size="sm" onClick={() => handleNextMonth()}>
|
||||
<Icon.ChevronsRight className="w-5 h-auto" />
|
||||
</IconButton>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<IconButton variant="outlined" size="sm" onClick={() => handleNewMemo()}>
|
||||
<Icon.Plus className="w-5 h-auto" />
|
||||
|
|
@ -246,57 +252,64 @@ const Timeline = () => {
|
|||
<div className="w-full h-auto flex flex-col justify-start items-start">
|
||||
<MemoFilter className="px-2 my-4" />
|
||||
|
||||
{activityStats && Object.keys(activityStats).length > 0 && groupedByMonth.map((group, index) => (
|
||||
<Fragment key={group.month}>
|
||||
<div className={classNames("flex flex-col justify-start items-start w-full mt-2 last:mb-4")}>
|
||||
<div className={classNames("flex shrink-0 flex-row w-full pl-1 mt-2 mb-2", "sticky")}>
|
||||
<div className={classNames("w-full flex flex-col")}>
|
||||
<span className="font-medium text-3xl leading-tight mb-1">
|
||||
{new Date(group.month).toLocaleString(i18n.language, { month: "short", timeZone: "UTC" })}
|
||||
</span>
|
||||
{selectedDay ? (
|
||||
<span className="font-medium text-3xl leading-none mb-1">
|
||||
{new Date(selectedDay).toLocaleDateString(i18n.language, {
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
timeZone: "UTC"
|
||||
})}
|
||||
{activityStats &&
|
||||
Object.keys(activityStats).length > 0 &&
|
||||
groupedByMonth.map((group, index) => (
|
||||
<Fragment key={group.month}>
|
||||
<div className={classNames("flex flex-col justify-start items-start w-full mt-2 last:mb-4")}>
|
||||
<div className={classNames("flex shrink-0 flex-row w-full pl-1 mt-2 mb-2", "sticky")}>
|
||||
<div className={classNames("w-full flex flex-col")}>
|
||||
<span className="font-medium text-3xl leading-tight mb-1">
|
||||
{new Date(group.month).toLocaleString(i18n.language, { month: "short", timeZone: "UTC" })}
|
||||
</span>
|
||||
) : (
|
||||
<span className="font-medium text-3xl leading-none mb-1">
|
||||
{new Date().toLocaleDateString(i18n.language, {
|
||||
month: 'long',
|
||||
timeZone: "UTC"
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
<span className="opacity-60">{new Date(group.month).getUTCFullYear()}</span>
|
||||
{selectedDay ? (
|
||||
<span className="font-medium text-3xl leading-none mb-1">
|
||||
{new Date(selectedDay).toLocaleDateString(i18n.language, {
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
timeZone: "UTC",
|
||||
})}
|
||||
</span>
|
||||
) : (
|
||||
<span className="font-medium text-3xl leading-none mb-1">
|
||||
{new Date().toLocaleDateString(i18n.language, {
|
||||
month: "long",
|
||||
timeZone: "UTC",
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
<span className="opacity-60">{new Date(group.month).getUTCFullYear()}</span>
|
||||
</div>
|
||||
<ActivityCalendar
|
||||
month={group.month}
|
||||
data={group.data}
|
||||
onClick={(date) => handleDateClick(date)}
|
||||
selectedDate={selectedDay}
|
||||
/>
|
||||
</div>
|
||||
<ActivityCalendar month={group.month} data={group.data} onClick={(date) => handleDateClick(date)} selectedDate={selectedDay} />
|
||||
</div>
|
||||
|
||||
<div className={classNames("w-full flex flex-col justify-start items-start")}>
|
||||
{group.memos.map((memo, index) => (
|
||||
<div
|
||||
key={`${memo.name}-${memo.displayTime}`}
|
||||
className={classNames("relative w-full flex flex-col justify-start items-start pl-4 sm:pl-10 pt-0")}
|
||||
>
|
||||
<MemoView className="!border max-w-full !border-gray-100 dark:!border-zinc-700" memo={memo} />
|
||||
<div className="absolute -left-2 sm:left-2 top-4 h-full">
|
||||
{index !== group.memos.length - 1 && (
|
||||
<div className="absolute top-2 left-[7px] h-full w-0.5 bg-gray-200 dark:bg-gray-700 block"></div>
|
||||
)}
|
||||
<div className="border-4 rounded-full border-white relative dark:border-zinc-800">
|
||||
<Icon.Circle className="w-2 h-auto bg-gray-200 text-gray-200 dark:bg-gray-700 dark:text-gray-700 rounded-full" />
|
||||
<div className={classNames("w-full flex flex-col justify-start items-start")}>
|
||||
{group.memos.map((memo, index) => (
|
||||
<div
|
||||
key={`${memo.name}-${memo.displayTime}`}
|
||||
className={classNames("relative w-full flex flex-col justify-start items-start pl-4 sm:pl-10 pt-0")}
|
||||
>
|
||||
<MemoView className="!border max-w-full !border-gray-100 dark:!border-zinc-700" memo={memo} />
|
||||
<div className="absolute -left-2 sm:left-2 top-4 h-full">
|
||||
{index !== group.memos.length - 1 && (
|
||||
<div className="absolute top-2 left-[7px] h-full w-0.5 bg-gray-200 dark:bg-gray-700 block"></div>
|
||||
)}
|
||||
<div className="border-4 rounded-full border-white relative dark:border-zinc-800">
|
||||
<Icon.Circle className="w-2 h-auto bg-gray-200 text-gray-200 dark:bg-gray-700 dark:text-gray-700 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{index !== groupedByMonth.length - 1 && <Divider className="w-full !my-4 md:!mb-8 !bg-gray-100 dark:!bg-zinc-700" />}
|
||||
</Fragment>
|
||||
))}
|
||||
{index !== groupedByMonth.length - 1 && <Divider className="w-full !my-4 md:!mb-8 !bg-gray-100 dark:!bg-zinc-700" />}
|
||||
</Fragment>
|
||||
))}
|
||||
{isRequesting ? (
|
||||
<div className="flex flex-row justify-center items-center w-full my-4 text-gray-400">
|
||||
<Icon.Loader className="w-4 h-auto animate-spin mr-1" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue