1- import { Button , makeStyles } from '@fluentui/react-components'
2- import { ArrowLeftRegular } from '@fluentui/react-icons'
1+ import {
2+ Button ,
3+ makeStyles ,
4+ Menu ,
5+ MenuButton ,
6+ MenuItem ,
7+ MenuList ,
8+ MenuPopover ,
9+ MenuTrigger ,
10+ } from '@fluentui/react-components'
11+ import {
12+ ArrowClockwiseRegular ,
13+ ArrowLeftRegular ,
14+ MoreVerticalRegular ,
15+ SignOutRegular ,
16+ } from '@fluentui/react-icons'
317import * as React from 'react'
418import { _t , fetchTranslations } from '../../helpers/translate'
519import { Email } from '../../models/email'
@@ -35,6 +49,14 @@ const useStyles = makeStyles({
3549 marginTop : '5px' ,
3650 marginLeft : '10px' ,
3751 } ,
52+ spinner : {
53+ padding : '4px' ,
54+ } ,
55+ kebabButton : {
56+ display : 'flex' ,
57+ flexDirection : 'row' ,
58+ alignItems : 'center' ,
59+ } ,
3860} )
3961
4062const App : React . FC < AppProps > = ( _props : AppProps ) => {
@@ -43,15 +65,17 @@ const App: React.FC<AppProps> = (_props: AppProps) => {
4365 const [ loading , setLoading ] = React . useState (
4466 ! ! localStorage . getItem ( 'odoo_access_token' )
4567 )
68+ const [ logged , setLogged ] = React . useState ( false )
4669
4770 // pages used to go back
4871 const [ currentPage , setCurrentPage ] = React . useState ( null )
49- const [ pages , setPages ] = React . useState ( ( ) => [ ] )
72+ const [ pagesPartner , setPagesPartner ] : [ [ any , Partner | null ] [ ] , any ] =
73+ React . useState ( ( ) => [ ] )
5074
5175 let email = new Email ( )
5276
53- const pushPage = ( page ) => {
54- setPages ( ( prevPages ) => [ ...prevPages , page ] )
77+ const pushPage = ( page , partner : Partner = null ) => {
78+ setPagesPartner ( ( prevPages ) => [ ...prevPages , [ page , partner ] ] )
5579 setCurrentPage ( page )
5680 }
5781
@@ -88,8 +112,9 @@ const App: React.FC<AppProps> = (_props: AppProps) => {
88112
89113 const logout = ( ) => {
90114 setLoading ( false )
115+ setLogged ( false )
91116 localStorage . removeItem ( 'odoo_access_token' )
92- setPages ( [ ] )
117+ setPagesPartner ( [ ] )
93118 setCurrentPage ( < Login onLogin = { loadEmailContacts } /> )
94119 }
95120
@@ -103,12 +128,12 @@ const App: React.FC<AppProps> = (_props: AppProps) => {
103128 key = { `partner-${ partner . key } ` }
104129 partner = { partner }
105130 email = { email }
106- onLogout = { logout }
107131 onSearch = { onSearchPartners }
108132 pushPage = { pushPage }
109133 goBack = { goBack }
110134 updatePartner = { updatePartner }
111- />
135+ /> ,
136+ partner
112137 )
113138
114139 // fetch the leads, tickets, tasks, etc
@@ -135,15 +160,17 @@ const App: React.FC<AppProps> = (_props: AppProps) => {
135160 key = { `partner-${ partner . key } ` }
136161 partner = { partner }
137162 email = { email }
138- onLogout = { logout }
139163 onSearch = { onSearchPartners }
140164 pushPage = { pushPage }
141165 goBack = { goBack }
142166 updatePartner = { updatePartner }
143167 />
144168 )
145169
146- setPages ( ( prevPages ) => [ ...prevPages . slice ( 0 , - 1 ) , newCard ] )
170+ setPagesPartner ( ( prevPages ) => [
171+ ...prevPages . slice ( 0 , - 1 ) ,
172+ [ newCard , partner ] ,
173+ ] )
147174 setCurrentPage ( newCard )
148175 }
149176
@@ -169,15 +196,15 @@ const App: React.FC<AppProps> = (_props: AppProps) => {
169196 email = { email }
170197 />
171198 )
172- setPages ( [ searchRecords ] )
199+ setPagesPartner ( [ [ searchRecords , null ] ] )
173200 setCurrentPage ( searchRecords )
174201 }
175202
176203 /**
177204 * Fetch the information about the contact in the email.
178205 * (to know if they exist in the database...)
179206 */
180- const loadEmailContacts = async ( ) => {
207+ const loadEmailContacts = async ( autoOpen = true ) => {
181208 const token = localStorage . getItem ( 'odoo_access_token' )
182209 if ( ! token ?. length ) {
183210 logout ( )
@@ -207,26 +234,42 @@ const App: React.FC<AppProps> = (_props: AppProps) => {
207234
208235 fetchTranslations ( )
209236 setEmailContacts ( searchedPartners )
210- if ( searchedPartners . length === 1 ) {
237+ if ( searchedPartners . length === 1 && autoOpen ) {
211238 setPartner ( searchedPartners [ 0 ] )
212239 }
213240
241+ setLogged ( true )
214242 setLoading ( false )
215243 }
216244
217245 const goBack = ( backCount : number = 1 ) => {
218- if ( pages . length === 2 && email . contacts . length >= 2 ) {
219- // the contact could have been created, reload its information
220- loadEmailContacts ( )
221- return
222- }
223- setPages ( ( prevPages ) => {
224- const page = prevPages [ prevPages . length - 1 - backCount ]
246+ setPagesPartner ( ( prevPages ) => {
247+ if ( prevPages . length === 2 ) {
248+ // the contact could have been created, reload the view
249+ setTimeout ( ( ) => loadEmailContacts ( false ) )
250+ return [ ]
251+ }
252+ const [ page , _partner ] = prevPages [ prevPages . length - 1 - backCount ]
225253 setCurrentPage ( page )
226254 return prevPages . slice ( 0 , prevPages . length - backCount )
227255 } )
228256 }
229257
258+ const onRefresh = async ( ) => {
259+ const partner = pagesPartner [ pagesPartner . length - 1 ] [ 1 ]
260+ const [ newPartner , error ] = await Partner . getPartner (
261+ partner . name ,
262+ partner . email ,
263+ partner . id
264+ )
265+
266+ if ( error . code ) {
267+ showError ( error . message )
268+ return
269+ }
270+ updatePartner ( newPartner )
271+ }
272+
230273 // set the logged state if needed, without blocking the rendering
231274 React . useEffect ( ( ) => {
232275 loadEmailContacts ( )
@@ -249,9 +292,10 @@ const App: React.FC<AppProps> = (_props: AppProps) => {
249292
250293 return (
251294 < div className = { styles . root } >
252- < div className = { styles . header } >
253- { pages . length > 1 && (
295+ { logged && (
296+ < div className = { styles . header } >
254297 < Button
298+ disabled = { pagesPartner . length <= 1 }
255299 className = { styles . goBack }
256300 icon = { < ArrowLeftRegular /> }
257301 title = { _t ( 'Go back' ) }
@@ -260,9 +304,48 @@ const App: React.FC<AppProps> = (_props: AppProps) => {
260304 appearance = "subtle"
261305 onClick = { ( ) => goBack ( ) }
262306 />
263- ) }
264- < GlobalLoading />
265- </ div >
307+
308+ < GlobalLoading />
309+
310+ < Menu >
311+ < MenuTrigger disableButtonEnhancement >
312+ < MenuButton
313+ appearance = "subtle"
314+ icon = { < MoreVerticalRegular /> }
315+ size = "medium"
316+ />
317+ </ MenuTrigger >
318+
319+ < MenuPopover >
320+ < MenuList >
321+ < MenuItem
322+ onClick = { onRefresh }
323+ disabled = {
324+ ! pagesPartner . length ||
325+ ! pagesPartner [
326+ pagesPartner . length - 1
327+ ] [ 1 ]
328+ }
329+ >
330+ < div className = { styles . kebabButton } >
331+ < ArrowClockwiseRegular />
332+ < span > { _t ( 'Refresh' ) } </ span >
333+ </ div >
334+ </ MenuItem >
335+ < MenuItem
336+ className = { styles . kebabButton }
337+ onClick = { ( ) => logout ( ) }
338+ >
339+ < div className = { styles . kebabButton } >
340+ < SignOutRegular />
341+ < span > { _t ( 'Logout' ) } </ span >
342+ </ div >
343+ </ MenuItem >
344+ </ MenuList >
345+ </ MenuPopover >
346+ </ Menu >
347+ </ div >
348+ ) }
266349 { loading ? < Loading /> : currentPage }
267350 < Error />
268351 </ div >
0 commit comments