Commit 5ed65e70 authored by Aron Fiechter's avatar Aron Fiechter
Browse files

Create AboutModal with redux slice, containing About

parent a86df8ad
......@@ -5,6 +5,7 @@ import voronoiReducer from '../components/voronoi/voronoiSlice';
import queryReducer from '../components/navbar/querySlice';
import searchReducer from '../components/search/searchSlice';
import yearRangeReducer from '../components/yearrange/yearRangeSlice';
import aboutReducer from '../components/about/aboutSlice';
import config from '../config';
const middleware = [...getDefaultMiddleware(), ...(config.ENV.IS_PRODUCTION ? [] : [logger])];
......@@ -16,6 +17,7 @@ export default configureStore({
query: queryReducer,
search: searchReducer,
yearRange: yearRangeReducer,
about: aboutReducer,
},
middleware,
});
import React from 'react';
import Modal from 'react-bootstrap/Modal';
import Button from 'react-bootstrap/Button';
import { useDispatch, useSelector } from 'react-redux';
import { closeAboutModal, selectAboutModalOpen } from './aboutSlice';
import About from './About';
export default function AboutModal(props) {
const dispatch = useDispatch();
const aboutModalOpen = useSelector(selectAboutModalOpen);
// Function to close modal
const handleClose = () => dispatch(closeAboutModal());
return (
<Modal show={aboutModalOpen} onHide={handleClose} backdrop="static" keyboard={false} size="md">
<Modal.Header closeButton>
<Modal.Title>About Mímir</Modal.Title>
</Modal.Header>
<Modal.Body className="p-sm-0">
<About />
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
);
}
import { createSlice } from '@reduxjs/toolkit';
export const aboutSlice = createSlice({
name: 'about',
initialState: {
aboutModalOpen: false,
},
reducers: {
// Redux Toolkit allows us to write "mutating" logic in reducers. It
// doesn't actually mutate the state because it uses the Immer library,
// which detects changes to a "draft state" and produces a brand new
// immutable state based off those changes
openAboutModal: (state) => {
state.aboutModalOpen = true;
},
closeAboutModal: (state) => {
state.aboutModalOpen = false;
},
},
});
export const { openAboutModal, closeAboutModal } = aboutSlice.actions;
export const selectAboutModalOpen = (state) => state.about.aboutModalOpen;
export default aboutSlice.reducer;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment