fix(ui): set current user as global context

ui/src/App.tsx

@@ -1,15 +1,18 @@
+import React from 'react'
 import { ApolloProvider } from '@apollo/client'
 import { ConnectedRouter } from 'connected-react-router'
 import { History } from 'history'
-import React from 'react'
 import { ModalProvider } from 'react-modal-hook'
 import { Provider } from 'react-redux'
 import { Store } from 'redux'
 
-import { LocalConfigurationProvider } from './contexts/LocalConfigurationContext'
-import { MessageProvider } from './contexts/MessageContext'
-import { NavbarProvider } from './contexts/NavbarContext'
-import { ScrollMemoryProvider } from './contexts/ScrollMemoryContext'
+import {
+  CurrentUserProvider,
+  LocalConfigurationProvider,
+  MessageProvider,
+  NavbarProvider,
+  ScrollMemoryProvider,
+} from './contexts'
 import { client } from './graphqlClient'
 import { AppLayout } from './layout'
 import Routes from './routes'
@@ -38,9 +41,11 @@ export default function App({ store, history /*, theme*/ }: Props) {
               <NavbarProvider>
                 <ScrollMemoryProvider>
                   <ConnectedRouter history={history}>
-                    <AppLayout>
-                      <Routes />
-                    </AppLayout>
+                    <CurrentUserProvider>
+                      <AppLayout>
+                        <Routes />
+                      </AppLayout>
+                    </CurrentUserProvider>
                   </ConnectedRouter>
                 </ScrollMemoryProvider>
               </NavbarProvider>

ui/src/articles/ArticlesPage.tsx

@@ -1,9 +1,9 @@
-import React, { useCallback, useContext, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import { NetworkStatus, useQuery } from '@apollo/client'
 import { RouteComponentProps } from 'react-router'
 
 import { Category } from '../categories/models'
-import { LocalConfiguration, LocalConfigurationContext } from '../contexts/LocalConfigurationContext'
+import { LocalConfiguration, useLocalConfiguration } from '../contexts/LocalConfigurationContext'
 import { Center, ErrorPanel, Loader, Panel } from '../components'
 import { getURLParam, matchResponse } from '../helpers'
 import { Appbar, Page } from '../layout'
@@ -103,7 +103,7 @@ type AllProps = Props & RouteComponentProps
 export default (props: AllProps) => {
   const { variant, category } = props
 
-  const { localConfiguration } = useContext(LocalConfigurationContext)
+  const { localConfiguration } = useLocalConfiguration()
   const [req] = useState<GetArticlesRequest>(buildArticlesRequest(variant, props, localConfiguration))
   const { data, error, fetchMore, refetch, networkStatus } = useQuery<GetArticlesResponse>(GetArticles, {
     variables: req,

ui/src/articles/components/AddArticleForm.tsx

@@ -1,9 +1,9 @@
-import React, { CSSProperties, FormEvent, MouseEvent, useCallback, useContext, useState } from 'react'
+import React, { CSSProperties, FormEvent, MouseEvent, useCallback, useState } from 'react'
 import { useMutation } from '@apollo/client'
 import { useFormState } from 'react-use-form-state'
 
 import { Category } from '../../categories/models'
-import { MessageContext } from '../../contexts/MessageContext'
+import { useMessage } from '../../contexts'
 import { Button, CategoriesOptions, ErrorPanel, FormInputField, FormSelectField, Loader, Panel } from '../../components'
 import { getGQLError, isValidForm } from '../../helpers'
 import { AddNewArticleRequest, AddNewArticleResponse, Article } from '../models'
@@ -26,7 +26,7 @@ interface Props {
 export const AddArticleForm = ({ value, category, style, onSuccess, onCancel }: Props) => {
   const [loading, setLoading] = useState(false)
   const [errorMessage, setErrorMessage] = useState<string | null>(null)
-  const { showMessage } = useContext(MessageContext)
+  const { showMessage } = useMessage()
   const [formState, { url, select }] = useFormState<AddArticleFormFields>({
     url: value,
     category: category ? category.id : undefined,

ui/src/articles/components/ArticleContent.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import mousetrap from 'mousetrap'
-import React, { useContext, useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 
-import { LocalConfigurationContext } from '../../contexts/LocalConfigurationContext'
+import { useLocalConfiguration } from '../../contexts/LocalConfigurationContext'
 import { Article } from '../models'
 import styles from './ArticleContent.module.css'
 import readable from './readable'
@@ -35,7 +35,7 @@ window.onload = function() {
 export const ArticleContent = ({ article }: Props) => {
   const [alreadyRendered, setAlreadyRendered] = useState(false)
   const contentRef = useRef<HTMLDivElement>(null)
-  const { localConfiguration } = useContext(LocalConfigurationContext)
+  const { localConfiguration } = useLocalConfiguration()
   let { theme } = localConfiguration
   if (theme === 'auto') {
     const mql = getMql()

ui/src/articles/components/ArticlesPageMenu.tsx

@@ -1,5 +1,5 @@
+import React, { SyntheticEvent, useCallback } from 'react'
 import { Location } from 'history'
-import React, { SyntheticEvent, useCallback, useContext } from 'react'
 import { useMutation } from '@apollo/client'
 import { useModal } from 'react-modal-hook'
 import { Link, useHistory, useLocation } from 'react-router-dom'
@@ -9,11 +9,11 @@ import {
   DisplayMode,
   DisplayPreference,
   DisplayPreferences,
-  LocalConfigurationContext,
   SortBy,
   SortOrder,
+  useLocalConfiguration,
 } from '../../contexts/LocalConfigurationContext'
-import { MessageContext } from '../../contexts/MessageContext'
+import { useMessage } from '../../contexts'
 import { getGQLError } from '../../helpers'
 import { GetArticlesRequest, MarkAllArticlesAsReadRequest, MarkAllArticlesAsReadResponse } from '../models'
 import { MarkAllArticlesAsRead } from '../queries'
@@ -82,8 +82,8 @@ export const ArticlesPageMenu = (props: Props) => {
   const loc = useLocation()
   const { push } = useHistory()
 
-  const { showErrorMessage } = useContext(MessageContext)
-  const { localConfiguration, updateLocalConfiguration } = useContext(LocalConfigurationContext)
+  const { showErrorMessage } = useMessage()
+  const { localConfiguration, updateLocalConfiguration } = useLocalConfiguration()
   const [markAllArticlesAsReadMutation] = useMutation<MarkAllArticlesAsReadResponse, MarkAllArticlesAsReadRequest>(
     MarkAllArticlesAsRead
   )

ui/src/articles/components/MarkAsButton.tsx

@@ -1,8 +1,8 @@
-import React, { useCallback, useContext, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useMutation } from '@apollo/client'
 
 import { ButtonIcon } from '../../components'
-import { MessageContext } from '../../contexts/MessageContext'
+import { useMessage } from '../../contexts'
 import { getGQLError } from '../../helpers'
 import { useKeyboard } from '../../hooks'
 import { updateCacheAfterUpdate } from '../cache'
@@ -20,7 +20,7 @@ export const MarkAsButton = (props: Props) => {
   const isMounted = React.useRef(true)
   const { article, floating = false, keyboard = false, onSuccess } = props
 
-  const { showErrorMessage } = useContext(MessageContext)
+  const { showErrorMessage } = useMessage()
   const [loading, setLoading] = useState(false)
   const [updateArticleMutation] = useMutation<UpdateArticleResponse, UpdateArticleRequest>(UpdateArticle)
 

ui/src/articles/components/StarsButton.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback, useContext, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import { useMutation } from '@apollo/client'
 
-import { MessageContext } from '../../contexts/MessageContext'
+import { useMessage } from '../../contexts'
 import { getGQLError } from '../../helpers'
 import { useKeyboard } from '../../hooks'
 import { updateCacheAfterUpdate } from '../cache'
@@ -18,7 +18,7 @@ interface Props {
 export const StarsButton = (props: Props) => {
   const { article, keyboard = false, onSuccess } = props
 
-  const { showErrorMessage } = useContext(MessageContext)
+  const { showErrorMessage } = useMessage()
   const [loading, setLoading] = useState(false)
   const [updateArticleMutation] = useMutation<UpdateArticleResponse, UpdateArticleRequest>(UpdateArticle)
 

ui/src/articles/components/SwipeableArticleCard.tsx

@@ -1,8 +1,8 @@
-import React, { useCallback, useContext } from 'react'
+import React, { useCallback } from 'react'
 import { useMutation } from '@apollo/client'
 
 import { Icon, SwipeableListItem } from '../../components'
-import { MessageContext } from '../../contexts/MessageContext'
+import { useMessage } from '../../contexts'
 import { getGQLError } from '../../helpers'
 import { updateCacheAfterUpdate } from '../cache'
 import { Article, ArticleStatus, UpdateArticleRequest, UpdateArticleResponse } from '../models'
@@ -23,7 +23,7 @@ const Background = ({ icon }: { icon: string }) => (
 export const SwipeableArticleCard = (props: Props) => {
   const { article } = props
 
-  const { showErrorMessage } = useContext(MessageContext)
+  const { showErrorMessage } = useMessage()
   const [updateArticleMutation] = useMutation<UpdateArticleResponse, UpdateArticleRequest>(UpdateArticle)
 
   const updateArticleStatus = useCallback(

ui/src/articles/components/context-menu/DownloadAsLink.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback, useContext, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 
 import { LinkIcon, Overlay } from '../../../components'
-import { MessageContext } from '../../../contexts/MessageContext'
+import { useMessage } from '../../../contexts'
 import { fetchAPI } from '../../../helpers'
 import { Article } from '../../models'
 import DownloadPanel from './DownloadPanel'
@@ -13,7 +13,7 @@ interface Props {
 }
 
 export default ({ article }: Props) => {
-  const { showErrorMessage } = useContext(MessageContext)
+  const { showErrorMessage } = useMessage()
   const [isVisible, setIsVisible] = useState(false)
   const [isDownloading, setIsDownloading] = useState(false)
   const [contentLength, setContentLength] = useState(0)

ui/src/articles/components/context-menu/OfflineLink.tsx

@@ -1,10 +1,10 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import { useApolloClient } from '@apollo/client'
 import { useModal } from 'react-modal-hook'
 
 import { ConfirmDialog, Kbd, LinkIcon, Loader, Overlay } from '../../../components'
 import { connectOffline, OfflineProps } from '../../../containers/OfflineContainer'
-import { MessageContext } from '../../../contexts/MessageContext'
+import { useMessage } from '../../../contexts'
 import { Article, GetArticleResponse } from '../../models'
 import { GetFullArticle } from '../../queries'
 
@@ -17,7 +17,7 @@ type AllProps = Props & OfflineProps
 
 export const OfflineLink = (props: AllProps) => {
   const { article, keyboard = false, saveOfflineArticle, removeOfflineArticle, offlineArticles } = props
-  const { showMessage, showErrorMessage } = useContext(MessageContext)
+  const { showMessage, showErrorMessage } = useMessage()
   const { loading } = offlineArticles
 
   const client = useApolloClient()

ui/src/articles/components/context-menu/OutgoingWebhooksMenuItems.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext } from 'react'
+import React, { useCallback } from 'react'
 import { useMutation, useQuery } from '@apollo/client'
 
 import { Loader } from '../../../components'
@@ -9,7 +9,7 @@ import { Article } from '../../models'
 import { SendArticleToOutgoingWebhook } from '../../queries'
 import DefaultWebhookLink from './DefaultWebhookLink'
 import OtherWebhooksLink from './OtherWebhooksLink'
-import { MessageContext } from '../../../contexts/MessageContext'
+import { useMessage } from '../../../contexts'
 
 interface SendArticleFields {
   id: number
@@ -23,7 +23,7 @@ interface Props {
 }
 
 export default ({ article, keyboard }: Props) => {
-  const { showMessage, showErrorMessage } = useContext(MessageContext)
+  const { showMessage, showErrorMessage } = useMessage()
   const [SendArticleToOutgoingWebhookMutation] = useMutation<SendArticleFields>(SendArticleToOutgoingWebhook)
   const { data, error, loading } = useQuery<GetOutgoingWebhooksResponse>(GetOutgoingWebhooks)
 

ui/src/components/Snackbar.tsx

@@ -1,15 +1,15 @@
-import React, { useContext, useEffect } from 'react'
+import React, { useEffect } from 'react'
 import CSSTransition from 'react-transition-group/CSSTransition'
 
-import { MessageContext } from '../contexts/MessageContext'
+import { useMessage } from '../contexts'
 import { Notification } from '.'
 
 interface Props {
   ttl?: number
 }
 
 export const Snackbar = ({ ttl = 5000 }: Props) => {
-  const { message, showMessage } = useContext(MessageContext)
+  const { message, showMessage } = useMessage()
 
   useEffect(() => {
     if (ttl && message.text && message.variant === 'info') {

ui/src/components/UserInfos.tsx

@@ -1,63 +1,30 @@
 /* eslint-disable react/jsx-no-target-blank */
 import React from 'react'
-import gql from 'graphql-tag'
-import { useQuery } from '@apollo/client'
 
 import authService from '../auth'
-import { ErrorPanel, Loader, TimeAgo } from '.'
-import { matchResponse, getRoboHash } from '../helpers'
+import { TimeAgo } from '.'
+import { getRoboHash } from '../helpers'
 import styles from './UserInfos.module.css'
-
-export const GetCurrentUser = gql`
-  query {
-    me {
-      username
-      hash
-      hashid
-      plan
-      customer_id
-      last_login_at
-      created_at
-    }
-  }
-`
-
-export interface User {
-  username: string
-  hash: string
-  hashid: string
-  plan: string
-  customer_id: string
-  created_at: string
-  last_login_at: string
-}
-
-export interface GetCurrentUserResponse {
-  me: User
-}
+import { useCurrentUser } from '../contexts'
 
 export const UserInfos = () => {
-  const { data, error, loading } = useQuery<GetCurrentUserResponse>(GetCurrentUser)
-
-  const render = matchResponse<GetCurrentUserResponse>({
-    Loading: () => <Loader />,
-    Error: (err) => <ErrorPanel>{err.message}</ErrorPanel>,
-    Data: (data) => (
-      <>
-        <span>
-          <strong title={data.me.username}>{data.me.username}</strong>
-          <small>
-            Member <TimeAgo dateTime={data.me.created_at} />
-          </small>
-        </span>
-        <a href={authService.getAccountUrl()} target="_blank" title="Go to my profile page">
-          <img src={getRoboHash(data.me.hash, '48')} alt={data.me.username} />
-        </a>
-      </>
-    ),
-  })
-
-  return <div className={styles.userInfos}>{render(loading, data, error)}</div>
+  const user = useCurrentUser()
+  if (!user) {
+    return null
+  }
+  return (
+    <div className={styles.userInfos}>
+      <span>
+        <strong title={user.username}>{user.username}</strong>
+        <small>
+          Member <TimeAgo dateTime={user.created_at} />
+        </small>
+      </span>
+      <a href={authService.getAccountUrl()} target="_blank" title="Go to my profile page">
+        <img src={getRoboHash(user.hash, '48')} alt={user.username} />
+      </a>
+    </div>
+  )
 }
 
 export default UserInfos