diff --git a/package.json b/package.json
index ba79604..d76e4c6 100644
--- a/package.json
+++ b/package.json
@@ -16,12 +16,16 @@
"@reduxjs/toolkit": "^1.7.2",
"@types/lodash.clonedeep": "^4.5.6",
"express": "^4.17.2",
+ "history": "^5.3.0",
"lodash.clonedeep": "^4.5.0",
"lodash.shuffle": "^4.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-is": "^17.0.2",
"react-redux": "^7.2.6",
+ "react-router-dom": "^6.2.1",
+ "redux": "^4.1.2",
+ "redux-first-history": "^5.0.8",
"socket.io": "^4.4.1",
"socket.io-client": "^4.4.1",
"styled-components": "^5.3.3"
@@ -38,6 +42,7 @@
"@types/styled-components": "^5.1.23",
"@typescript-eslint/eslint-plugin": "^5.9.1",
"@typescript-eslint/parser": "^5.9.1",
+ "core-js": "^3.21.1",
"eslint": "^8.7.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-airbnb-typescript": "^16.1.0",
diff --git a/setupTests.ts b/setupTests.ts
index 666127a..3655dae 100644
--- a/setupTests.ts
+++ b/setupTests.ts
@@ -1 +1,2 @@
import '@testing-library/jest-dom/extend-expect';
+import 'core-js';
diff --git a/src/client/components/App/App.spec.tsx b/src/client/components/App/App.spec.tsx
new file mode 100644
index 0000000..0373ec8
--- /dev/null
+++ b/src/client/components/App/App.spec.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { fireEvent, screen, render } from '@testing-library/react';
+
+import { App } from './App';
+import { store } from '@/client/redux/store';
+
+describe('App', () => {
+ it('goes to the compact decklist view', () => {
+ render(
+
+
+
+ );
+ expect(
+ screen.queryByText('Deal 3 damage to any target')
+ ).toBeInTheDocument();
+ fireEvent.click(screen.getByText('Compact Deck List'));
+ expect(
+ screen.queryByText('Deal 3 damage to any target')
+ ).not.toBeInTheDocument();
+ });
+});
diff --git a/src/client/components/App/App.tsx b/src/client/components/App/App.tsx
index fadfc07..b698e3e 100644
--- a/src/client/components/App/App.tsx
+++ b/src/client/components/App/App.tsx
@@ -1,14 +1,17 @@
import React, { useEffect } from 'react';
import { io, Socket } from 'socket.io-client';
import { useDispatch } from 'react-redux';
+import { HistoryRouter as Router } from 'redux-first-history/rr6';
+import { Link, Route, Routes } from 'react-router-dom';
import { DeckList } from '../DeckList';
import { CompactDeckList } from '../CompactDeckList';
import { makeSampleDeck1 } from '@/factories/deck';
import { disconnectUser, initializeUser } from '@/client/redux/user';
+import { AppDispatch, history } from '@/client/redux/store';
export const App: React.FC = () => {
- const dispatch = useDispatch();
+ const dispatch: AppDispatch = useDispatch();
const socket: Socket = io();
useEffect(() => {
socket.on('connect', () => {
@@ -23,8 +26,22 @@ export const App: React.FC = () => {
return (
-
-
+
+
+ Deck List 1
+
+ Compact Deck List
+
+
+ } />
+ }
+ />
+ } />
+
+
+
);
};
diff --git a/src/client/redux/store.ts b/src/client/redux/store.ts
index 29b665d..b382365 100644
--- a/src/client/redux/store.ts
+++ b/src/client/redux/store.ts
@@ -1,15 +1,30 @@
-import { configureStore } from '@reduxjs/toolkit';
+import { configureStore, combineReducers } from '@reduxjs/toolkit';
+import { createReduxHistoryContext } from 'redux-first-history';
+import { createBrowserHistory } from 'history';
+import { applyMiddleware } from 'redux';
+
import { userReducer, userSlice } from './user';
-export const store = configureStore({
- reducer: {
+const { createReduxHistory, routerMiddleware, routerReducer } =
+ createReduxHistoryContext({
+ history: createBrowserHistory(),
+ });
+
+const createRootReducer = () =>
+ combineReducers({
+ router: routerReducer,
user: userReducer,
- },
+ });
+
+export const store = configureStore({
+ reducer: createRootReducer(),
devTools: true,
+ enhancers: [applyMiddleware(routerMiddleware)],
preloadedState: {
user: userSlice.getInitialState(),
},
});
+export const history = createReduxHistory(store);
// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType;
diff --git a/yarn.lock b/yarn.lock
index 6ad0338..ebe070a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -262,7 +262,7 @@
dependencies:
"@babel/helper-plugin-utils" "^7.16.7"
-"@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.7.6", "@babel/runtime@^7.9.2":
version "7.17.2"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
integrity sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==
@@ -1803,6 +1803,11 @@ cookie@0.4.2, cookie@~0.4.1:
resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
+core-js@^3.21.1:
+ version "3.21.1"
+ resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.21.1.tgz#f2e0ddc1fc43da6f904706e8e955bc19d06a0d94"
+ integrity sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig==
+
cors@~2.8.5:
version "2.8.5"
resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
@@ -2785,6 +2790,13 @@ has@^1.0.3:
dependencies:
function-bind "^1.1.1"
+history@^5.2.0, history@^5.3.0:
+ version "5.3.0"
+ resolved "https://registry.yarnpkg.com/history/-/history-5.3.0.tgz#1548abaa245ba47992f063a0783db91ef201c73b"
+ integrity sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==
+ dependencies:
+ "@babel/runtime" "^7.7.6"
+
hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -4391,6 +4403,21 @@ react-redux@^7.2.6:
prop-types "^15.7.2"
react-is "^17.0.2"
+react-router-dom@^6.2.1:
+ version "6.2.1"
+ resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.2.1.tgz#32ec81829152fbb8a7b045bf593a22eadf019bec"
+ integrity sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==
+ dependencies:
+ history "^5.2.0"
+ react-router "6.2.1"
+
+react-router@6.2.1:
+ version "6.2.1"
+ resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.2.1.tgz#be2a97a6006ce1d9123c28934e604faef51448a3"
+ integrity sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==
+ dependencies:
+ history "^5.2.0"
+
react@^17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -4421,6 +4448,11 @@ redent@^3.0.0:
indent-string "^4.0.0"
strip-indent "^3.0.0"
+redux-first-history@^5.0.8:
+ version "5.0.8"
+ resolved "https://registry.yarnpkg.com/redux-first-history/-/redux-first-history-5.0.8.tgz#672ccee4837f2453d071f8e4c9e47137bc293152"
+ integrity sha512-JwTKQwEiIxhRk0g234+GlSQtiAUBcBOeHZJvY2YEFMO80ANTHme16Ip2a998hkhzGtKJxUKragOCUiGaTiwOHw==
+
redux-thunk@^2.4.1:
version "2.4.1"
resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz#0dd8042cf47868f4b29699941de03c9301a75714"