I'm working on minor UX improvements:
// ...
{now.hasSame(DateTime.fromJSDate(beginDate), 'day') && (
<hr
className="absolute grow border-red-500"
style={{
top:
scale *
now.diff(DateTime.fromJSDate(beginDate)).as('milliseconds'),
left: '2.05rem',
width: `calc(100% - 2.05rem)`,
}}
/>// ...
<div
className={classNames(
'absolute z-0 h-full w-2 group-hover:w-4/5 duration-200 ease-in-out',
!['Ćwiczenia', 'Wykład'].includes(props.type) &&
'bg-slate-300 group-hover:bg-slate-900',
props.type === 'Ćwiczenia' && 'bg-sky-300 group-hover:bg-sky-900',
props.type === 'Wykład' && 'bg-rose-300 group-hover:bg-rose-900',
isCurrentEvent && 'w-4/5'
)}
/>
// ...I would like to reduce usage of intervals to the minimum and have a centralized NowContext, which will be a combination of useState() and createContext().
This would allow to have only one useInterval() in whole app - inside a NowProvider element.
This would also reduce imports on components and pages.
NowProvider would look like this:
import { ReactNode, createContext, useState } from 'react'
import { DateTime } from 'luxon'
import { useInterval } from 'react-use'
export const NowContext = createContext(DateTime.now())
const NowContextProvider = NowContext.Provider
export const NowProvider = ({ children }: { children: ReactNode }) => {
const [now, setNow] = useState(DateTime.now())
useInterval(() => setNow(DateTime.now()), 1000)
return (
<>
<NowContextProvider value={now}>{children}</NowContextProvider>
</>
)
}It will wrap a whole app inside main.tsx like this:
import { NowContext } from './contexts/NowContext'
// ...
<React.StrictMode>
<NowProvider>
// ...
</NowProvider>
</React.StrictMode>All components willing to receive a current DateTime would transition from:
const [now, setNow] = useState(DateTime.now())
useInterval(() => setNow(DateTime.now()),1000)
to this:
import { NowContext } from '../../contexts/NowContext'
// ...
const now = useContext(NowContext)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent