Skip to content

Commit

Permalink
💄 Global spinner
Browse files Browse the repository at this point in the history
  • Loading branch information
@homostellaris
homostellaris committed Aug 12, 2024
1 parent df543f4 commit 69388b7
Show file tree
Hide file tree
Showing 3 changed files with 121 additions and 61 deletions.
2 changes: 1 addition & 1 deletion components/demo/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import Planets from '../common/Planets'
import Events from '../todos/Events'
import useTodos from '../todos/useTodos'

export default function App() {
export default function Demo() {
const [todos, _] = useTodos()
const [eventsExpanded] = useKeyboardShortcuts()

Expand Down
176 changes: 118 additions & 58 deletions components/pages/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,11 @@ import {
RefObject,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react'
import { Header } from '../common/Header'
import { db, Todo } from '../db'
import NoteProviders from '../notes/providers'
import useSettings from '../settings/useSettings'
Expand All @@ -59,9 +61,22 @@ import { SelectedTodoProvider } from '../todos/SelectedTodo'
import { useTodoActionSheet } from '../todos/TodoActionSheet'
import { useCreateTodoModal } from '../todos/create/useCreateTodoModal'
import useView, { ViewProvider } from '../view'
import { Header } from '../common/Header'

const Home = () => {
const [ready, setReady] = useState<{
log: boolean
important: boolean
icebox: boolean
}>({
log: false,
important: false,
icebox: false,
})
const isLoading = useMemo(
() => Object.values(ready).some(ready => ready === false),
[ready],
)

const [logLimit, setLogLimit] = useState(7)
const [iceboxLimit, setIceboxLimit] = useState(30)

Expand Down Expand Up @@ -106,48 +121,64 @@ const Home = () => {
fullscreen
ref={contentRef}
>
{
<>
<IonInfiniteScroll
className="h-1"
disabled={!enablePagination}
position="top"
threshold="0px"
onIonInfinite={event => {
setLogLimit(limit => limit + 10)
setTimeout(() => event.target.complete(), 500)
}}
>
<IonInfiniteScrollContent></IonInfiniteScrollContent>
</IonInfiniteScroll>
<SelectedTodoProvider>
<Log limit={logLimit} />
<Important />
<Icebox limit={iceboxLimit} />
</SelectedTodoProvider>
<IonInfiniteScroll
disabled={!enablePagination}
position="bottom"
threshold="0px"
onIonInfinite={event => {
setIceboxLimit(limit => limit + 10)
setTimeout(() => event.target.complete(), 500)
}}
>
<IonInfiniteScrollContent></IonInfiniteScrollContent>
</IonInfiniteScroll>
<IonFab
ref={fab}
slot="fixed"
vertical="bottom"
horizontal="end"
>
<IonFabButton onClick={openCreateTodoModal}>
<IonIcon icon={add}></IonIcon>
</IonFabButton>
</IonFab>
</>
}
{isLoading && (
<div className="flex items-center justify-center h-full">
<IonSpinner
className="w-20 h-20"
name="dots"
/>
</div>
)}
<>
<IonInfiniteScroll
className="h-1"
disabled={!enablePagination}
position="top"
threshold="0px"
onIonInfinite={event => {
setLogLimit(limit => limit + 10)
setTimeout(() => event.target.complete(), 500)
}}
>
<IonInfiniteScrollContent></IonInfiniteScrollContent>
</IonInfiniteScroll>
<SelectedTodoProvider>
<Log
limit={logLimit}
onLoad={() => setReady(state => ({ ...state, log: true }))}
/>
<Important
onLoad={() =>
setReady(state => ({ ...state, important: true }))
}
/>
<Icebox
limit={iceboxLimit}
onLoad={() => setReady(state => ({ ...state, icebox: true }))}
/>
</SelectedTodoProvider>
<IonInfiniteScroll
disabled={!enablePagination}
position="bottom"
threshold="0px"
onIonInfinite={event => {
setIceboxLimit(limit => limit + 10)
setTimeout(() => event.target.complete(), 500)
}}
>
<IonInfiniteScrollContent></IonInfiniteScrollContent>
</IonInfiniteScroll>
<IonFab
ref={fab}
slot="fixed"
vertical="bottom"
horizontal="end"
>
<IonFabButton onClick={openCreateTodoModal}>
<IonIcon icon={add}></IonIcon>
</IonFabButton>
</IonFab>
</>
</IonContent>
<IonFooter>
<IonToolbar>
Expand Down Expand Up @@ -403,8 +434,15 @@ export const ViewMenu = () => {
)
}

export const Log = ({ limit }: { limit: number }) => {
export const Log = ({
limit,
onLoad,
}: {
limit: number
onLoad: () => void
}) => {
const { inActiveStarRoles, query } = useView()

const todos = useLiveQuery(async () => {
console.debug('re-running log query')
return db.todos
Expand All @@ -420,17 +458,21 @@ export const Log = ({ limit }: { limit: number }) => {
.toArray()
}, [inActiveStarRoles, limit, query])

useEffect(() => {
if (todos !== undefined) {
console.log('READY')
onLoad()
}
}, [todos])

const [present] = useTodoActionSheet()

if (todos === undefined) return null

return (
<>
<h1>Log</h1>
{todos === undefined ? (
<IonSpinner
className="w-7 h-7"
name="dots"
/>
) : todos.length ? (
{todos?.length ? (
<IonList inset>
{todos.sort(byDate).map(todo => (
<IonItem
Expand Down Expand Up @@ -481,8 +523,9 @@ export const Log = ({ limit }: { limit: number }) => {
)
}

export const Important = () => {
export const Important = ({ onLoad }: { onLoad: () => void }) => {
const { inActiveStarRoles, query } = useView()

const importantList = useLiveQuery(() => db.lists.get('#important'))
const todos = useLiveQuery(async () => {
console.debug('re-running important query')
Expand All @@ -491,19 +534,23 @@ export const Important = () => {
todo => matchesQuery(query, todo!) && inActiveStarRoles(todo!),
) as Todo[]
}, [importantList, inActiveStarRoles, query])

const starRoles = useLiveQuery(() => db.starRoles.toArray())

useEffect(() => {
if (todos !== undefined) {
setTimeout(onLoad, 2000)
}
}, [todos])

const [present] = useTodoActionSheet()

if (todos === undefined) return null

return (
<>
<h1>Important</h1>
{importantList === undefined || todos === undefined ? (
<IonSpinner
className="w-20 h-20"
name="dots"
/>
) : todos.length ? (
{todos?.length && importantList ? (
<IonList inset>
<IonReorderGroup
disabled={false}
Expand Down Expand Up @@ -624,8 +671,15 @@ export const Important = () => {
)
}

export const Icebox = ({ limit }: { limit: number }) => {
export const Icebox = ({
limit,
onLoad,
}: {
limit: number
onLoad: () => void
}) => {
const { inActiveStarRoles, query } = useView()

const todos = useLiveQuery(async () => {
console.debug('re-running icebox query')
const importantList = await db.lists.get('#important')
Expand All @@ -643,6 +697,10 @@ export const Icebox = ({ limit }: { limit: number }) => {
.toArray()
}, [limit, inActiveStarRoles, query])

useEffect(() => {
if (todos !== undefined) onLoad()
}, [todos])

const [present] = useTodoActionSheet()
const onClick = useCallback(
todo => {
Expand Down Expand Up @@ -692,6 +750,8 @@ export const Icebox = ({ limit }: { limit: number }) => {
[present],
)

if (todos === undefined) return null

return (
<>
<IonGrid>
Expand Down
4 changes: 2 additions & 2 deletions pages/app-demo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import App from 'next/app'
import Demo from '../components/demo'

export default function AppDemo() {
// useEffect(setupAnimations, [])
Expand All @@ -7,7 +7,7 @@ export default function AppDemo() {
// const mostImportantTodo = todos[todos.length - 1]
// mostImportantTodo.scrollIntoView()
// }, [])
return <App />
return <Demo />
}

function setupAnimations() {
Expand Down

0 comments on commit 69388b7

Please sign in to comment.