usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-01-01 10:01:54 +08:00
Code Issues Projects Releases Packages Wiki Activity

feat: add hook for generating different date times (#3524)

Browse source 
* Added hook for generating different date times

* Fixed up logic to destructure the datetime params

---------

Co-authored-by: Martin MacDonald <martinmacdonald@Martins-MacBook-Pro.local>
This commit is contained in:
Martin MacDonald 2024-06-05 12:52:07 +01:00 committed by GitHub
parent 7375b87967
commit aec5927d31
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 22 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
web/src/components/MemoEditor/MemoEditorDialog.tsx
View file

@ -1,7 +1,8 @@
import { IconButton } from "@mui/joy";
import clsx from "clsx";
import { useEffect, useRef, useState } from "react";
import { useEffect, useRef } from "react";
import useCurrentUser from "@/hooks/useCurrentUser";
import useDateTime from "@/hooks/useDateTime";
import { useMemoStore, useTagStore } from "@/store/v1";
import { Memo } from "@/types/proto/api/v1/memo_service";
import MemoEditor, { Props as MemoEditorProps } from ".";
@ -21,7 +22,7 @@ const MemoEditorDialog: React.FC<Props> = ({
}: Props) => {
const tagStore = useTagStore();
const memoStore = useMemoStore();
const [displayTime, setDisplayTime] = useState<string | undefined>(memoStore.getMemoByName(memoName || "")?.displayTime?.toISOString());
const { setDateTime, displayDateTime, datePickerDateTime } = useDateTime(memoStore.getMemoByName(memoName || "")?.displayTime);
const memoPatchRef = useRef<Partial<Memo>>({
displayTime: memoStore.getMemoByName(memoName || "")?.displayTime,
});
@ -32,7 +33,7 @@ const MemoEditorDialog: React.FC<Props> = ({
}, []);
const updateDisplayTime = (displayTime: string) => {
setDisplayTime(displayTime);
setDateTime(displayTime);
memoPatchRef.current.displayTime = new Date(displayTime);
};
@ -50,14 +51,14 @@ const MemoEditorDialog: React.FC<Props> = ({
return (
<>
<div className="w-full flex flex-row justify-between items-center">
<div className={clsx("flex flex-row justify-start items-center", !displayTime && "mb-2")}>
{displayTime ? (
<div className={clsx("flex flex-row justify-start items-center", !displayDateTime && "mb-2")}>
{displayDateTime ? (
<div className="relative">
<span className="cursor-pointer text-gray-500 dark:text-gray-400">{new Date(displayTime).toLocaleString()}</span>
<span className="cursor-pointer text-gray-500 dark:text-gray-400">{displayDateTime}</span>
<input
className="inset-0 absolute z-1 opacity-0"
type="datetime-local"
value={displayTime}
value={datePickerDateTime}
onFocus={(e: any) => e.target.showPicker()}
onChange={(e) => updateDisplayTime(e.target.value)}
/>

1
web/src/hooks/index.ts
View file

@ -4,3 +4,4 @@ export * from "./useNavigateTo";
export * from "./useAsyncEffect";
export * from "./useFilterWithUrlParams";
export * from "./useResponsiveWidth";
export * from "./useDateTime";

13
web/src/hooks/useDateTime.ts Normal file
View file

@ -0,0 +1,13 @@
import { useState } from "react";
const useDateTime = (initalState?: Date) => {
const [dateTime, setDateTimeInternal] = useState<Date | undefined>(initalState && new Date(initalState));
return {
setDateTime: (dateTimeString: string) => setDateTimeInternal(new Date(dateTimeString)),
displayDateTime: dateTime && dateTime.toLocaleString(),
datePickerDateTime: dateTime && new Date(dateTime.getTime() - dateTime.getTimezoneOffset() * 60000).toISOString().split(".")[0],
};
};
export default useDateTime;