Repository: aneagoie/robofriends-redux
Branch: master
Commit: e8e0e3db25e9
Files: 19
Total size: 13.6 KB
Directory structure:
gitextract_kxxhc1gn/
├── .gitignore
├── README.md
├── package.json
├── public/
│ ├── index.html
│ └── manifest.json
└── src/
├── actions.js
├── api/
│ └── api.js
├── components/
│ ├── Card.js
│ ├── CardList.js
│ ├── ErrorBoundry.js
│ ├── Scroll.js
│ └── SearchBox.js
├── constants.js
├── containers/
│ ├── App.css
│ └── App.js
├── index.css
├── index.js
├── reducers.js
└── registerServiceWorker.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
================================================
FILE: README.md
================================================
# robofriends
React + Redux
To run the project:
1. Clone this repo
2. Run `npm install`
3. Run `npm start`
*visit https://zerotomastery.io/ for more*
================================================
FILE: package.json
================================================
{
"name": "robofriends",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^19.1.1",
"react-dom": "^19.1.1",
"react-redux": "^9.2.0",
"react-scripts": "^5.0.1",
"redux": "^5.0.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^3.1.0",
"tachyons": "^4.12.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
================================================
FILE: public/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
================================================
FILE: public/manifest.json
================================================
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
================================================
FILE: src/actions.js
================================================
import { apiCall } from './api/api'
import {
CHANGE_SEARCHFIELD,
REQUEST_ROBOTS_PENDING,
REQUEST_ROBOTS_SUCCESS,
REQUEST_ROBOTS_FAILED
} from './constants'
export const setSearchField = (text) => ({ type: CHANGE_SEARCHFIELD, payload: text })
export const requestRobots = () => (dispatch) => {
dispatch({ type: REQUEST_ROBOTS_PENDING })
apiCall('https://jsonplaceholder.typicode.com/users')
.then(data => dispatch({ type: REQUEST_ROBOTS_SUCCESS, payload: data }))
.catch(error => dispatch({ type: REQUEST_ROBOTS_FAILED, payload: error }))
}
================================================
FILE: src/api/api.js
================================================
export const apiCall = (link) =>
fetch(link).then(response => response.json())
================================================
FILE: src/components/Card.js
================================================
import React from 'react';
const Card = ({ name, email, id }) => {
return (
<div className='tc grow bg-light-green br3 pa3 ma2 dib bw2 shadow-5'>
<img alt='robots' src={`https://robohash.org/${id}?200x200`} />
<div>
<h2>{name}</h2>
<p>{email}</p>
</div>
</div>
);
}
export default Card;
================================================
FILE: src/components/CardList.js
================================================
import React from 'react';
import Card from './Card';
const CardList = ({ robots }) => {
return (
<div>
{
robots.map((user, i) => {
return (
<Card
key={i}
id={robots[i].id}
name={robots[i].name}
email={robots[i].email}
/>
);
})
}
</div>
);
}
export default CardList;
================================================
FILE: src/components/ErrorBoundry.js
================================================
import React, { Component } from 'react'
class ErrorBoundary extends Component {
constructor (props) {
super(props)
this.state = { hasError: false }
}
componentDidCatch (error, info) {
this.setState({ hasError: true })
}
render () {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>
}
return this.props.children
}
}
export default ErrorBoundary
================================================
FILE: src/components/Scroll.js
================================================
import React from 'react';
const Scroll = (props) => {
return (
<div style={{ overflow: 'scroll', border: '5px solid black', height: '800px'}}>
{props.children}
</div>
);
};
export default Scroll;
================================================
FILE: src/components/SearchBox.js
================================================
import React from 'react';
const SearchBox = ({ searchfield, searchChange }) => {
return (
<div className='pa2'>
<input
className='pa3 ba b--green bg-lightest-blue'
type='search'
placeholder='search robots'
onChange={searchChange}
/>
</div>
);
}
export default SearchBox;
================================================
FILE: src/constants.js
================================================
export const CHANGE_SEARCHFIELD = 'CHANGE_SEARCHFIELD';
export const REQUEST_ROBOTS_PENDING = 'REQUEST_ROBOTS_PENDING';
export const REQUEST_ROBOTS_SUCCESS = 'REQUEST_ROBOTS_SUCCESS';
export const REQUEST_ROBOTS_FAILED = 'REQUEST_ROBOTS_FAILED';
================================================
FILE: src/containers/App.css
================================================
/* #### Generated By: http://www.cufonfonts.com #### */
@font-face {
font-family: 'SEGA LOGO FONT';
font-style: normal;
font-weight: normal;
src: local('SEGA LOGO FONT'), url('SEGA.woff') format('woff');
}
h1 {
font-family: 'SEGA LOGO FONT';
font-weight: 200;
color: #0ccac4;
}
================================================
FILE: src/containers/App.js
================================================
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { setSearchField, requestRobots } from '../actions';
import CardList from '../components/CardList';
import SearchBox from '../components/SearchBox';
import Scroll from '../components/Scroll';
import ErrorBoundry from '../components/ErrorBoundry';
import './App.css';
// parameter state comes from index.js provider store state(rootReducers)
const mapStateToProps = (state) => {
return {
searchField: state.searchRobots.searchField,
robots: state.requestRobots.robots,
isPending: state.requestRobots.isPending
}
}
// dispatch the DOM changes to call an action. note mapStateToProps returns object, mapDispatchToProps returns function
// the function returns an object then uses connect to change the data from redecers.
const mapDispatchToProps = (dispatch) => {
return {
onSearchChange: (event) => dispatch(setSearchField(event.target.value)),
onRequestRobots: () => dispatch(requestRobots())
}
}
class App extends Component {
componentDidMount() {
this.props.onRequestRobots();
}
render() {
const { robots, searchField, onSearchChange, isPending } = this.props;
const filteredRobots = robots.filter(robot => {
return robot.name.toLowerCase().includes(searchField.toLowerCase());
})
return (
<div className='tc'>
<h1 className='f1'>RoboFriends</h1>
<SearchBox searchChange={onSearchChange}/>
<Scroll>
{ isPending ? <h1>Loading</h1> :
<ErrorBoundry>
<CardList robots={filteredRobots} />
</ErrorBoundry>
}
</Scroll>
</div>
);
}
}
// action done from mapDispatchToProps will channge state from mapStateToProps
export default connect(mapStateToProps, mapDispatchToProps)(App)
================================================
FILE: src/index.css
================================================
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: linear-gradient(to left, rgba(7,27,82,1) 0%, rgba(0,128,128,1) 100%); /* w3c */
}
================================================
FILE: src/index.js
================================================
import React from 'react';
// import ReactDOM from 'react-dom'; The new way to import createRoot:
import { createRoot } from "react-dom/client";
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
//import thunkMiddleware from 'redux-thunk';
//NEW way of importing redux-thunk:
import { thunk } from 'redux-thunk';
import { createLogger } from 'redux-logger';
import 'tachyons';
import App from './containers/App';
import registerServiceWorker from './registerServiceWorker';
import { requestRobots, searchRobots } from './reducers'
import './index.css';
const logger = createLogger()
const rootReducers = combineReducers({requestRobots, searchRobots})
const store = createStore(rootReducers, applyMiddleware(thunk, logger))
const root = createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App/>
</Provider>
);
// ReactDOM.render(
// <Provider store={store}>
// <App/>
// </Provider>,
// document.getElementById('root')
// );
registerServiceWorker();
================================================
FILE: src/reducers.js
================================================
import {
CHANGE_SEARCHFIELD,
REQUEST_ROBOTS_PENDING,
REQUEST_ROBOTS_SUCCESS,
REQUEST_ROBOTS_FAILED
} from './constants';
const initialStateSearch = {
searchField: ''
}
export const searchRobots = (state=initialStateSearch, action={}) => {
switch (action.type) {
case CHANGE_SEARCHFIELD:
return Object.assign({}, state, {searchField: action.payload})
default:
return state
}
}
const initialStateRobots = {
robots: [],
isPending: true
}
export const requestRobots = (state=initialStateRobots, action={}) => {
switch (action.type) {
case REQUEST_ROBOTS_PENDING:
return Object.assign({}, state, {isPending: true})
case REQUEST_ROBOTS_SUCCESS:
return Object.assign({}, state, {robots: action.payload, isPending: false})
case REQUEST_ROBOTS_FAILED:
return Object.assign({}, state, {error: action.payload})
default:
return state
}
}
================================================
FILE: src/registerServiceWorker.js
================================================
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Lets check if a service worker still exists or not.
checkValidServiceWorker(swUrl);
} else {
// Is not local host. Just register service worker
registerValidSW(swUrl);
}
});
}
}
function registerValidSW(swUrl) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and
// the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is
// available; please refresh." message in your web app.
console.log('New content is available; please refresh.');
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
if (
response.status === 404 ||
response.headers.get('content-type').indexOf('javascript') === -1
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}
gitextract_kxxhc1gn/
├── .gitignore
├── README.md
├── package.json
├── public/
│ ├── index.html
│ └── manifest.json
└── src/
├── actions.js
├── api/
│ └── api.js
├── components/
│ ├── Card.js
│ ├── CardList.js
│ ├── ErrorBoundry.js
│ ├── Scroll.js
│ └── SearchBox.js
├── constants.js
├── containers/
│ ├── App.css
│ └── App.js
├── index.css
├── index.js
├── reducers.js
└── registerServiceWorker.js
SYMBOL INDEX (15 symbols across 4 files)
FILE: src/components/ErrorBoundry.js
class ErrorBoundary (line 3) | class ErrorBoundary extends Component {
method constructor (line 4) | constructor (props) {
method componentDidCatch (line 9) | componentDidCatch (error, info) {
method render (line 13) | render () {
FILE: src/constants.js
constant CHANGE_SEARCHFIELD (line 1) | const CHANGE_SEARCHFIELD = 'CHANGE_SEARCHFIELD';
constant REQUEST_ROBOTS_PENDING (line 3) | const REQUEST_ROBOTS_PENDING = 'REQUEST_ROBOTS_PENDING';
constant REQUEST_ROBOTS_SUCCESS (line 4) | const REQUEST_ROBOTS_SUCCESS = 'REQUEST_ROBOTS_SUCCESS';
constant REQUEST_ROBOTS_FAILED (line 5) | const REQUEST_ROBOTS_FAILED = 'REQUEST_ROBOTS_FAILED';
FILE: src/containers/App.js
class App (line 30) | class App extends Component {
method componentDidMount (line 31) | componentDidMount() {
method render (line 35) | render() {
FILE: src/registerServiceWorker.js
function register (line 21) | function register() {
function registerValidSW (line 46) | function registerValidSW(swUrl) {
function checkValidServiceWorker (line 75) | function checkValidServiceWorker(swUrl) {
function unregister (line 102) | function unregister() {
Condensed preview — 19 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (15K chars).
[
{
"path": ".gitignore",
"chars": 288,
"preview": "# See https://help.github.com/ignore-files/ for more about ignoring files.\n\n# dependencies\n/node_modules \n\n# testing\n/co"
},
{
"path": "README.md",
"chars": 156,
"preview": "# robofriends\nReact + Redux \n\nTo run the project:\n\n1. Clone this repo\n2. Run `npm install`\n3. Run `npm start`\n\n*visit ht"
},
{
"path": "package.json",
"chars": 716,
"preview": "{\n \"name\": \"robofriends\",\n \"version\": \"0.1.0\",\n \"private\": true,\n \"dependencies\": {\n \"react\": \"^19.1.1\",\n \"rea"
},
{
"path": "public/index.html",
"chars": 1593,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "public/manifest.json",
"chars": 317,
"preview": "{\n \"short_name\": \"React App\",\n \"name\": \"Create React App Sample\",\n \"icons\": [\n {\n \"src\": \"favicon.ico\",\n "
},
{
"path": "src/actions.js",
"chars": 563,
"preview": "import { apiCall } from './api/api'\nimport {\n CHANGE_SEARCHFIELD,\n REQUEST_ROBOTS_PENDING,\n REQUEST_ROBOTS_SUCCESS,\n "
},
{
"path": "src/api/api.js",
"chars": 80,
"preview": "export const apiCall = (link) =>\n fetch(link).then(response => response.json())"
},
{
"path": "src/components/Card.js",
"chars": 334,
"preview": "import React from 'react';\n\nconst Card = ({ name, email, id }) => {\n return (\n <div className='tc grow bg-light-gree"
},
{
"path": "src/components/CardList.js",
"chars": 410,
"preview": "import React from 'react';\nimport Card from './Card';\n\nconst CardList = ({ robots }) => {\n return (\n <div>\n {\n "
},
{
"path": "src/components/ErrorBoundry.js",
"chars": 405,
"preview": "import React, { Component } from 'react'\n\nclass ErrorBoundary extends Component {\n constructor (props) {\n super(prop"
},
{
"path": "src/components/Scroll.js",
"chars": 216,
"preview": "import React from 'react';\n\nconst Scroll = (props) => {\n return (\n <div style={{ overflow: 'scroll', border: '5px so"
},
{
"path": "src/components/SearchBox.js",
"chars": 329,
"preview": "import React from 'react';\n\nconst SearchBox = ({ searchfield, searchChange }) => {\n return (\n <div className='pa2'>\n"
},
{
"path": "src/constants.js",
"chars": 246,
"preview": "export const CHANGE_SEARCHFIELD = 'CHANGE_SEARCHFIELD';\n\nexport const REQUEST_ROBOTS_PENDING = 'REQUEST_ROBOTS_PENDING';"
},
{
"path": "src/containers/App.css",
"chars": 285,
"preview": "/* #### Generated By: http://www.cufonfonts.com #### */\n\n@font-face {\nfont-family: 'SEGA LOGO FONT';\nfont-style: normal;"
},
{
"path": "src/containers/App.js",
"chars": 1835,
"preview": "import React, { Component } from 'react';\nimport { connect } from 'react-redux';\nimport { setSearchField, requestRobots "
},
{
"path": "src/index.css",
"chars": 157,
"preview": "body {\n margin: 0;\n padding: 0;\n font-family: sans-serif;\n background: linear-gradient(to left, rgba(7,27,82,1) 0%, "
},
{
"path": "src/index.js",
"chars": 1064,
"preview": "import React from 'react';\n// import ReactDOM from 'react-dom'; The new way to import createRoot:\nimport { createRoot } "
},
{
"path": "src/reducers.js",
"chars": 913,
"preview": "import {\n CHANGE_SEARCHFIELD,\n REQUEST_ROBOTS_PENDING,\n REQUEST_ROBOTS_SUCCESS,\n REQUEST_ROBOTS_FAILED\n } from './co"
},
{
"path": "src/registerServiceWorker.js",
"chars": 4021,
"preview": "// In production, we register a service worker to serve assets from local cache.\n\n// This lets the app load faster on su"
}
]
About this extraction
This page contains the full source code of the aneagoie/robofriends-redux GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 19 files (13.6 KB), approximately 3.9k tokens, and a symbol index with 15 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.