oshell oshell

🎯

Focusing

I like to build stuff from scratch.

oshell / foo.html

Created May 21, 2019 13:44

react example reset state when going back

	<html>
	<head>
	<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
	</head>
	<body>
	<div id="app"></div>
	<script type="text/babel">
	class Foo extends React.Component {

oshell / SaerchBar.js

Created December 8, 2018 15:58

SaerchBar.js

oshell / App.js

Created December 8, 2018 15:48

App.js

	import React from 'react';
	import { Container } from 'semantic-ui-react'
	import RestaurantList from '../../container/RestaurantList/RestaurantList';
	import SearchBar from '../SearchBar/SearchBar';
	import { Provider } from 'react-redux';
	import { store } from '../../store';

	const App = () => {
	return(
	<Provider store={store}>

oshell / store.js

Created December 8, 2018 15:46

store.js

	import { createStore } from 'redux';
	import { rootReducer } from './reducers/rootReducer';

	export const store = createStore(rootReducer);

oshell / rootReducer.js

Created December 8, 2018 15:43

rootReducer.js

	import { combineReducers } from 'redux';
	import { restaurantsReducer } from './restaurantsReducer';

	export const rootReducer = combineReducers({
	restaurantsReducer
	});

oshell / restaurantsReducer.js

Created December 8, 2018 15:23

restaurantsReducer.js

	import * as actions from '../actions/index';
	import Utility from '../controller/Utility/Utility';

	export const restaurantsReducer = (state = {}, action) => {
	switch (action.type) {
	case actions.SEARCH:
	return Utility.search(action.payload.term, state);
	default:
	return state;
	}

oshell / actions.js

Created December 8, 2018 15:14

Action Creator

oshell / Searchbar.js

Created December 8, 2018 14:54

	import React, { Component } from 'react';
	import { Input as SemanticInput } from 'semantic-ui-react';
	import { connect } from 'react-redux';
	import { search } from '../../actions/index';

	class Input extends Component {
	render() {
	return(
	<SemanticInput
	onChange={(e) => {this.props.search(e.target.value);}}

oshell / App.js

Created December 8, 2018 14:38

Redux App.js

oshell / App.js

Last active December 9, 2018 12:34

	class App extends Component {
	constructor(props){
	super(props);

	this.state = {
	restaurants: initialRestaurants,
	sorting: initialSorting,
	}

	this.toggleFavourite = this.toggleFavourite.bind(this);