11'use client' ;
22
33import React , {
4- FC ,
5- Fragment ,
6- useCallback ,
7- useEffect ,
8- useMemo ,
9- useState ,
4+ FC , Fragment , memo , useCallback , useEffect , useMemo , useState
105} from 'react' ;
116import {
127 CalendarContext ,
@@ -264,7 +259,7 @@ export const Calendar = () => {
264259export const CalendarColumn : FC < {
265260 getDate : dayjs . Dayjs ;
266261 randomHour ?: boolean ;
267- } > = ( props ) => {
262+ } > = memo ( ( props ) => {
268263 const { getDate, randomHour } = props ;
269264 const [ num , setNum ] = useState ( 0 ) ;
270265
@@ -636,7 +631,7 @@ export const CalendarColumn: FC<{
636631 </ div >
637632 </ div >
638633 ) ;
639- } ;
634+ } ) ;
640635
641636const CalendarItem : FC < {
642637 date : dayjs . Dayjs ;
@@ -647,7 +642,7 @@ const CalendarItem: FC<{
647642 state : State ;
648643 display : 'day' | 'week' | 'month' ;
649644 post : Post & { integration : Integration } ;
650- } > = ( props ) => {
645+ } > = memo ( ( props ) => {
651646 const { editPost, duplicatePost, post, date, isBeforeNow, state, display } =
652647 props ;
653648
@@ -718,69 +713,4 @@ const CalendarItem: FC<{
718713 </ div >
719714 </ div >
720715 ) ;
721- } ;
722-
723- export const CommentBox : FC < { totalComments : number ; date : dayjs . Dayjs } > = (
724- props
725- ) => {
726- const { totalComments, date } = props ;
727- const { mutate } = useSWRConfig ( ) ;
728-
729- const openCommentsModal = useCallback ( ( ) => {
730- openModal ( {
731- children : < CommentComponent date = { date } /> ,
732- withCloseButton : false ,
733- onClose ( ) {
734- mutate ( `/posts` ) ;
735- } ,
736- classNames : {
737- modal : 'bg-transparent text-textColor' ,
738- } ,
739- size : '80%' ,
740- } ) ;
741- } , [ date ] ) ;
742-
743- return (
744- < div
745- className = {
746- totalComments === 0
747- ? 'transition-opacity opacity-0 group-hover:opacity-100'
748- : ''
749- }
750- >
751- < div
752- onClick = { openCommentsModal }
753- data-tooltip-id = "tooltip"
754- data-tooltip-content = "Add / View comments"
755- className = { clsx (
756- 'group absolute right-0 bottom-0 w-[20px] h-[20px] z-[10] hover:opacity-95 cursor-pointer hover:right-[3px] hover:bottom-[3px] transition-all duration-300 ease-in-out' ,
757- totalComments === 0 ? 'opacity-50' : 'opacity-95'
758- ) }
759- >
760- < div
761- className = { clsx (
762- 'relative w-full h-full group-hover:opacity-100' ,
763- totalComments === 0 && 'opacity-0'
764- ) }
765- >
766- { totalComments > 0 && (
767- < div className = "absolute right-0 bottom-[10px] w-[10px] h-[10px] text-[8px] bg-red-500 z-[20] rounded-full flex justify-center items-center text-textColor" >
768- { totalComments }
769- </ div >
770- ) }
771- < svg
772- xmlns = "http://www.w3.org/2000/svg"
773- viewBox = "0 0 32 32"
774- id = "comment"
775- >
776- < path
777- fill = "#fff"
778- d = "M25.784 21.017A10.992 10.992 0 0 0 27 16c0-6.065-4.935-11-11-11S5 9.935 5 16s4.935 11 11 11c1.742 0 3.468-.419 5.018-1.215l4.74 1.185a.996.996 0 0 0 .949-.263 1 1 0 0 0 .263-.95l-1.186-4.74zm-2.033.11.874 3.498-3.498-.875a1.006 1.006 0 0 0-.731.098A8.99 8.99 0 0 1 16 25c-4.963 0-9-4.038-9-9s4.037-9 9-9 9 4.038 9 9a8.997 8.997 0 0 1-1.151 4.395.995.995 0 0 0-.098.732z"
779- > </ path >
780- </ svg >
781- </ div >
782- < div className = "absolute right-0 bottom-0 w-[0] h-[0] shadow-yellow bg-[rgba(0,0,0,0)]" > </ div >
783- </ div >
784- </ div >
785- ) ;
786- } ;
716+ } ) ;
0 commit comments