File size: 3,198 Bytes
5240c42
81969cf
5240c42
6233641
 
5033071
5240c42
5033071
03138b9
5033071
6233641
 
81969cf
 
 
 
 
 
 
 
0891679
81969cf
5240c42
 
 
848e268
6233641
 
 
 
 
848e268
6233641
 
5033071
 
6233641
 
 
 
 
03138b9
6233641
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
03138b9
6233641
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5240c42
5033071
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
81969cf
 
 
6233641
 
5033071
 
 
81969cf
5240c42
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
import { useMemo, useState } from "react"
import { useQuery, useQueryClient } from "@tanstack/react-query"

import { Collection, Image } from "@/utils/type"
import { useUser } from "@/utils/useUser"
import { useUpdateEffect } from "react-use"

export const useCollection = (initialId ?: string) => {
  const { user, token } = useUser()
  const [id, setId] = useState(initialId)
  const [loading, setLoading] = useState(false)

  const { data: open } = useQuery(["modal"], () => {
    return null
  }, {
    refetchOnWindowFocus: false,
    refetchOnMount: false,
    refetchOnReconnect: false,
    initialData: null
  })
  const setOpen = (id: string | null) => client.setQueryData(["modal"], () => id)

  const client = useQueryClient()

  const collection = useMemo(() => {
    const collections = client.getQueryData<Collection>(["collections"])
    if (!collections?.images) {
      setOpen(null)
      return null
    }
 
    return collections?.images?.find((collection) => collection.id === id)
  }, [id, loading])

  useUpdateEffect(() => setId(initialId), [initialId])

  const updateVisibility = async () => {
    setLoading(true)
    const response = await fetch(`/api/collections/${collection?.id}/visibility`, {
      method: "PUT",
      headers: {
        'Authorization': user?.sub ? token : "",
      }
    })

    const data = await response.json()
    if (data.ok) {
      client.setQueryData(["collections"], (old: any) => {
        return {
          ...old,
          images: old.images.map((collection: Image) => {
            if (collection.id === data.image.id) {
              return data.image
            }
            return collection
          })
        }
      })
    }
    setLoading(false)
  }

  const remove = async () => {
    setLoading(true)
    const response = await fetch(`/api/collections/${collection?.id}`, {
      method: "DELETE",
      headers: {
        'Authorization': user?.sub ? token : "",
      }
    })

    const data = await response.json()
    if (data.ok) {
      client.setQueryData(["collections"], (old: any) => {
        return {
          ...old,
          images: old.images.filter((col: Image) => col.id !== collection?.id)
        }
      })
      setOpen(null)
    }
    setLoading(false)
  }

  const next = () => {
    const collections = client.getQueryData<Collection>(["collections"])
    if (!collections?.images) {
      return null
    }

    const index = collections?.images?.findIndex((collection) => collection.id === id)
    if (index === -1) {
      return null
    }

    const next = collections?.images[index + 1]
    if (!next) {
      return null
    }

    setId(next.id)
  }

  const previous = () => {
    const collections = client.getQueryData<Collection>(["collections"])
    if (!collections?.images) {
      return null
    }

    const index = collections?.images?.findIndex((collection) => collection.id === id)
    if (index === -1) {
      return null
    }

    const previous = collections?.images[index - 1]
    if (!previous) {
      return null
    }

    setId(previous.id)
  }

  return {
    collection,
    open,
    setOpen,
    updateVisibility,
    remove,
    next,
    previous
  }
}