Skip to content

Commit

Permalink
Add Redux store
Browse files Browse the repository at this point in the history
  • Loading branch information
kartikcode authored Jul 12, 2020
1 parent 2a32c7b commit b04833a
Show file tree
Hide file tree
Showing 9 changed files with 193 additions and 14 deletions.
36 changes: 36 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 5 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,12 @@
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-icons": "^3.9.0",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1"
"react-scripts": "3.4.1",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"reselect": "^4.0.0"
},
"scripts": {
"start": "react-scripts start",
Expand Down
20 changes: 12 additions & 8 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React, { useState, useMemo } from "react";
import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import { Provider } from "react-redux";
import store from "./redux/store";

import Mainframe from "./Mainframe";
import Login from "./screens/login";
Expand Down Expand Up @@ -31,14 +33,16 @@ function App() {
}

return (
<ThemeProvider theme={theme}>
<BrowserRouter>
<Switch>
<Route exact path="/login" component={Login} />
<PrivateRoute path="/" component={Mainframe} />
</Switch>
</BrowserRouter>
</ThemeProvider>
<Provider store={store}>
<ThemeProvider theme={theme}>
<BrowserRouter>
<Switch>
<Route exact path="/login" component={Login} />
<PrivateRoute path="/" component={Mainframe} />
</Switch>
</BrowserRouter>
</ThemeProvider>
</Provider>
);
}

Expand Down
10 changes: 7 additions & 3 deletions src/components/sidebar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import { makeStyles } from "@material-ui/core/styles";
import "./style.css";
import { Typography } from "@material-ui/core";
import { indigo, grey, blueGrey } from "@material-ui/core/colors";
import { useSelector } from "react-redux";
import { subscribedStreams, userProfile } from "../../redux/selectors";

const useStyles = makeStyles((theme) => {
const dark = theme.palette.type === "dark";
Expand Down Expand Up @@ -80,19 +82,21 @@ function StreamsList(props) {
);
}

function Sidebar(props) {
function Sidebar() {
const classes = useStyles();
const streams = useSelector(subscribedStreams);
const user = useSelector(userProfile);
return (
<nav>
<Drawer variant="permanent" anchor="left" width="100%">
<Typography variant="h4" className={classes.appName}>
Campus Discuss
</Typography>
<div className="streams-list-wrapper">
<StreamsList streams={props.streams} />
<StreamsList streams={streams} />
</div>
<div className="profile">
<Profile name={props.name} />
<Profile name={user.name} />
</div>
</Drawer>
</nav>
Expand Down
23 changes: 23 additions & 0 deletions src/redux/actions/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
//Add action for subscribing the stream
export const AddStream = (stream) => {
return {
type: "ADD_STREAM",
id: stream.id,
};
};

// Add action for unsubscribing the stream
export const DelStream = (stream) => {
return {
type: "DEL_STREAM",
id: stream.id,
};
};

// Add action for changing the id of the active stream
export const ActiveStream = (stream) => {
return {
type: "ACTIVE_STREAM",
id: stream.id,
};
};
47 changes: 47 additions & 0 deletions src/redux/reducers/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
// Imports all the required actions
import { AddStream, DelStream, ActiveStream } from "../actions";

// initial state defined for the reducers and selectors
export const initialState = {
userProfile: {
name: null,
},
streams: [],
activeStreamId: {},
};

// defining the reducer for the actions imported
export const handleAction = (state = initialState, action) => {
const { userProfile, streams, activeStreamId } = state;
switch (action.type) {
case "ADD_STREAM": {
const new_stream;
for (let i = 0; i < streams.length; i++) {
if (streams[i].id === action.id) {
new_stream = streams[i];
break;
}
}
let updated_streams = streams;
updated_streams.push(new_stream);
const updated_state = { userProfile, updated_streams, activeStreamId };
return updated_state;
}

case "DEL_STREAM": {
const updated_streams = streams.filter((stream) => stream.id !== action.id);
const updated_state = { userProfile, updated_streams, activeStreamId };
return updated_state;
}


case "ACTIVE_STREAM": {
const updated_activeStreamId = action.id;
const updated_state = { userProfile, streams, updated_activeStreamId };
return updated_state;
}

default:
return state;
}
};
23 changes: 23 additions & 0 deletions src/redux/selectors/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { createSelector } from "reselect";
import { handleAction, initialState } from "../reducers";

// defining selector for list of the subscribed streams
export const subscribedStreams = createSelector(
(state = initialState) => state.streams
);

// defining selector for returning the active stream
export const activeStream = createSelector(
(state = initialState) => {
for (let i = 0; i < state.streams.length; i++){
if (state.streams[i].id === state.activeStreamId) {
return state.streams[i];
}
}
}
);

// defining selector for returning the user profile details
export const userProfile = createSelector(
(state = initialState) => state.userProfile
);
9 changes: 9 additions & 0 deletions src/redux/store/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { createStore } from "redux";
import { handleAction } from "../reducers";

const store = createStore(
handleAction,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default store;
33 changes: 31 additions & 2 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -4974,7 +4974,7 @@ hmac-drbg@^1.0.0:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1"

hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2:
hoist-non-react-statics@^3.1.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"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
Expand Down Expand Up @@ -8720,11 +8720,22 @@ react-icons@^3.9.0:
dependencies:
camelcase "^5.0.0"

react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4:
react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.9.0:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==

react-redux@^7.2.0:
version "7.2.0"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.0.tgz#f970f62192b3981642fec46fd0db18a074fe879d"
integrity sha512-EvCAZYGfOLqwV7gh849xy9/pt55rJXPwmYvI4lilPM5rUT/1NxuuN59ipdBksRVSvz0KInbPnp4IfoXJXCqiDA==
dependencies:
"@babel/runtime" "^7.5.5"
hoist-non-react-statics "^3.3.0"
loose-envify "^1.4.0"
prop-types "^15.7.2"
react-is "^16.9.0"

react-router-dom@^5.1.2:
version "5.1.2"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18"
Expand Down Expand Up @@ -8927,6 +8938,14 @@ redent@^3.0.0:
indent-string "^4.0.0"
strip-indent "^3.0.0"

redux@^4.0.5:
version "4.0.5"
resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
dependencies:
loose-envify "^1.4.0"
symbol-observable "^1.2.0"

regenerate-unicode-properties@^8.2.0:
version "8.2.0"
resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
Expand Down Expand Up @@ -9105,6 +9124,11 @@ requires-port@^1.0.0:
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=

reselect@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==

resolve-cwd@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
Expand Down Expand Up @@ -10037,6 +10061,11 @@ svgo@^1.0.0, svgo@^1.2.2:
unquote "~1.1.1"
util.promisify "~1.0.0"

symbol-observable@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==

symbol-tree@^3.2.2:
version "3.2.4"
resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
Expand Down

0 comments on commit b04833a

Please sign in to comment.