@chem-po/react-web 0.0.51 → 0.0.53

package/src/components/feed/context.tsx

@@ -1,19 +0,0 @@
-import { AnyObject, WithId } from '@chem-po/core'
-import React, { createContext, PropsWithChildren, useContext, useMemo } from 'react'
-
-interface MediaFeedContextValue<T extends AnyObject = AnyObject> {
-  curr: WithId<T> | null
-}
-export const MediaFeedContext = createContext<MediaFeedContextValue<any>>(
-  {} as MediaFeedContextValue<any>,
-)
-
-export const MediaFeedProvider = <T extends AnyObject = AnyObject>({
-  curr,
-  children,
-}: PropsWithChildren<{ curr: WithId<T> | null }>) => {
-  const contextData = useMemo(() => ({ curr }), [curr])
-  return <MediaFeedContext.Provider value={contextData}>{children}</MediaFeedContext.Provider>
-}
-export const useMediaFeed = <T extends AnyObject = AnyObject>() =>
-  useContext(MediaFeedContext) as MediaFeedContextValue<T>

package/src/components/feed/hooks.ts

@@ -1,290 +0,0 @@
-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

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

package/src/components/feed/types.ts

@@ -1,50 +0,0 @@
-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

@@ -1,26 +0,0 @@
-import React, { 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

@@ -1,39 +0,0 @@
-import { InputRef } from '@chem-po/core'
-import React, { 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)