{"id":20169955,"url":"https://github.com/cnocon/weather-charts-app","last_synced_at":"2026-05-23T16:43:32.875Z","repository":{"id":124609389,"uuid":"113204938","full_name":"cnocon/weather-charts-app","owner":"cnocon","description":"submodule of react-with-redux","archived":false,"fork":false,"pushed_at":"2017-12-06T03:46:55.000Z","size":127,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-12-01T16:23:16.390Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cnocon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.MD","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-05T16:16:14.000Z","updated_at":"2019-06-20T17:19:12.000Z","dependencies_parsed_at":null,"dependency_job_id":"9b0abe29-1ccb-45d1-b1f9-f55bb8d12f64","html_url":"https://github.com/cnocon/weather-charts-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cnocon/weather-charts-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cnocon%2Fweather-charts-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cnocon%2Fweather-charts-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cnocon%2Fweather-charts-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cnocon%2Fweather-charts-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cnocon","download_url":"https://codeload.github.com/cnocon/weather-charts-app/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cnocon%2Fweather-charts-app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33404268,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-23T04:15:53.637Z","status":"ssl_error","status_checked_at":"2026-05-23T04:15:53.242Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-14T01:14:56.550Z","updated_at":"2026-05-23T16:43:32.855Z","avatar_url":"https://github.com/cnocon.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Weather Charts App\nbased on fork of https://github.com/StephenGrider/ReduxSimpleStarter.git\nWhat we're building\n![](https://www.dropbox.com/s/tkxfwms3q1fuldy/Screenshot%202017-12-05%2010.23.00.png?raw=1)\n\nFirst container: search bar (it's a container because it needs to talk to redux, bc it's input determines what shows on hte page, so there's events)\n\n# AJAX w/Redux\n![middleware chart](https://www.dropbox.com/s/43jhpcjb7uia6co/Screenshot%202017-12-05%2010.53.54.png?raw=1)\nMiddlewares take the action, and depending on the action type or any other factor, the middleware can choose to let the action pass through, manipulate it, stop it all together whatever BEFORE they reach a reducer. They're kind of like gatekeepers.\n\nFor helping w/ajax requests:\n`npm install --save redux-promise`\n\nHook it up via src/index.js: \n`import ReduxPromise from 'redux-promise';`\n`const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);`\n\n# Creating the ajax request\nOur app state holds all the data of our application, including the weather data. We only change our application state through our reducers and actions, so to load our weather data, we need to dispatch an action (call an action creator) that is responsible for making that ajax request.\n// action creators always have to return action with type and optionally a payload\n\nwe'll use axios module to simplify making the ajax request (so we don't have to include the entire jquery library)\n`npm install --save axios`\n\n\n# Adding a reducer\nUser submits form which calls action creator (and passes city), we then craft url w/city, and make an ajax request w/axios. Axios returns a promise. A promise is a data structure that doesn't yet contain the request data \n\n**_it's important to note that we're returning teh promise in the payload key in the fetchWeather action creator (see actions/index.js)_**\n\u003e **HERE'S WHERE MIDDLEWARE IS FANTASTIC: redux promise it forces the action return statement to wait until the promise from the ajax request (well, the axios call) finalizes into an object - so the payload is an actual object and exists - SUPER HELPFUL.**\n\n![redux promise as middleware](https://www.dropbox.com/s/0t63yl5g8uwy7ad/Screenshot%202017-12-05%2011.45.44.png?raw=1)\n\n\u003e **NEVER mutate the current state in your reducer; you want to return a brand new object. so instead of doing something like `return state.push(action.payload.data)`, which mutates the original state array, you want to use a method that creates a new object, like `.concat`, which takes two arrays and creates a new one, like `return state.concat([action.payload.data]);`**\n\n---\n\n# For containers\nExample: the WeatherList container (containers/weather_list)\n```js\nimport { connect } from 'react-redux';\nimport { bindActionCreators } from 'redux';\n\nexport class WeatherList extends Component {\n  // ...\n}\n\nfunction mapStateToProps({weather}) { // ES6 equivalent to function mapStateToProps(state) {\n  return { weather }; // ES6 equivalent to return { weather: state.weather };\n}\n\nexport default connect (mapStateToProps)(WeatherList);\n```\n\n---\n\n# Mapping props to a render helper\nhttps://www.udemy.com/react-redux/learn/v4/t/lecture/4284608?start=0\n\n![Redux State diagram](https://www.dropbox.com/s/92ozsxpcgkwbhzy/Screenshot%202017-12-05%2012.48.23.png?raw=1)\n\n---\nref is a utillity in react that gives you a direct reference to this element w/the ref='' that you can reference anywhere else inside the component via this.refs.map\n`return \u003cdiv ref=\"map\" /\u003e`\n\n```js\nimport React, { Component } from 'react';\n\nclass GoogleMap extends Component {\n/**\n  * componentDidMount is called after this component is rendered to the screen\n  */\n  componentDidMount() {\n  /**\n    * new google.maps.Map is how we create an embedded google map inside our document\n    * google.maps.map takes a reference to a DOM node (this.refs.map), then\n    * it finds that element on the screen, and renders an embedded map into it\n    */\n    new google.maps.Map(this.refs.map, {\n    /**\n      * Level 12 zoom allows zooming in enough to get good glimpse of city\n      */\n      zoom: 12,\n      center: {\n        lat: this.props.lat,\n        lng: this.props.lon\n      }\n    });\n  }\n  render() {\n    return \u003cdiv ref=\"map\" /\u003e;\n  }\n}\n\nexport default GoogleMap;\n```\n\n\u003e ---\n\u003e **es6 syntax**\n\u003e \n\u003e in es6,\n\u003e ```js\n\u003e const { lon, lat } = cityData.city.coord;\n\u003e ```\n\u003e is equivalent to \n\u003e ```js\n\u003e const lon = cityData.city.coord.lon;\n\u003e const lat = cityData.city.coord.lat;\n\u003e ```\n\u003e ---\n\n\n# REVIEW\n\n* REDUX-PROMISE IS AN AWESOME PACKAGE TO INCLUDE - it helped simplify waiting for the ajax request promise to return the object.\n* Never mutate state directly in reducers; instead return a new object to take its place\n* sparklines library (react-sparklines)\n* react-google-maps for google maps WAYYY simplified bc otherwise it'd be tougher to integrate\n\n---\n\n# Boilerplate: ReduxSimpleStarter\n\nInterested in learning [Redux](https://www.udemy.com/react-redux/)?\n\n### Getting Started\n\nThere are two methods for getting started with this repo.\n\n#### Familiar with Git?\nCheckout this repo, install dependencies, then start the gulp process with the following:\n\n```\n\u003e git clone https://github.com/StephenGrider/ReduxSimpleStarter.git\n\u003e cd ReduxSimpleStarter\n\u003e npm install\n\u003e npm start\n```\n\n#### Not Familiar with Git?\nClick [here](https://github.com/StephenGrider/ReactStarter/releases) then download the .zip file.  Extract the contents of the zip file, then open your terminal, change to the project directory, and:\n\n```\n\u003e npm install\n\u003e npm start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcnocon%2Fweather-charts-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcnocon%2Fweather-charts-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcnocon%2Fweather-charts-app/lists"}