Restructure redux code (#109)

* Restructure redux code

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Erik Michelson <github@erik.michelson.eu>

src/components/editor/editor.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import { useSelector } from 'react-redux'
 import { useParams } from 'react-router'
 import { ApplicationState } from '../../redux'
-import { EditorMode } from '../../redux/editor/types'
 import { EditorWindow } from './editor-window/editor-window'
 import { MarkdownPreview } from './markdown-preview/markdown-preview'
+import { EditorMode } from './task-bar/editor-view-mode'
 import { TaskBar } from './task-bar/task-bar'
 
 interface RouteParameters {

src/components/editor/task-bar/editor-view-mode.tsx

@@ -1,13 +1,18 @@
-import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
 import React from 'react'
+import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { ForkAwesomeIcon } from '../../../fork-awesome/fork-awesome-icon'
 import { ApplicationState } from '../../../redux'
-import { EditorMode } from '../../../redux/editor/types'
 import { setEditorModeConfig } from '../../../redux/editor/methods'
-import { useTranslation } from 'react-i18next'
 
-const EditorViewMode: React.FC = () => {
+export enum EditorMode {
+  PREVIEW,
+  BOTH,
+  EDITOR,
+}
+
+export const EditorViewMode: React.FC = () => {
   const { t } = useTranslation()
   const editorConfig = useSelector((state: ApplicationState) => state.editorConfig)
   return (
@@ -15,7 +20,9 @@ const EditorViewMode: React.FC = () => {
       type="radio"
       name="options"
       defaultValue={editorConfig.editorMode}
-      onChange={(value: EditorMode) => { setEditorModeConfig(value) }}>
+      onChange={(value: EditorMode) => {
+        setEditorModeConfig(value)
+      }}>
       <ToggleButton value={EditorMode.PREVIEW} variant="outline-secondary" title={t('editor.viewMode.view')}>
         <ForkAwesomeIcon icon="eye"/>
       </ToggleButton>
@@ -28,5 +35,3 @@ const EditorViewMode: React.FC = () => {
     </ToggleButtonGroup>
   )
 }
-
-export { EditorViewMode }

src/components/landing/layout/navigation/header-bar/header-bar.tsx

@@ -3,7 +3,6 @@ import { Navbar } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { ApplicationState } from '../../../../../redux'
-import { LoginStatus } from '../../../../../redux/user/types'
 import { HeaderNavLink } from '../header-nav-link'
 import { NewGuestNoteButton } from '../new-guest-note-button'
 import { NewUserNoteButton } from '../new-user-note-button'
@@ -26,7 +25,7 @@ const HeaderBar: React.FC = () => {
         </HeaderNavLink>
       </div>
       <div className="d-inline-flex">
-        {user.status === LoginStatus.forbidden
+        {!user
           ? <Fragment>
             <span className={'mr-1 d-flex'}>
               <NewGuestNoteButton/>

src/components/landing/layout/navigation/user-dropdown/user-dropdown.tsx

@@ -1,17 +1,21 @@
-import { Dropdown } from 'react-bootstrap'
 import React from 'react'
+import { Dropdown } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
+import { LinkContainer } from 'react-router-bootstrap'
 import { ForkAwesomeIcon } from '../../../../../fork-awesome/fork-awesome-icon'
 import { ApplicationState } from '../../../../../redux'
-import { LinkContainer } from 'react-router-bootstrap'
 import { clearUser } from '../../../../../redux/user/methods'
-import { Trans, useTranslation } from 'react-i18next'
 import { UserAvatar } from '../../user-avatar/user-avatar'
 
 export const UserDropdown: React.FC = () => {
   useTranslation()
   const user = useSelector((state: ApplicationState) => state.user)
 
+  if (!user) {
+    return null
+  }
+
   return (
     <Dropdown alignRight>
       <Dropdown.Toggle size="sm" variant="dark" id="dropdown-user" className={'d-flex align-items-center'}>

src/components/landing/pages/intro/cover-buttons/cover-buttons.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
-import { Link } from 'react-router-dom'
 import { Button } from 'react-bootstrap'
-import { LoginStatus } from '../../../../../redux/user/types'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
+import { Link } from 'react-router-dom'
 import { ApplicationState } from '../../../../../redux'
 import './cover-buttons.scss'
 
@@ -11,7 +10,7 @@ export const CoverButtons: React.FC = () => {
   useTranslation()
   const user = useSelector((state: ApplicationState) => state.user)
 
-  if (user.status === LoginStatus.ok) {
+  if (user) {
     return null
   }
 

src/components/landing/pages/login/login.tsx

@@ -1,20 +1,19 @@
 import React from 'react'
 import { Card, Col, Row } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
-import { ViaEMail } from './auth/via-email'
-import { OneClickType, ViaOneClick } from './auth/via-one-click'
-import { ViaLdap } from './auth/via-ldap'
 import { useSelector } from 'react-redux'
-import { ApplicationState } from '../../../../redux'
-import { ViaOpenId } from './auth/via-openid'
 import { Redirect } from 'react-router'
-import { LoginStatus } from '../../../../redux/user/types'
+import { ApplicationState } from '../../../../redux'
+import { ViaEMail } from './auth/via-email'
+import { ViaLdap } from './auth/via-ldap'
+import { OneClickType, ViaOneClick } from './auth/via-one-click'
+import { ViaOpenId } from './auth/via-openid'
 
 export const Login: React.FC = () => {
   useTranslation()
   const authProviders = useSelector((state: ApplicationState) => state.backendConfig.authProviders)
   const customAuthNames = useSelector((state: ApplicationState) => state.backendConfig.customAuthNames)
-  const userLoginState = useSelector((state: ApplicationState) => state.user.status)
+  const userLoginState = useSelector((state: ApplicationState) => state.user)
   const emailForm = authProviders.email ? <ViaEMail/> : null
   const ldapForm = authProviders.ldap ? <ViaLdap/> : null
   const openIdForm = authProviders.openid ? <ViaOpenId/> : null
@@ -30,7 +29,7 @@ export const Login: React.FC = () => {
     }
   }
 
-  if (userLoginState === LoginStatus.ok) {
+  if (userLoginState) {
     // TODO Redirect to previous page?
     return (
       <Redirect to='/history'/>

src/components/landing/pages/profile/profile.tsx

@@ -3,7 +3,7 @@ import { Col, Row } from 'react-bootstrap'
 import { useSelector } from 'react-redux'
 import { Redirect } from 'react-router'
 import { ApplicationState } from '../../../../redux'
-import { LoginProvider, LoginStatus } from '../../../../redux/user/types'
+import { LoginProvider } from '../../../../redux/user/types'
 import { ProfileAccountManagement } from './settings/profile-account-management'
 import { ProfileChangePassword } from './settings/profile-change-password'
 import { ProfileDisplayName } from './settings/profile-display-name'
@@ -11,9 +11,9 @@ import { ProfileDisplayName } from './settings/profile-display-name'
 export const Profile: React.FC = () => {
   const user = useSelector((state: ApplicationState) => state.user)
 
-  if (user.status === LoginStatus.forbidden) {
+  if (!user) {
     return (
-      <Redirect to={'/login'} />
+      <Redirect to={'/login'}/>
     )
   }
 
@@ -22,7 +22,7 @@ export const Profile: React.FC = () => {
       <Row className="h-100 flex justify-content-center">
         <Col lg={6}>
           <ProfileDisplayName/>
-          { user.provider === LoginProvider.EMAIL ? <ProfileChangePassword/> : null }
+          {user.provider === LoginProvider.EMAIL ? <ProfileChangePassword/> : null}
           <ProfileAccountManagement/>
         </Col>
       </Row>

src/components/landing/pages/profile/settings/profile-display-name.tsx

@@ -1,5 +1,5 @@
-import React, { ChangeEvent, FormEvent, useState } from 'react'
-import { Button, Card, Form } from 'react-bootstrap'
+import React, { ChangeEvent, FormEvent, useEffect, useState } from 'react'
+import { Alert, Button, Card, Form } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { updateDisplayName } from '../../../../../api/me'
@@ -7,13 +7,22 @@ import { ApplicationState } from '../../../../../redux'
 import { getAndSetUser } from '../../../../../utils/apiUtils'
 
 export const ProfileDisplayName: React.FC = () => {
+  const regexInvalidDisplayName = /^\s*$/
   const { t } = useTranslation()
   const user = useSelector((state: ApplicationState) => state.user)
   const [submittable, setSubmittable] = useState(false)
   const [error, setError] = useState(false)
-  const [displayName, setDisplayName] = useState(user.name)
+  const [displayName, setDisplayName] = useState('')
 
-  const regexInvalidDisplayName = /^\s*$/
+  useEffect(() => {
+    if (user) {
+      setDisplayName(user.name)
+    }
+  }, [user])
+
+  if (!user) {
+    return <Alert variant={'danger'}>User not logged in</Alert>
+  }
 
   const changeNameField = (event: ChangeEvent<HTMLInputElement>) => {
     setSubmittable(!regexInvalidDisplayName.test(event.target.value))