@@ -12,6 +12,7 @@ import {
12
12
ModalHeader ,
13
13
ModalFooter ,
14
14
ModalBody ,
15
+ Spinner ,
15
16
} from '@nextui-org/react' ;
16
17
import { deleteThread , renameThread , Thread } from '@/actions/threads' ;
17
18
import { GoPencil , GoTrash , GoKebabHorizontal } from 'react-icons/go' ;
@@ -27,14 +28,16 @@ const NewThread = ({ className, thread }: NewThreadProps) => {
27
28
const [ isPopoverOpen , setIsPopoverOpen ] = useState ( false ) ;
28
29
const { isOpen, onOpen, onClose } = useDisclosure ( ) ;
29
30
const { setThreads } = useContext ( ChatContext ) ;
31
+ const [ isLoading , setIsLoading ] = useState ( false ) ;
30
32
const [ threadNameInput , setThreadNameInput ] = useState ( '' ) ;
31
33
32
- const handleDeleteThread = ( ) => {
33
- deleteThread ( thread ) . then ( ( ) => {
34
- setThreads ( ( threads : Thread [ ] ) =>
35
- threads . filter ( ( t : Thread ) => t . meta . id !== thread )
36
- ) ;
37
- } ) ;
34
+ const handleDeleteThread = async ( ) => {
35
+ setIsLoading ( true ) ;
36
+ await deleteThread ( thread ) ;
37
+ setThreads ( ( threads : Thread [ ] ) =>
38
+ threads . filter ( ( t : Thread ) => t . meta . id !== thread )
39
+ ) ;
40
+ setIsLoading ( false ) ;
38
41
} ;
39
42
40
43
const handleRenameThread = ( newName : string ) => {
@@ -54,80 +57,86 @@ const NewThread = ({ className, thread }: NewThreadProps) => {
54
57
55
58
return (
56
59
< >
57
- < Popover
58
- placement = "right-start"
59
- isOpen = { isPopoverOpen }
60
- onOpenChange = { ( open ) => setIsPopoverOpen ( open ) }
61
- >
62
- < PopoverTrigger >
63
- < Button
64
- variant = "light"
65
- radius = "full"
66
- className = { `${ className } ` }
67
- isIconOnly
68
- startContent = { < GoKebabHorizontal /> }
69
- />
70
- </ PopoverTrigger >
71
- < PopoverContent className = "" >
72
- < Menu aria-label = "options" >
73
- < MenuItem
74
- className = "py-2"
75
- content = "Rename"
76
- startContent = { < GoPencil /> }
77
- onClick = { ( ) => {
78
- setIsPopoverOpen ( false ) ;
79
- onOpen ( ) ;
80
- } }
81
- >
82
- Rename
83
- </ MenuItem >
84
- < MenuItem
85
- aria-label = "delete"
86
- className = "py-2"
87
- content = "Delete"
88
- startContent = { < GoTrash /> }
89
- onClick = { ( ) => {
90
- setIsPopoverOpen ( false ) ;
91
- handleDeleteThread ( ) ;
92
- } }
93
- >
94
- Delete
95
- </ MenuItem >
96
- </ Menu >
97
- </ PopoverContent >
98
- </ Popover >
99
- < Modal
100
- backdrop = { 'opaque' }
101
- isOpen = { isOpen }
102
- onClose = { onClose }
103
- placement = "top-center"
104
- >
105
- < ModalContent >
106
- < ModalHeader className = "flex flex-col gap-1" >
107
- Rename thread
108
- </ ModalHeader >
109
- < ModalBody >
110
- < Input
111
- aria-label = "rename"
112
- label = "New Name"
113
- value = { threadNameInput }
114
- onChange = { ( e ) => setThreadNameInput ( e . target . value ) }
115
- />
116
- </ ModalBody >
117
- < ModalFooter >
118
- < Button
119
- aria-label = "rename"
120
- color = "primary"
121
- onPress = { ( ) => {
122
- handleRenameThread ( threadNameInput ) ;
123
- onClose ( ) ;
124
- } }
125
- >
126
- Rename
127
- </ Button >
128
- </ ModalFooter >
129
- </ ModalContent >
130
- </ Modal >
60
+ { isLoading ? (
61
+ < Spinner color = "success" />
62
+ ) : (
63
+ < >
64
+ < Popover
65
+ placement = "right-start"
66
+ isOpen = { isPopoverOpen }
67
+ onOpenChange = { ( open ) => setIsPopoverOpen ( open ) }
68
+ >
69
+ < PopoverTrigger >
70
+ < Button
71
+ variant = "light"
72
+ radius = "full"
73
+ className = { `${ className } ` }
74
+ isIconOnly
75
+ startContent = { < GoKebabHorizontal /> }
76
+ />
77
+ </ PopoverTrigger >
78
+ < PopoverContent className = "" >
79
+ < Menu aria-label = "options" >
80
+ < MenuItem
81
+ className = "py-2"
82
+ content = "Rename"
83
+ startContent = { < GoPencil /> }
84
+ onClick = { ( ) => {
85
+ setIsPopoverOpen ( false ) ;
86
+ onOpen ( ) ;
87
+ } }
88
+ >
89
+ Rename
90
+ </ MenuItem >
91
+ < MenuItem
92
+ aria-label = "delete"
93
+ className = "py-2"
94
+ content = "Delete"
95
+ startContent = { < GoTrash /> }
96
+ onClick = { ( ) => {
97
+ setIsPopoverOpen ( false ) ;
98
+ handleDeleteThread ( ) ;
99
+ } }
100
+ >
101
+ Delete
102
+ </ MenuItem >
103
+ </ Menu >
104
+ </ PopoverContent >
105
+ </ Popover >
106
+ < Modal
107
+ backdrop = { 'opaque' }
108
+ isOpen = { isOpen }
109
+ onClose = { onClose }
110
+ placement = "top-center"
111
+ >
112
+ < ModalContent >
113
+ < ModalHeader className = "flex flex-col gap-1" >
114
+ Rename thread
115
+ </ ModalHeader >
116
+ < ModalBody >
117
+ < Input
118
+ aria-label = "rename"
119
+ label = "New Name"
120
+ value = { threadNameInput }
121
+ onChange = { ( e ) => setThreadNameInput ( e . target . value ) }
122
+ />
123
+ </ ModalBody >
124
+ < ModalFooter >
125
+ < Button
126
+ aria-label = "rename"
127
+ color = "primary"
128
+ onPress = { ( ) => {
129
+ handleRenameThread ( threadNameInput ) ;
130
+ onClose ( ) ;
131
+ } }
132
+ >
133
+ Rename
134
+ </ Button >
135
+ </ ModalFooter >
136
+ </ ModalContent >
137
+ </ Modal >
138
+ </ >
139
+ ) }
131
140
</ >
132
141
) ;
133
142
} ;
0 commit comments