Skip to content

Commit

Permalink
Make writing session and shortcut work from splash dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@0xi4o
0xi4o committed Aug 18, 2024
1 parent 617e452 commit 28eed6d
Show file tree
Hide file tree
Showing 4 changed files with 105 additions and 54 deletions.
19 changes: 6 additions & 13 deletions app/components/common/editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ import {
EditorShortcuts,
EditorToolbarMode,
MusicChannels,
WritingSessionSettings,
WritingSessionStatus,
} from '~/lib/types'

Expand All @@ -66,8 +65,6 @@ const Editor = ({
[EditorShortcuts.FORCE_SAVE]: () => forceSave(),
[EditorShortcuts.RESET_EDITOR]: () =>
setResetEditorOpen(!resetEditorOpen),
[EditorShortcuts.WRITING_SESSION]: () =>
setWritingSessionOpen(!writingSessionOpen),
}

const [editorData, setEditorData, forceSave] = useAutoSave({
Expand All @@ -91,6 +88,12 @@ const Editor = ({
handleSplashOpen,
settings,
triggerGlobalShortcut,
writingSessionOpen,
setWritingSessionOpen,
writingSessionSettings,
setWritingSessionSettings,
writingSessionStatus,
setWritingSessionStatus,
} = useContext<AureliusProviderData>(AureliusContext)

useKeyboardShortcuts(shortcuts)
Expand All @@ -104,16 +107,6 @@ const Editor = ({
data.title.trim() === ''
)
const [resetEditorOpen, setResetEditorOpen] = useState(false)
const [writingSessionOpen, setWritingSessionOpen] = useState(false)
const [writingSessionSettings, setWritingSessionSettings] =
useState<WritingSessionSettings>({
targetDuration: 30,
focusMode: true,
music: !!settings?.enableMusicPlayer,
notifyOnTargetDuration: true,
})
const [writingSessionStatus, setWritingSessionStatus] =
useState<WritingSessionStatus>(WritingSessionStatus.NOT_STARTED)

const editor = useEditor({
content: editorData.content,
Expand Down
88 changes: 50 additions & 38 deletions app/components/editor/splash-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
import {
CircleHelpIcon,
FileTextIcon,
ListIcon,
PencilIcon,
RefreshCcwIcon,
SettingsIcon,
TimerIcon,
} from 'lucide-react'
Expand Down Expand Up @@ -86,7 +89,7 @@ const SplashDialog = ({

return (
<Dialog onOpenChange={setSplashOpen} open={splashOpen}>
<DialogContent className='flex max-w-none w-[32rem] p-0 [&>button]:z-10'>
<DialogContent className='flex max-w-none w-[48rem] p-0 [&>button]:z-10'>
<VisuallyHidden>
<DialogHeader>
<DialogTitle>Splash Dialog</DialogTitle>
Expand All @@ -109,7 +112,7 @@ const SplashDialog = ({
alt='Aurelius Logo'
/>
</div>
<div className='grid grid-cols-1 w-full min-h-[20rem] h-auto flex-1 flex-grow py-8 pl-8 pr-4 gap-x-12 gap-y-4'>
<div className='grid grid-cols-2 w-full min-h-[20rem] h-auto flex-1 flex-grow py-8 pl-8 pr-4 gap-x-12 gap-y-4'>
<div className='col-span-1 py-2 flex flex-col'>
<h3 className='text-sm font-semibold text-foreground mb-4'>
Getting Started
Expand Down Expand Up @@ -157,6 +160,50 @@ const SplashDialog = ({
)}
/>
</li>
<li className='w-full flex items-center justify-between'>
<Link className='w-full' to='/dashboard'>
<SplashDialogButton
icon={
<ListIcon className='mr-2 w-4 h-4' />
}
label='See all posts'
onClick={() =>
triggerShortcut(
EditorShortcuts.VIEW_ALL_POSTS
)
}
shortcut={getShortcutWithModifiers(
allShortcuts[
EditorShortcuts
.VIEW_ALL_POSTS
].key,
allShortcuts[
EditorShortcuts
.VIEW_ALL_POSTS
].modifiers
)}
/>
</Link>
</li>
</ul>
</div>
<div className='col-span-1 py-2 flex flex-col'>
<h3 className='text-sm font-semibold text-foreground mb-4'>
Continue
</h3>
<ul className='w-full text-sm flex flex-col gap-2'>
<li className='w-full flex items-center justify-between'>
<SplashDialogButton
icon={
<PencilIcon className='mr-2 w-4 h-4' />
}
label='Continue Writing'
/>
</li>
</ul>
</div>
<div className='col-span-1 py-2 flex flex-col'>
<ul className='text-sm flex flex-col gap-2'>
<li className='w-full flex items-center justify-between'>
<SplashDialogButton
icon={
Expand All @@ -180,41 +227,6 @@ const SplashDialog = ({
</li>
</ul>
</div>
{/*<div className='col-span-1 py-2 flex flex-col'>*/}
{/* <h3 className='text-sm font-semibold text-foreground mb-4'>*/}
{/* Previous Session*/}
{/* </h3>*/}
{/* <ul className='w-full text-sm flex flex-col gap-2'>*/}
{/* <li className='w-full flex items-center justify-between'>*/}
{/* <SplashDialogButton*/}
{/* icon={*/}
{/* <PencilIcon className='mr-2 w-4 h-4' />*/}
{/* }*/}
{/* label='Continue Writing'*/}
{/* />*/}
{/* </li>*/}
{/* <li className='w-full flex items-center justify-between'>*/}
{/* <Link className='w-full' to='/dashboard'>*/}
{/* <SplashDialogButton*/}
{/* icon={*/}
{/* <RefreshCcwIcon className='mr-2 w-4 h-4' />*/}
{/* }*/}
{/* label='Resume Writing Session'*/}
{/* />*/}
{/* </Link>*/}
{/* </li>*/}
{/* <li className='w-full flex items-center justify-between'>*/}
{/* <Link className='w-full' to='/dashboard'>*/}
{/* <SplashDialogButton*/}
{/* icon={*/}
{/* <ListIcon className='mr-2 w-4 h-4' />*/}
{/* }*/}
{/* label='See all posts'*/}
{/* />*/}
{/* </Link>*/}
{/* </li>*/}
{/* </ul>*/}
{/*</div>*/}
<div className='col-span-1 py-2 flex flex-col'>
<ul className='text-sm flex flex-col gap-2'>
<li className='w-full flex items-center justify-between'>
Expand All @@ -239,7 +251,7 @@ const SplashDialog = ({
</ul>
</div>
<div className='col-span-1' />
<div className='col-span-1 flex flex-col'>
<div className='col-span-2 flex flex-col'>
<p className='leading-relaxed italic text-xs text-foreground'>
Note: All your data will be saved locally in the
browser.{' '}
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 @@ -90,8 +90,8 @@ type WritingSessionTimerProps = {
isMusicPlaying: boolean
setFocusMode: Dispatch<SetStateAction<boolean>>
setIsMusicPlaying: Dispatch<SetStateAction<boolean>>
setWritingSessionSettings: Dispatch<SetStateAction<WritingSessionSettings>>
setWritingSessionStatus: Dispatch<SetStateAction<WritingSessionStatus>>
setWritingSessionSettings: (settings: WritingSessionSettings) => void
setWritingSessionStatus: (status: WritingSessionStatus) => void
wordCount: number
writingSessionSettings: WritingSessionSettings
} & WritingSessionDialogProps
Expand Down
48 changes: 47 additions & 1 deletion app/lib/providers/aurelius.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@ import { useNavigate } from '@remix-run/react'
import { useQuery } from '@evolu/react'
import { ROUTES } from '~/lib/constants'
import { useKeyboardShortcuts } from '~/lib/hooks'
import { EditorShortcuts } from '~/lib/types'
import {
EditorShortcuts,
WritingSessionSettings,
WritingSessionStatus,
} from '~/lib/types'
import { SettingsRow, settingsQuery } from '~/services/evolu/client'

export type AureliusProviderData = {
Expand All @@ -21,6 +25,12 @@ export type AureliusProviderData = {
sessionTimer: Timer
settings: SettingsRow
triggerGlobalShortcut: (shortcutName: string) => void
writingSessionOpen: boolean
setWritingSessionOpen: (open: boolean) => void
writingSessionSettings: WritingSessionSettings
setWritingSessionSettings: (settings: WritingSessionSettings) => void
writingSessionStatus: WritingSessionStatus
setWritingSessionStatus: (status: WritingSessionStatus) => void
}

export const AureliusContext = createContext<AureliusProviderData>({
Expand All @@ -37,6 +47,13 @@ export const AureliusContext = createContext<AureliusProviderData>({
// @ts-expect-error: tradeoff between having this comment in multiple places or one place
settings: null,
triggerGlobalShortcut: (shortcutName: string) => {},
writingSessionOpen: false,
setWritingSessionOpen: (open: boolean) => {},
// @ts-expect-error: tradeoff between having this comment in multiple places or one place
writingSessionSettings: null,
setWritingSessionSettings: (settings: WritingSessionSettings) => {},
writingSessionStatus: WritingSessionStatus.NOT_STARTED,
setWritingSessionStatus: (status: WritingSessionStatus) => {},
})

type AureliusProviderProps = {
Expand All @@ -51,6 +68,11 @@ const AureliusProvider = ({ children }: AureliusProviderProps) => {
[EditorShortcuts.PREFERENCES]: () =>
handlePreferencesOpen(!preferencesOpen),
[EditorShortcuts.SPLASH_DIALOG]: () => handleSplashOpen(!splashOpen),
[EditorShortcuts.VIEW_ALL_POSTS]: () => viewAllPosts(),
[EditorShortcuts.VIEW_ALL_WRITING_SESSIONS]: () =>
viewAllWritingSessions(),
[EditorShortcuts.WRITING_SESSION]: () =>
setWritingSessionOpen(!writingSessionOpen),
}

const { triggerShortcut: triggerGlobalShortcut } =
Expand All @@ -65,6 +87,16 @@ const AureliusProvider = ({ children }: AureliusProviderProps) => {
const [mainMenuOpen, setMainMenuOpen] = useState(false)
const [preferencesOpen, setPreferencesOpen] = useState(false)
const [splashOpen, setSplashOpen] = useState(!!settings?.showSplashDialog)
const [writingSessionOpen, setWritingSessionOpen] = useState(false)
const [writingSessionSettings, setWritingSessionSettings] =
useState<WritingSessionSettings>({
targetDuration: 30,
focusMode: true,
music: !!settings?.enableMusicPlayer,
notifyOnTargetDuration: true,
})
const [writingSessionStatus, setWritingSessionStatus] =
useState<WritingSessionStatus>(WritingSessionStatus.NOT_STARTED)

const sessionTimer = useTimer()

Expand All @@ -85,6 +117,14 @@ const AureliusProvider = ({ children }: AureliusProviderProps) => {
})
}

const viewAllPosts = () => {
navigate(ROUTES.VIEW.POSTS)
}

const viewAllWritingSessions = () => {
navigate(ROUTES.VIEW.WRITING_SESSIONS)
}

const data: AureliusProviderData = {
helpOpen,
setHelpOpen,
Expand All @@ -97,6 +137,12 @@ const AureliusProvider = ({ children }: AureliusProviderProps) => {
sessionTimer,
settings,
triggerGlobalShortcut,
writingSessionOpen,
setWritingSessionOpen,
writingSessionSettings,
setWritingSessionSettings,
writingSessionStatus,
setWritingSessionStatus,
}

return (
Expand Down

0 comments on commit 28eed6d

Please sign in to comment.