@chem-po/react-web 0.0.5 → 0.0.6

package/src/components/feed/hooks.ts

@@ -0,0 +1,290 @@
+import { useToast } from '@chakra-ui/react'
+import { FetchFeedFunction } from '@chem-po/core'
+import { useAuth } from '@chem-po/react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { UpdatePanelsArgs } from './types'
+
+const DEFAULT_LIMIT = 10
+export const useMediaFeed = (
+  fetch: FetchFeedFunction,
+  onUpdatePanels: (items: UpdatePanelsArgs) => void,
+  limit: number = DEFAULT_LIMIT,
+  authRequired = false,
+) => {
+  // first element is prev ids, second element is curr ids, third element is next ids
+  const [ids, setIds] = useState<[string[] | null, string[] | null, string[] | null]>([
+    null,
+    null,
+    null,
+  ])
+  const [idIdx, setIdIdx] = useState<number>(0)
+  const user = useAuth(s => s.user)
+
+  const [loading, setLoading] = useState(false)
+  const [refreshing, setRefreshing] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [itemLoading, setItemLoading] = useState(false)
+  const [direction, setDirection] = useState<'next' | 'prev' | null>(null)
+
+  const toast = useToast()
+
+  const fetchingId = useRef<string | null>(null)
+
+  const idsRef = useRef<{ prev: string | null; curr: string | null; next: string | null }>({
+    prev: null,
+    curr: null,
+    next: null,
+  })
+
+  const updateCurr = useCallback(
+    (id: string | null) => {
+      if (id) {
+        if (idsRef.current.prev === id) {
+          idsRef.current.prev = null
+        }
+        if (idsRef.current.next === id) {
+          idsRef.current.next = null
+        }
+      }
+      idsRef.current.curr = id
+      onUpdatePanels({ ...idsRef.current })
+    },
+    [onUpdatePanels],
+  )
+
+  const updateNext = useCallback(
+    (id: string | null) => {
+      if (id) {
+        if (idsRef.current.prev === id) {
+          idsRef.current.prev = null
+        }
+        if (idsRef.current.curr === id) {
+          idsRef.current.curr = null
+        }
+      }
+      idsRef.current.next = id
+      onUpdatePanels({ ...idsRef.current })
+    },
+    [onUpdatePanels],
+  )
+
+  const updatePrev = useCallback(
+    (id: string | null) => {
+      if (id) {
+        if (idsRef.current.curr === id) {
+          idsRef.current.curr = null
+        }
+        if (idsRef.current.next === id) {
+          idsRef.current.next = null
+        }
+      }
+      idsRef.current.prev = id
+      onUpdatePanels({ ...idsRef.current })
+    },
+    [onUpdatePanels],
+  )
+
+  const fetchIds = useCallback(
+    async (
+      startBefore: string | null,
+      startAfter: string | null,
+      isPrefetch: boolean,
+    ): Promise<string[]> => {
+      if (!user && authRequired) return []
+      if (!isPrefetch) setLoading(true)
+
+      try {
+        const data = await fetch({ limit, startAfter, startBefore })
+        if (!isPrefetch) {
+          const firstId = data.ids[0]
+          const secondId = data.ids[1] || null
+          updateCurr(firstId)
+          updateNext(secondId)
+          updatePrev(startAfter)
+          if (startAfter) {
+            setIds(s => [s[1], data.ids, null])
+          } else if (startBefore) {
+            setIds(s => [null, data.ids, s[1]])
+          } else {
+            setIds([null, data.ids, null])
+          }
+          const newLastId = data.ids[data.ids.length - 1]
+          if (newLastId) {
+            fetchIds(null, newLastId, true)
+          }
+        } else if (startAfter) {
+          setIds(s => [s[0], s[1], data.ids])
+        } else if (startBefore) {
+          setIds(s => [data.ids, s[1], s[2]])
+        }
+        setLoading(false)
+        return data.ids || []
+      } catch (err: any) {
+        setError(err.message)
+        toast({
+          title: 'Error fetching feed',
+          description: err.message,
+          status: 'error',
+          duration: 9000,
+          isClosable: true,
+        })
+      }
+      setLoading(false)
+      return []
+    },
+    [fetch, toast, user, authRequired, updateCurr, updateNext, updatePrev, limit],
+  )
+
+  // handles prefetching of next items
+  const getNextId = useCallback(
+    async (currIdx: number, isPrefetch: boolean): Promise<{ id: string; idx: number } | null> => {
+      const currIds = ids[1] ?? []
+      const nextIds = ids[2] ?? []
+      const nextIdx = currIdx + 1
+      if (nextIdx < currIds.length) {
+        return { id: currIds[nextIdx], idx: nextIdx }
+      }
+      if (nextIds[0]) {
+        const newLastId = nextIds[nextIds.length - 1]
+        if (!isPrefetch) {
+          setIds(s => [s[1], s[2], null])
+          fetchIds(null, newLastId, true)
+        }
+        return { id: nextIds[0], idx: 0 }
+      }
+      const fetchedNextIds = await fetchIds(null, currIds[currIds.length - 1], isPrefetch)
+      const fetchedNextId = fetchedNextIds[0]
+      return fetchedNextId ? { id: fetchedNextId, idx: 0 } : null
+    },
+    [ids, fetchIds],
+  )
+
+  const getPrevId = useCallback(
+    async (currIdx: number, isPrefetch: boolean): Promise<{ id: string; idx: number } | null> => {
+      const currIds = ids[1] ?? []
+      const prevIds = ids[0] ?? []
+      const prevIdx = currIdx - 1
+      if (prevIdx >= 0) {
+        return { id: currIds[prevIdx], idx: prevIdx }
+      }
+      if (prevIds[prevIds.length - 1]) {
+        const newFirstId = prevIds[0]
+        if (!isPrefetch) {
+          setIds([null, ids[0], ids[1]])
+          fetchIds(newFirstId, null, true)
+        }
+        return { id: prevIds[prevIds.length - 1], idx: prevIds.length - 1 }
+      }
+      const fetchedPrevIds = await fetchIds(currIds[0], null, isPrefetch)
+      const fetchedPrevId = fetchedPrevIds[fetchedPrevIds.length - 1]
+      return fetchedPrevId ? { id: fetchedPrevId, idx: fetchedPrevIds.length - 1 } : null
+    },
+    [ids, fetchIds],
+  )
+
+  const goNext = useCallback(async () => {
+    if (itemLoading) return
+    // case 1: next item ID is fetched
+    const newPrev = idsRef.current.curr
+
+    setItemLoading(true)
+    const nextIdData = await getNextId(idIdx, false)
+    setDirection('next')
+    if (nextIdData) {
+      const { id: nextId, idx: nextIdx } = nextIdData
+      fetchingId.current = nextId
+      setIdIdx(nextIdx)
+      updateCurr(nextId)
+      updateNext(null)
+      updatePrev(newPrev)
+      getNextId(nextIdx, true).then(newNextId => updateNext(newNextId?.id ?? null))
+    } else {
+      toast({
+        title: 'No more items',
+        status: 'info',
+        duration: 3000,
+        isClosable: true,
+      })
+    }
+    setItemLoading(false)
+  }, [idIdx, getNextId, updateCurr, updateNext, updatePrev, toast, itemLoading])
+
+  const goPrev = useCallback(async () => {
+    if (itemLoading) return
+    // case 1: next item ID is fetched
+    const newNext = idsRef.current.curr
+
+    setDirection('prev')
+    setItemLoading(true)
+    const prevIdData = await getPrevId(idIdx, false)
+    if (prevIdData) {
+      const { id: prevId, idx: prevIdx } = prevIdData
+      fetchingId.current = prevId
+      setIdIdx(prevIdx)
+      updateCurr(prevId)
+      updatePrev(null)
+      updateNext(newNext)
+      getPrevId(prevIdx, true).then(newPrevId => updatePrev(newPrevId?.id ?? null))
+    } else {
+      toast({
+        title: 'No more items',
+        status: 'info',
+        duration: 3000,
+        isClosable: true,
+      })
+    }
+    setItemLoading(false)
+  }, [idIdx, getPrevId, updateCurr, updateNext, updatePrev, toast, itemLoading])
+
+  const refresh = useCallback(async () => {
+    setLoading(true)
+    setRefreshing(true)
+    setIds([null, null, null])
+    updateCurr(null)
+    updateNext(null)
+    updatePrev(null)
+    setDirection(null)
+    setIdIdx(0)
+    await fetchIds(null, null, false)
+    setRefreshing(false)
+  }, [fetchIds, updateCurr, updateNext, updatePrev])
+
+  const [initFetchIds] = useState(() => fetchIds)
+  useEffect(() => {
+    initFetchIds(null, null, false)
+  }, [initFetchIds])
+
+  const canGoPrev = useMemo(() => (idIdx > 0 && !!ids[1]?.length) || !!ids[0]?.length, [ids, idIdx])
+  const canGoNext = useMemo(
+    () => (ids[1] && idIdx < ids[1].length) ?? !!ids[2]?.length,
+    [ids, idIdx],
+  )
+  return useMemo(
+    () => ({
+      ids,
+      goNext,
+      goPrev,
+      error,
+      refresh,
+      refreshing,
+      loading,
+      canGoNext,
+      direction,
+      canGoPrev,
+      itemLoading,
+    }),
+    [
+      ids,
+      goNext,
+      goPrev,
+      loading,
+      error,
+      itemLoading,
+      canGoNext,
+      canGoPrev,
+      refresh,
+      refreshing,
+      direction,
+    ],
+  )
+}

package/src/components/feed/index.ts

@@ -0,0 +1,2 @@
+export { useMediaFeed } from './context'
+export * from './MediaFeed'

package/src/components/feed/types.ts

@@ -0,0 +1,50 @@
+import { AnyObject, FetchFeedFunction, FileValue, WithId } from '@chem-po/core'
+import { JSX } from 'react'
+
+export type GetBackgroundUrl<T extends AnyObject = AnyObject> = (
+  item: T,
+) => string | null | undefined
+export type GetBackgroundValue<T extends AnyObject = AnyObject> = (
+  item: T,
+) => FileValue | null | undefined
+export interface MediaFeedProps<T extends AnyObject = AnyObject> {
+  collection: string
+  fetch: FetchFeedFunction
+  authRequired?: boolean
+  limit?: number
+  // onSwipeUp?: () => void
+  swipeDisabled?: boolean
+  defaultBackground?: string
+  getBackgroundUrl?: GetBackgroundUrl<T>
+  getBackgroundValue?: GetBackgroundValue<T>
+  RenderItem: (item: WithId<T>) => JSX.Element
+}
+
+export type UseMediaFeedProps = Pick<MediaFeedProps, 'collection' | 'fetch'>
+
+export interface UseMediaFeed<T extends AnyObject = AnyObject> {
+  ids: string[][]
+  goNext: () => void
+  goPrev: () => void
+  error: string | null
+  loading: boolean
+  itemLoading: boolean
+  currItem: WithId<T> | null
+}
+export type SwipeDirection = 'next' | 'prev'
+export interface UpdatePanelsArgs {
+  prev: string | null
+  curr: string | null
+  next: string | null
+}
+
+export type PanelStatus = 'current' | 'next' | 'prev'
+
+export interface MediaBackgroundRef<T extends AnyObject> {
+  onNewData: (data: WithId<T> | null) => void
+}
+export interface PanelData {
+  id: string
+  status: PanelStatus
+  prevStatus?: PanelStatus
+}

package/src/components/form/Condition.tsx

@@ -0,0 +1,26 @@
+import { PropsWithChildren, useMemo } from 'react'
+import { useWatch } from 'react-hook-form'
+import { ExpandOnMount } from '../box'
+
+export const Condition = ({
+  path,
+  condition,
+  children,
+}: PropsWithChildren<{
+  path: string
+  condition: (values: any) => boolean
+}>) => {
+  // const { register } = useFormContext()
+  // const {
+  //   input: { value },
+  // } = useField(path ?? '', { subscription: { value: true } })
+  const value = useWatch({ exact: true, name: path })
+  const isVisible = useMemo(() => condition(value), [value, condition])
+
+  if (!isVisible) return null
+  return (
+    <ExpandOnMount py="3px" animateOpacity in>
+      {children}
+    </ExpandOnMount>
+  )
+}

package/src/components/form/Field.tsx

@@ -0,0 +1,39 @@
+import { InputRef } from '@chem-po/core'
+import { ForwardedRef, forwardRef } from 'react'
+
+import { Field, useField } from '@chem-po/react'
+import { ChangeHandler, Controller } from 'react-hook-form'
+import { Input } from './input/input'
+
+const FieldComponentBase = (
+  { field, name }: { field: Field; name: string },
+  ref: ForwardedRef<InputRef>,
+) => {
+  const { control, getOnChange, meta, onFocus, onBlur: fieldBlur } = useField(name, field)
+  return (
+    <Controller<Field['defaultValue']>
+      control={control}
+      name={name}
+      render={({ field: { name: _, ref: _r, onBlur, ...inputProps } }) => {
+        return (
+          <Input
+            ref={ref}
+            field={field}
+            input={{
+              ...inputProps,
+              onFocus,
+              onBlur: () => {
+                fieldBlur()
+                onBlur()
+              },
+              onChange: getOnChange(inputProps.onChange as ChangeHandler),
+            }}
+            meta={meta}
+          />
+        )
+      }}
+    />
+  )
+}
+
+export const FieldComponent = forwardRef(FieldComponentBase)