Skip to content

Commit

Permalink
Make writing session timer work on all pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@0xi4o
0xi4o committed Aug 27, 2024
1 parent 7adc874 commit 68198c5
Show file tree
Hide file tree
Showing 5 changed files with 97 additions and 13 deletions.
17 changes: 8 additions & 9 deletions app/components/common/editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,12 @@ const Editor = ({
})

const {
focusMode,
setFocusMode,
helpOpen,
setHelpOpen,
isMusicPlaying,
setIsMusicPlaying,
mainMenuOpen,
setMainMenuOpen,
preferencesOpen,
Expand All @@ -88,6 +92,8 @@ const Editor = ({
handleSplashOpen,
settings,
triggerGlobalShortcut,
wordCount,
handleWordCountChange,
writingSessionOpen,
setWritingSessionOpen,
writingSessionSettings,
Expand All @@ -99,10 +105,7 @@ const Editor = ({
useKeyboardShortcuts(shortcuts)

const titleRef = useRef<HTMLTextAreaElement>(null)
const wordCount = useRef<number>(data?.wordCount ?? 0)

const [focusMode, setFocusMode] = useState(false)
const [isMusicPlaying, setIsMusicPlaying] = useState(false)
const [isTitleFirstEdit, setIsTitleFirstEdit] = useState<boolean>(
data.title.trim() === ''
)
Expand Down Expand Up @@ -188,10 +191,6 @@ const Editor = ({
setEditorData({ title }, { ignoreAutoSave: isTitleFirstEdit })
}

const handleWordCountChange = (count: number) => {
wordCount.current = count
}

useEffect(() => {
if (data.content) {
const wordCount = editor.storage.characterCount.words()
Expand Down Expand Up @@ -255,7 +254,7 @@ const Editor = ({
setWritingSessionSettings
}
setWritingSessionStatus={setWritingSessionStatus}
wordCount={wordCount.current}
wordCount={wordCount}
writingSessionOpen={writingSessionOpen}
writingSessionSettings={writingSessionSettings}
/>
Expand All @@ -272,7 +271,7 @@ const Editor = ({
<div
className={`flex items-center justify-end p-4 gap-4 transition-opacity duration-100 hover:opacity-100 ${focusMode ? 'opacity-5' : 'opacity-100'}`}
>
<span className='text-sm text-muted-foreground'>{`${wordCount.current} words`}</span>
<span className='text-sm text-muted-foreground'>{`${wordCount} words`}</span>
<E2EEIndicator />
<HelpButton triggerShortcut={triggerGlobalShortcut} />
</div>
Expand Down
4 changes: 2 additions & 2 deletions app/components/editor/writing-session-timer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,8 +89,8 @@ type WritingSessionTimerProps = {
enableMusicPlayer: boolean
focusMode: boolean
isMusicPlaying: boolean
setFocusMode: Dispatch<SetStateAction<boolean>>
setIsMusicPlaying: Dispatch<SetStateAction<boolean>>
setFocusMode: (state: boolean) => void
setIsMusicPlaying: (state: boolean) => void
setWritingSessionSettings: (settings: WritingSessionSettings) => void
setWritingSessionStatus: (status: WritingSessionStatus) => void
wordCount: number
Expand Down
31 changes: 30 additions & 1 deletion app/layouts/default.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
HelpDialog,
MainMenu,
SplashDialog,
WritingSessionTimer,
} from '~/components/editor'
import { ScrollArea } from '~/components/ui/scroll-area'
import { useKeyboardShortcuts } from '~/lib/hooks'
Expand All @@ -20,8 +21,12 @@ const DefaultLayout = ({ children }: { children: ReactNode }) => {
}

const {
focusMode,
setFocusMode,
helpOpen,
setHelpOpen,
isMusicPlaying,
setIsMusicPlaying,
mainMenuOpen,
setMainMenuOpen,
preferencesOpen,
Expand All @@ -30,21 +35,45 @@ const DefaultLayout = ({ children }: { children: ReactNode }) => {
splashOpen,
handleSplashOpen,
triggerGlobalShortcut,
wordCount,
writingSessionOpen,
setWritingSessionOpen,
writingSessionSettings,
setWritingSessionSettings,
setWritingSessionStatus,
} = useContext<AureliusProviderData>(AureliusContext)

useKeyboardShortcuts(shortcuts)

return (
<>
<ScrollArea className='w-screen h-screen relative'>
<section className='w-screen fixed top-0 left-0 z-10'>
<section className='w-screen fixed top-0 left-0 grid grid-cols-5 z-10'>
<div className='flex items-center justify-start p-4 gap-4'>
<MainMenu
mainMenuOpen={mainMenuOpen}
setMainMenuOpen={setMainMenuOpen}
triggerShortcut={triggerGlobalShortcut}
/>
</div>
<div className='col-span-3 bg-background p-4 flex items-center justify-center' />
<div className='flex items-center justify-end p-4'>
<WritingSessionTimer
enableMusicPlayer={!!settings?.enableMusicPlayer}
focusMode={focusMode}
isMusicPlaying={isMusicPlaying}
setFocusMode={setFocusMode}
setIsMusicPlaying={setIsMusicPlaying}
setWritingSessionOpen={setWritingSessionOpen}
setWritingSessionSettings={
setWritingSessionSettings
}
setWritingSessionStatus={setWritingSessionStatus}
wordCount={wordCount}
writingSessionOpen={writingSessionOpen}
writingSessionSettings={writingSessionSettings}
/>
</div>
</section>
<section className='flex h-full w-full flex-grow flex-col items-center justify-start z-9'>
<div className='flex h-full w-full flex-col items-center justify-start gap-6 px-4 pb-24 md:pb-16 lg:px-0 pt-32'>
Expand Down
31 changes: 30 additions & 1 deletion app/layouts/view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,19 @@ import {
HelpDialog,
MainMenu,
SplashDialog,
WritingSessionTimer,
} from '~/components/editor'
import { ScrollArea } from '~/components/ui/scroll-area'
import { AureliusContext, AureliusProviderData } from '~/lib/providers/aurelius'

const ViewLayout = ({ children }: { children: ReactNode }) => {
const {
focusMode,
setFocusMode,
helpOpen,
setHelpOpen,
isMusicPlaying,
setIsMusicPlaying,
mainMenuOpen,
setMainMenuOpen,
preferencesOpen,
Expand All @@ -23,19 +28,43 @@ const ViewLayout = ({ children }: { children: ReactNode }) => {
splashOpen,
handleSplashOpen,
triggerGlobalShortcut,
wordCount,
writingSessionOpen,
setWritingSessionOpen,
writingSessionSettings,
setWritingSessionSettings,
setWritingSessionStatus,
} = useContext<AureliusProviderData>(AureliusContext)

return (
<>
<ScrollArea className='w-screen h-screen relative'>
<section className='w-screen fixed top-0 left-0 z-10'>
<section className='w-screen fixed top-0 left-0 grid grid-cols-5 z-10'>
<div className='flex items-center justify-start p-4 gap-4'>
<MainMenu
mainMenuOpen={mainMenuOpen}
setMainMenuOpen={setMainMenuOpen}
triggerShortcut={triggerGlobalShortcut}
/>
</div>
<div className='col-span-3 bg-background p-4 flex items-center justify-center' />
<div className='flex items-center justify-end p-4'>
<WritingSessionTimer
enableMusicPlayer={!!settings?.enableMusicPlayer}
focusMode={focusMode}
isMusicPlaying={isMusicPlaying}
setFocusMode={setFocusMode}
setIsMusicPlaying={setIsMusicPlaying}
setWritingSessionOpen={setWritingSessionOpen}
setWritingSessionSettings={
setWritingSessionSettings
}
setWritingSessionStatus={setWritingSessionStatus}
wordCount={wordCount}
writingSessionOpen={writingSessionOpen}
writingSessionSettings={writingSessionSettings}
/>
</div>
</section>
<section className='flex h-full w-full flex-grow flex-col items-center justify-start z-9'>
<div className='flex h-full w-full flex-col items-center justify-start gap-6 px-4 pb-24 md:pb-16 lg:px-0 pt-32'>
Expand Down
27 changes: 27 additions & 0 deletions app/lib/providers/aurelius.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
createContext,
startTransition,
useEffect,
useRef,
useState,
} from 'react'
import { Timer, useTimer } from 'react-use-precision-timer'
Expand All @@ -29,8 +30,12 @@ export type AureliusProviderData = {
setContentId: (id: string) => void
effortId: string
setEffortId: (id: string) => void
focusMode: boolean
setFocusMode: (state: boolean) => void
helpOpen: boolean
setHelpOpen: (open: boolean) => void
isMusicPlaying: boolean
setIsMusicPlaying: (state: boolean) => void
latestPosts: ReadonlyArray<PostRow>
mainMenuOpen: boolean
setMainMenuOpen: (open: boolean) => void
Expand All @@ -41,6 +46,8 @@ export type AureliusProviderData = {
sessionTimer: Timer
settings: SettingsRow
triggerGlobalShortcut: (shortcutName: string) => void
wordCount: number
handleWordCountChange: (count: number) => void
writingSessionOpen: boolean
setWritingSessionOpen: (open: boolean) => void
writingSessionSettings: WritingSessionSettings
Expand All @@ -54,8 +61,12 @@ export const AureliusContext = createContext<AureliusProviderData>({
setContentId: () => {},
effortId: '',
setEffortId: () => {},
focusMode: false,
setFocusMode: () => {},
helpOpen: false,
setHelpOpen: () => {},
isMusicPlaying: false,
setIsMusicPlaying: () => {},
latestPosts: [],
mainMenuOpen: false,
setMainMenuOpen: () => {},
Expand All @@ -68,6 +79,8 @@ export const AureliusContext = createContext<AureliusProviderData>({
// @ts-expect-error: tradeoff between having this comment in multiple places or one place
settings: null,
triggerGlobalShortcut: (shortcutName: string) => {},
wordCount: 0,
handleWordCountChange: (count: number) => {},
writingSessionOpen: false,
setWritingSessionOpen: (open: boolean) => {},
// @ts-expect-error: tradeoff between having this comment in multiple places or one place
Expand Down Expand Up @@ -104,9 +117,13 @@ const AureliusProvider = ({ children }: AureliusProviderProps) => {
const { rows } = useQuery(settingsQuery)
const settings = rows[0]

const wordCountRef = useRef<number>(0)

const [contentId, setContentId] = useState<string>('')
const [effortId, setEffortId] = useState<string>('')
const [focusMode, setFocusMode] = useState(false)
const [helpOpen, setHelpOpen] = useState(false)
const [isMusicPlaying, setIsMusicPlaying] = useState(false)
const [latestPosts, setLatestPosts] = useState<ReadonlyArray<PostRow>>([])
const [mainMenuOpen, setMainMenuOpen] = useState(false)
const [preferencesOpen, setPreferencesOpen] = useState(false)
Expand Down Expand Up @@ -145,6 +162,10 @@ const AureliusProvider = ({ children }: AureliusProviderProps) => {
})
}

const handleWordCountChange = (count: number) => {
wordCountRef.current = count
}

const viewAllPosts = () => {
setMainMenuOpen(() => false)
startTransition(() => {
Expand All @@ -164,8 +185,12 @@ const AureliusProvider = ({ children }: AureliusProviderProps) => {
setContentId,
effortId,
setEffortId,
focusMode,
setFocusMode,
helpOpen,
setHelpOpen,
isMusicPlaying,
setIsMusicPlaying,
latestPosts,
mainMenuOpen,
setMainMenuOpen,
Expand All @@ -176,6 +201,8 @@ const AureliusProvider = ({ children }: AureliusProviderProps) => {
sessionTimer,
settings,
triggerGlobalShortcut,
wordCount: wordCountRef.current,
handleWordCountChange,
writingSessionOpen,
setWritingSessionOpen,
writingSessionSettings,
Expand Down

0 comments on commit 68198c5

Please sign in to comment.