-
Notifications
You must be signed in to change notification settings - Fork 562
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor: Extract authentication and login screen from main app (#2066)
Explored in 5f1f65d Explored in e3c660e This work exists in preparation for further and deeper work to decouple Simperium in the app data flows and to finish the internal state refactors. The goal here is to initialize Simperium only after having proper authentication in order to allow us to move Simperium into Redux middleware. The further goal is to remove the race condition that exists in many places between making an edit or clicking a button, making a network call to Simperium (or not), updating indexedDB, and rerendering the app. App boot is now handled on its own and centralizes the token-loading process. Upon logout it force-reloads the browser window to clear out app state. This is necessary due to the ways that things like client and app-state initialize their variables in the module global scope. We can't reload the app state once the module has been imported the first time. Reloading the page completely resets this. There is a flash of a white screen when logging out. The auth component of app state has been correspondingly removed because the app will not load without an authorization. A new action LOGOUT has been created in order to trigger a logout in the app, driven from the Simperium middleware.
- Loading branch information
Showing
26 changed files
with
561 additions
and
497 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| if (__TEST__) { | ||
| window.testEvents = []; | ||
| } | ||
|
|
||
| import 'core-js/stable'; | ||
| import 'regenerator-runtime/runtime'; | ||
| import 'unorm'; | ||
|
|
||
| import React from 'react'; | ||
| import App from './app'; | ||
| import Modal from 'react-modal'; | ||
| import Debug from 'debug'; | ||
| import { initClient } from './client'; | ||
| import getConfig from '../get-config'; | ||
| import { makeStore } from './state'; | ||
| import actions from './state/actions'; | ||
| import { initSimperium } from './state/simperium/middleware'; | ||
| import { render } from 'react-dom'; | ||
| import { Provider } from 'react-redux'; | ||
|
|
||
| import '../scss/style.scss'; | ||
|
|
||
| import isDevConfig from './utils/is-dev-config'; | ||
| import { normalizeForSorting } from './utils/note-utils'; | ||
|
|
||
| import * as T from './types'; | ||
|
|
||
| const config = getConfig(); | ||
| const appID = config.app_id; | ||
|
|
||
| export const bootWithToken = ( | ||
| logout: () => any, | ||
| token: string, | ||
| username: string | null, | ||
| createWelcomeNote: boolean | ||
| ) => { | ||
| const client = initClient({ | ||
| appID, | ||
| token, | ||
| bucketConfig: { | ||
| note: { | ||
| beforeIndex: function (note: T.NoteEntity) { | ||
| var content = (note.data && note.data.content) || ''; | ||
|
|
||
| return { | ||
| ...note, | ||
| contentKey: normalizeForSorting(content), | ||
| }; | ||
| }, | ||
| configure: function (objectStore) { | ||
| objectStore.createIndex('modificationDate', 'data.modificationDate'); | ||
| objectStore.createIndex('creationDate', 'data.creationDate'); | ||
| objectStore.createIndex('alphabetical', 'contentKey'); | ||
| }, | ||
| }, | ||
| preferences: function (objectStore) { | ||
| console.log('Configure preferences', objectStore); // eslint-disable-line no-console | ||
| }, | ||
| tag: function (objectStore) { | ||
| console.log('Configure tag', objectStore); // eslint-disable-line no-console | ||
| }, | ||
| }, | ||
| database: 'simplenote', | ||
| version: 42, | ||
| }); | ||
|
|
||
| const debug = Debug('client'); | ||
| const l = (msg: string) => (...args: unknown[]) => debug(msg, ...args); | ||
|
|
||
| client | ||
| .on('connect', l('Connected')) | ||
| .on('disconnect', l('Not connected')) | ||
| .on('message', l('<=')) | ||
| .on('send', l('=>')) | ||
| .on('unauthorized', l('Not authorized')); | ||
|
|
||
| Modal.setAppElement('#root'); | ||
|
|
||
| const store = makeStore( | ||
| initSimperium(logout, token, username, createWelcomeNote, client) | ||
| ); | ||
|
|
||
| store.dispatch(actions.settings.setAccountName(username)); | ||
|
|
||
| render( | ||
| <Provider store={store}> | ||
| <App | ||
| client={client} | ||
| noteBucket={client.bucket('note')} | ||
| preferencesBucket={client.bucket('preferences')} | ||
| tagBucket={client.bucket('tag')} | ||
| isDevConfig={isDevConfig(config?.development)} | ||
| /> | ||
| </Provider>, | ||
| document.getElementById('root') | ||
| ); | ||
| }; |
Oops, something went wrong.