Commit babfe66e authored by David Haynes's avatar David Haynes 🙆

Some comments and pretter

- I'm basically learning redux my commenting my way through
and refactoring some things a bit (stateless functions anyone?)
parent 8ce76ff4
export const ADD_SECTION = '[Schedule] ADD_SECTION';
export const REMOVE_SECTION = '[Schedule] REMOVE_SECTION';
\ No newline at end of file
export const REMOVE_SECTION = '[Schedule] REMOVE_SECTION';
import { ADD_SECTION, REMOVE_SECTION } from "./schedule.action-types";
import { Section } from "../../ts/section";
import { Section } from '../../ts/section';
import { ADD_SECTION, REMOVE_SECTION } from './schedule.action-types';
export interface ScheduleAction {
type: string;
......@@ -9,13 +9,13 @@ export interface ScheduleAction {
export const addSection = (section: Section): ScheduleAction => {
return {
type: ADD_SECTION,
section: section
section: section,
};
}
};
export const removeSection = (section: Section): ScheduleAction => {
return {
type: REMOVE_SECTION,
section: section
section: section,
};
}
\ No newline at end of file
};
export const SET_SEARCH_SECTIONS = '[Search] SET_SECTIONS';
\ No newline at end of file
export const SET_SEARCH_SECTIONS = '[Search] SET_SECTIONS';
import { SET_SEARCH_SECTIONS } from './search.action-types';
import { Section } from '../../ts/section';
import { SET_SEARCH_SECTIONS } from './search.action-types';
export interface SearchAction {
type: string;
......@@ -24,6 +24,6 @@ export const searchSections = (crn: string) => async (dispatch: any) => {
dispatch({
type: SET_SEARCH_SECTIONS,
sections: [section]
sections: [section],
});
}
\ No newline at end of file
};
......@@ -10,7 +10,6 @@ interface Props {
export default class SectionList extends React.Component<Props, any> {
constructor(props: Props) {
super(props);
this.state = {};
}
render() {
......
import * as React from 'react';
import { connect } from 'react-redux';
import { removeSection } from '../actions/schedule/schedule.actions';
import SectionList from '../components/SectionList';
import { State } from '../reducers';
import { Section } from '../ts/section';
import { downloadCalendar, ENDPOINTS, postData } from '../ts/utilities';
import Search from './Search';
import SectionList from '../components/SectionList';
import { connect } from 'react-redux';
import {State} from '../reducers';
import { removeSection } from '../actions/schedule/schedule.actions';
interface AppProps {
schedule: Section[];
......@@ -20,7 +20,13 @@ class App extends React.Component<AppProps> {
render() {
return (
<div>
<h1>Schedules</h1>
<h1 className="display-3">
<span className="fa-stack mr-3">
<i className="fas fa-circle fa-stack-2x" />
<i className="fas fa-flag fa-stack-1x fa-inverse" />
</span>
Schedules
</h1>
<h2>Search</h2>
<Search />
<h2>Your schedule</h2>
......@@ -44,10 +50,18 @@ class App extends React.Component<AppProps> {
};
}
/**
* Take the current schedule in the store and map it to the <App /> component.
* @param state The current Redux store state.
*/
const mapStateToProps = (state: State) => ({
schedule: state.schedule
schedule: state.schedule,
});
export default connect(mapStateToProps, {
removeSection
})(App);
\ No newline at end of file
/**
* Ensure that the Redux state is passed into the component.
*/
export default connect(
mapStateToProps,
{ removeSection }
)(App);
import * as React from 'react';
import { Section } from '../ts/section';
import { connect } from 'react-redux';
import { addSection } from '../actions/schedule/schedule.actions';
import { searchSections } from '../actions/search/search.actions';
import SearchBar from '../components/SearchBar';
import SectionList from '../components/SectionList';
import { connect } from 'react-redux';
import { State } from '../reducers';
import { searchSections } from '../actions/search/search.actions';
import { addSection } from '../actions/schedule/schedule.actions';
import { Section } from '../ts/section';
interface SearchProps {
searchedSections: Section[];
......@@ -33,10 +33,10 @@ class Search extends React.Component<SearchProps> {
}
const mapStateToProps = (state: State) => ({
searchedSections: state.search.searchedSections
searchedSections: state.search.searchedSections,
});
export default connect(mapStateToProps, {
searchSections,
addSection
})(Search);
\ No newline at end of file
export default connect(
mapStateToProps,
{ searchSections, addSection }
)(Search);
/**
* index.tsx
*
* The entry point for the application. Apply global styling, configure high
* level (global application) settings and render <App />. Simple.
*/
// Apply Global Masonstrap styling
import 'masonstrap/build/css/masonstrap.min.css';
import 'masonstrap/build/js/masonstrap.min.js';
import {applyMiddleware, compose, createStore} from 'redux';
import ReduxThunk from 'redux-thunk';
import {Provider} from 'react-redux';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { applyMiddleware, compose, createStore } from 'redux';
import ReduxThunk from 'redux-thunk';
import App from './containers/App';
import { reducers } from './reducers';
import { allReducers } from './reducers';
declare global {
interface Window {
__REDUX_DEVTOOLS_EXTENSION__?: () => any;
}
}
const extension = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
const isProduction = process.env.NODE_ENV === 'production';
let enhance;
let addOns;
if (isProduction || !extension) {
enhance = compose(applyMiddleware(ReduxThunk));
addOns = compose(applyMiddleware(ReduxThunk));
} else {
enhance = compose(applyMiddleware(ReduxThunk), extension);
addOns = compose(
applyMiddleware(ReduxThunk),
extension
);
}
const store = createStore(reducers, enhance);
const store = createStore(allReducers, addOns);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('root'));
\ No newline at end of file
</Provider>,
document.getElementById('root')
);
......@@ -2,18 +2,21 @@ import { schedule, ScheduleState } from './schedule.reducer';
import { search, SearchState } from './search.reducer';
export interface State {
schedule: ScheduleState
search: SearchState
schedule: ScheduleState;
search: SearchState;
}
/**
* If there is no current state passed in then initialize as nothing.
*/
const defaultState: State = {
schedule: [],
search: {
searchedSections: []
}
searchedSections: [],
},
};
export const reducers = (state: State = defaultState, action: any) => ({
export const allReducers = (state: State = defaultState, action: any) => ({
schedule: schedule(state.schedule, action),
search: search(state.search, action)
})
\ No newline at end of file
search: search(state.search, action),
});
import { Section } from '../ts/section';
import { ADD_SECTION, REMOVE_SECTION } from '../actions/schedule/schedule.action-types';
import { ScheduleAction } from '../actions/schedule/schedule.actions';
import { Section } from '../ts/section';
export type ScheduleState = Section[];
export const schedule = (state: ScheduleState = [], action: ScheduleAction) => {
switch (action.type) {
case ADD_SECTION:
return state.findIndex(s => s.crn === action.section.crn) === -1 ?
[...state, action.section] :
state;
return state.findIndex(s => s.crn === action.section.crn) === -1 ? [...state, action.section] : state;
case REMOVE_SECTION:
return state.filter(s => s.crn !== action.section.crn);
default:
return state;
}
};
\ No newline at end of file
};
import { SET_SEARCH_SECTIONS } from '../actions/search/search.action-types';
import { SearchAction } from './../actions/search/search.actions';
import { Section } from './../ts/section';
import { SET_SEARCH_SECTIONS } from '../actions/search/search.action-types';
export interface SearchState {
searchedSections: Section[];
}
export const search = (state: SearchState = {searchedSections: []}, action: SearchAction) => {
export const search = (state: SearchState = { searchedSections: [] }, action: SearchAction) => {
switch (action.type) {
case SET_SEARCH_SECTIONS:
return Object.assign({}, state, {
searchedSections: [...action.sections]
searchedSections: [...action.sections],
});
default:
return state;
}
}
\ No newline at end of file
};
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