Commit ea240443 authored by David Haynes's avatar David Haynes 🙆
Browse files

Begin seperation of smart, dumb components

parent 6abd3425
import * as React from 'react';
import Search from '../containers/Search';
import Header from './Header';
const App = () => (
<div>
<Header />
<Search />
</div>
);
export default App;
import * as React from 'react';
const Header = () => (
<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>
);
export default Header;
import * as React from 'react';
import SearchBar from '../components/SearchBar';
import SectionList from '../components/SectionList';
import { Section } from '../util/section';
interface SearchProps {
searchedSections: Section[];
searchSections: (crn: string) => any;
addSection: (section: Section) => any;
}
const Search = ({ searchedSections, searchSections, addSection }: SearchProps) => (
<div>
<SearchBar onSearch={searchSections} />
<SectionList sections={searchedSections} buttonText="Add to schedule" selectSectionCallback={addSection} />
</div>
);
export default Search;
......@@ -5,7 +5,6 @@ import SectionList from '../components/SectionList';
import { State } from '../reducers';
import { Section } from '../util/section';
import { downloadCalendar, ENDPOINTS, postData } from '../util/utilities';
import Search from './Search';
interface AppProps {
schedule: Section[];
......@@ -20,15 +19,6 @@ class App extends React.Component<AppProps> {
render() {
return (
<div>
<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>
<SectionList
sections={this.props.schedule}
......
import * as React from 'react';
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 Search from '../components/Search';
import { State } from '../reducers';
import { Section } from '../util/section';
interface SearchProps {
searchedSections: Section[];
searchSections: (crn: string) => any;
addSection: (section: Section) => any;
}
class Search extends React.Component<SearchProps> {
constructor(props: SearchProps) {
super(props);
}
render() {
return (
<div>
<SearchBar onSearch={this.props.searchSections} />
<SectionList
sections={this.props.searchedSections}
buttonText="Add to schedule"
selectSectionCallback={this.props.addSection}
/>
</div>
);
}
}
const mapStateToProps = (state: State) => ({
searchedSections: state.search.searchedSections,
......
......@@ -13,7 +13,7 @@ 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 App from './components/App';
import { allReducers } from './reducers';
declare global {
......
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