%%{init: { 'theme': 'forest','themeVariables': { 'fontSize': '25px', "sectionFontSize": '25px'}}}%%
sequenceDiagram
participant User as User
participant DropBoxFlogs as DropBoxFlogs
participant Entry as Entry
participant EntryList as EntryList
participant AddEntry as AddEntry
participant OpenFlogs as OpenFlogs
participant useFlogs as useFlogs
participant useDropboxFlogs as useDropboxFlogs
participant useDropboxFiles as useDropboxFiles
participant DropBox SDK as DropBox SDK
participant OpenFlogs as OpenFlogs
User->>DropBoxFlogs: Selects flog file to open
DropBoxFlogs->>useFlogs: composable function:
openFlog()
Note right of useFlogs: the openFlog() <br/>function offerend <br/>by useFlogs uses <br/>the flog source <br/>APIs to retrieve the <br/>flog data, and load <br/>it for use in the <br/>openFlogs ref
useFlogs->>useDropboxFlogs: loadFlogEntries()
useDropboxFlogs->>useDropboxFiles: loadFileContent()
useDropboxFiles->>DropBox SDK: checkAndRefreshAccessToken()
useDropboxFiles->>DropBox SDK: filesDownload()
DropBox SDK->>useDropboxFiles: callback:<br/>
content (raw file text)
useDropboxFiles->>useDropboxFlogs: deserialize<br/>Flog
updates flog
useDropboxFlogs->>useFlogs: loaded entries are now in the
useFlogs openFlogs ref
useFlogs->>OpenFlogs: composable refs:
<br/>openFlogs
Note right of useFlogs: useFlogs provides <br/>a ref object of all <br/>openFlogs, which is <br/>manages <br/>in-memory.<br/><br/>It also provides an <br/>API of functions for <br/>updating the flogs <br/>and saving them <br/>back to source, and <br/>loading them from <br/>source.<br/>
OpenFlogs->>EntryList: props:
<br/>entries: (array of IEntry objects),
<br/>editingEntry: (single IEntry object),
<br/>readOnly: boolean
Note right of OpenFlogs: <OpenFlogs> uses <br/>the openFlogs ref <br/>to populate its UI <br/>sub-components
EntryList->>Entry: props:
<br/>entry: (IEntry object)
Note right of Entry: The <Entry> <br/>renders the date <br/>and string data to <br/>the UI
User->>AddEntry: Clicks
Submit
button
Note right of AddEntry: submit handler <br/>submitAdd()
AddEntry->>OpenFlogs:emits
<br/>newEntry
Note right of OpenFlogs: newEntry handler <br/>addNewEntry()
OpenFlogs->>useFlogs:addEntryToFlog()
Note right of useFlogs: The entry is added <br/>to the flog, which is <br/>in a collection <br/>of open flogs, <br/>which is managed <br/>by useFlogs <br/>in-memory
OpenFlogs->>useFlogs:saveFlogToSource()
Note right of useFlogs: The flog is saved <br/>back to source
useFlogs->>useDropboxFlogs:saveFlogEntries()
Note right of useDropboxFlogs: The flog file is saved back to source
useDropboxFlogs->>useDropboxFiles:serializeFlog
<br/>saveFileContent()
Note right of useDropboxFiles: The flog file is saved back to Dropbox
useDropboxFiles->>DropBox SDK:checkAndRefreshAccessToken()
useDropboxFiles->>DropBox SDK:filesUpload()
OpenFlogs->>EntryList: props:
<br/>entries: (array of IEntry objects),
<br/>editingEntry: (single IEntry object),
<br/>readOnly: boolean
Note right of OpenFlogs: The list of entries <br/>for the flog is <br/>updated and <br/>reactively updated <br/>in the UI, trickling <br/>down to child <br/>componenets