webapp/src/context/profile.tsx

import type { Author, ProfileInput } from '../graphql/schema/core.gen'

import { AuthToken } from '@authorizerdev/authorizer-js'
import { Accessor, JSX, createContext, createEffect, createSignal, on, useContext } from 'solid-js'
import { createStore } from 'solid-js/store'
import updateAuthorMuatation from '~/graphql/mutation/core/author-update'
import { useAuthors } from './authors'
import { useGraphQL } from './graphql'
import { useSession } from './session'

type ProfileContextType = {
  author: Accessor<Author>
  setAuthor: (a: Author) => void
  form: ProfileInput
  setForm: (profile: ProfileInput) => void
  submit: (profile: ProfileInput) => Promise<void>
  updateFormField: (fieldName: string, value: string, remove?: boolean) => void
}

const ProfileContext = createContext<ProfileContextType>({} as ProfileContextType)

export function useProfile() {
  return useContext(ProfileContext)
}

const userpicUrl = (userpic: string) => {
  if (userpic?.includes('assets.discours.io')) {
    return userpic.replace('100x', '500x500')
  }
  return userpic
}

export const ProfileProvider = (props: { children: JSX.Element }) => {
  const { session } = useSession()
  const { mutation } = useGraphQL()
  const { addAuthor } = useAuthors()
  const [form, setForm] = createStore<ProfileInput>({} as ProfileInput)
  const [author, setAuthor] = createSignal<Author>({} as Author)

  // when session is loaded
  createEffect(
    on(
      () => session(),
      (s: AuthToken | undefined) => {
        if (s) {
          const profile = s?.user?.app_data?.profile
          if (profile?.id) {
            setAuthor(profile)
            addAuthor(profile)
          }
        }
      },
      { defer: true }
    )
  )

  const submit = async (profile: ProfileInput) => {
    const response = await mutation(updateAuthorMuatation, profile).toPromise()
    if (response.error) {
      console.error(response.error)
      throw response.error
    }
  }

  createEffect(() => {
    if (author()) {
      const currentAuthor = author()
      setForm({
        name: currentAuthor.name,
        slug: currentAuthor.slug,
        bio: currentAuthor.bio,
        about: currentAuthor.about,
        pic: userpicUrl(currentAuthor.pic || ''),
        links: currentAuthor.links
      })
    }
  })

  const updateFormField = (fieldName: string, value: string, remove?: boolean) => {
    if (fieldName === 'links') {
      setForm((prev) => {
        const updatedLinks = remove
          ? (prev.links || []).filter((item) => item !== value)
          : [...(prev.links || []), value]
        return { ...prev, links: updatedLinks }
      })
    } else {
      setForm((prev) => ({ ...prev, [fieldName]: value }))
    }
  }

  const value: ProfileContextType = {
    author,
    setAuthor,
    form,
    submit,
    updateFormField,
    setForm
  }

  return <ProfileContext.Provider value={value}>{props.children}</ProfileContext.Provider>
}