Initialize redux with redux-toolkit, refactor Login with redux

We used example generated by
npx create-react-app --template redux-typescript

Author: mrkvon

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@inrupt/solid-client": "^1.12.0",
     "@inrupt/solid-client-authn-browser": "^1.11.2",
+    "@reduxjs/toolkit": "^1.6.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -19,6 +20,7 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-modal": "^3.12.1",
+    "@types/react-redux": "^7.1.18",
     "@types/styled-components": "^5.1.11",
     "bulma": "^0.9.3",
     "classnames": "^2.3.1",
@@ -35,6 +37,7 @@
     "react-dom": "^17.0.2",
     "react-markdown": "^6.0.2",
     "react-modal": "^3.14.3",
+    "react-redux": "^7.2.5",
     "react-scripts": "4.0.3",
     "rehype-katex": "^5.0.0",
     "remark-math": "^4.0.0",

src/App.test.tsx

@@ -1,9 +1,17 @@
+/* @TODO */
+
 import React from 'react'
-import { render, screen } from '@testing-library/react'
+import { render } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import { store } from './app/store'
 import App from './App'
 
 test('renders learn react link', () => {
-  render(<App />)
-  const linkElement = screen.getByText(/learn react/i)
-  expect(linkElement).toBeInTheDocument()
+  const { getByText } = render(
+    <Provider store={store}>
+      <App />
+    </Provider>,
+  )
+
+  expect(getByText(/learn/i)).toBeInTheDocument()
 })

src/App.tsx

@@ -1,11 +1,20 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import Layout from './components/Layout'
 import DataContainer from './components/DataContainer'
+import { init as initLogin } from './features/login/loginSlice'
+import { useAppDispatch } from './app/hooks'
 
-const App: React.FC = () => (
-  <DataContainer>
-    <Layout />
-  </DataContainer>
-)
+const App: React.FC = () => {
+  const dispatch = useAppDispatch()
+  useEffect(() => {
+    dispatch(initLogin())
+  }, [dispatch])
+
+  return (
+    <DataContainer>
+      <Layout />
+    </DataContainer>
+  )
+}
 
 export default App

src/app/hooks.ts

@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
+import type { RootState, AppDispatch } from './store'
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = () => useDispatch<AppDispatch>()
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

src/app/store.ts

@@ -0,0 +1,17 @@
+import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit'
+import loginReducer from '../features/login/loginSlice'
+
+export const store = configureStore({
+  reducer: {
+    login: loginReducer,
+  },
+})
+
+export type AppDispatch = typeof store.dispatch
+export type RootState = ReturnType<typeof store.getState>
+export type AppThunk<ReturnType = void> = ThunkAction<
+  ReturnType,
+  RootState,
+  unknown,
+  Action<string>
+>

src/components/Layout.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Login from './Login'
+import Login from '../features/login/Login'
 import VisualizationContainer from './VisualizationContainer'
 import styled from 'styled-components'
 import { PeopleListContainer } from './PeopleList'

src/components/Login.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import LoginPrompt from './LoginPrompt'
+import { useAppDispatch, useAppSelector } from '../../app/hooks'
+import { login, logout, selectLoginStatus, selectSession } from './loginSlice'
+
+interface Props {
+  className?: string
+}
+
+const Login: React.FC<Props> = (
+  { className, ...props }: Props = { className: '' },
+) => {
+  const dispatch = useAppDispatch()
+  const info = useAppSelector(selectSession)
+  const status = useAppSelector(selectLoginStatus)
+
+  const commonProps = {
+    ...props,
+    className: `${className} button`,
+  }
+
+  return status === 'loading' ? (
+    <button {...commonProps} disabled>
+      Loading
+    </button>
+  ) : info.isLoggedIn ? (
+    <button {...commonProps} onClick={() => dispatch(logout())}>
+      {info.webId} Logout
+    </button>
+  ) : (
+    <LoginPrompt
+      {...commonProps}
+      onLogin={oidcIssuer => dispatch(login(oidcIssuer))}
+    />
+  )
+}
+
+export default Login

src/features/login/Login.tsx

@@ -0,0 +1,30 @@
+import {
+  login as solidLogin,
+  logout as solidLogout,
+  handleIncomingRedirect,
+} from '@inrupt/solid-client-authn-browser'
+
+export const init = async () => {
+  const sessionInfo = await handleIncomingRedirect({
+    url: window.location.href,
+    restorePreviousSession: true,
+  })
+  return sessionInfo
+}
+
+export const login = async (oidcIssuer: string) => {
+  try {
+    await solidLogin({
+      oidcIssuer,
+      redirectUrl: window.location.href,
+      clientName: 'Friends Crawler',
+    })
+  } catch (error) {
+    alert(`Could not find a Solid Pod at ${oidcIssuer}`)
+    localStorage.removeItem('idp')
+  }
+}
+
+export const logout = async () => {
+  await solidLogout()
+}