\n );\n}\n\nexport default SearchBox;"
},
{
"path": "src/constants.js",
"content": "export const CHANGE_SEARCHFIELD = 'CHANGE_SEARCHFIELD';\n\nexport const REQUEST_ROBOTS_PENDING = 'REQUEST_ROBOTS_PENDING';\nexport const REQUEST_ROBOTS_SUCCESS = 'REQUEST_ROBOTS_SUCCESS';\nexport const REQUEST_ROBOTS_FAILED = 'REQUEST_ROBOTS_FAILED';"
},
{
"path": "src/containers/App.css",
"content": "/* #### Generated By: http://www.cufonfonts.com #### */\n\n@font-face {\nfont-family: 'SEGA LOGO FONT';\nfont-style: normal;\nfont-weight: normal;\nsrc: local('SEGA LOGO FONT'), url('SEGA.woff') format('woff');\n}\n\nh1 {\n font-family: 'SEGA LOGO FONT';\n font-weight: 200;\n color: #0ccac4;\n}"
},
{
"path": "src/containers/App.js",
"content": "import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { setSearchField, requestRobots } from '../actions';\n\nimport CardList from '../components/CardList';\nimport SearchBox from '../components/SearchBox';\nimport Scroll from '../components/Scroll';\nimport ErrorBoundry from '../components/ErrorBoundry';\n\nimport './App.css';\n\n// parameter state comes from index.js provider store state(rootReducers)\nconst mapStateToProps = (state) => {\n return {\n searchField: state.searchRobots.searchField,\n robots: state.requestRobots.robots,\n isPending: state.requestRobots.isPending\n }\n}\n\n// dispatch the DOM changes to call an action. note mapStateToProps returns object, mapDispatchToProps returns function\n// the function returns an object then uses connect to change the data from redecers.\nconst mapDispatchToProps = (dispatch) => {\n return {\n onSearchChange: (event) => dispatch(setSearchField(event.target.value)),\n onRequestRobots: () => dispatch(requestRobots())\n }\n}\n\nclass App extends Component {\n componentDidMount() {\n this.props.onRequestRobots();\n }\n\n render() {\n const { robots, searchField, onSearchChange, isPending } = this.props;\n const filteredRobots = robots.filter(robot => {\n return robot.name.toLowerCase().includes(searchField.toLowerCase());\n })\n return (\n
\n
RoboFriends
\n \n \n { isPending ?
Loading
:\n \n \n \n }\n \n
\n );\n }\n}\n\n// action done from mapDispatchToProps will channge state from mapStateToProps\nexport default connect(mapStateToProps, mapDispatchToProps)(App)\n"
},
{
"path": "src/index.css",
"content": "body {\n margin: 0;\n padding: 0;\n font-family: sans-serif;\n background: linear-gradient(to left, rgba(7,27,82,1) 0%, rgba(0,128,128,1) 100%); /* w3c */\n}\n"
},
{
"path": "src/index.js",
"content": "import React from 'react';\n// import ReactDOM from 'react-dom'; The new way to import createRoot:\nimport { createRoot } from \"react-dom/client\";\nimport { createStore, combineReducers, applyMiddleware } from 'redux';\nimport { Provider } from 'react-redux';\n\n//import thunkMiddleware from 'redux-thunk';\n//NEW way of importing redux-thunk:\nimport { thunk } from 'redux-thunk';\nimport { createLogger } from 'redux-logger';\nimport 'tachyons';\n\nimport App from './containers/App';\nimport registerServiceWorker from './registerServiceWorker';\nimport { requestRobots, searchRobots } from './reducers'\n\nimport './index.css';\n\nconst logger = createLogger() \n\nconst rootReducers = combineReducers({requestRobots, searchRobots})\n\nconst store = createStore(rootReducers, applyMiddleware(thunk, logger))\n\nconst root = createRoot(document.getElementById('root'));\nroot.render(\n\n \n\n);\n\n// ReactDOM.render(\n// \n// \n// ,\n// document.getElementById('root')\n// );\nregisterServiceWorker();\n\n"
},
{
"path": "src/reducers.js",
"content": "import {\n CHANGE_SEARCHFIELD,\n REQUEST_ROBOTS_PENDING,\n REQUEST_ROBOTS_SUCCESS,\n REQUEST_ROBOTS_FAILED\n } from './constants';\n\nconst initialStateSearch = {\n searchField: ''\n}\n\nexport const searchRobots = (state=initialStateSearch, action={}) => {\n switch (action.type) {\n case CHANGE_SEARCHFIELD:\n return Object.assign({}, state, {searchField: action.payload})\n default:\n return state\n }\n}\n\nconst initialStateRobots = {\n robots: [],\n isPending: true\n}\n\nexport const requestRobots = (state=initialStateRobots, action={}) => {\n switch (action.type) {\n case REQUEST_ROBOTS_PENDING:\n return Object.assign({}, state, {isPending: true})\n case REQUEST_ROBOTS_SUCCESS:\n return Object.assign({}, state, {robots: action.payload, isPending: false})\n case REQUEST_ROBOTS_FAILED:\n return Object.assign({}, state, {error: action.payload})\n default:\n return state\n }\n}\n"
},
{
"path": "src/registerServiceWorker.js",
"content": "// In production, we register a service worker to serve assets from local cache.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on the \"N+1\" visit to a page, since previously\n// cached resources are updated in the background.\n\n// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.\n// This link also includes instructions on opting out of this behavior.\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport default function register() {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Lets check if a service worker still exists or not.\n checkValidServiceWorker(swUrl);\n } else {\n // Is not local host. Just register service worker\n registerValidSW(swUrl);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the old content will have been purged and\n // the fresh content will have been added to the cache.\n // It's the perfect time to display a \"New content is\n // available; please refresh.\" message in your web app.\n console.log('New content is available; please refresh.');\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n if (\n response.status === 404 ||\n response.headers.get('content-type').indexOf('javascript') === -1\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}\n"
}
]