Full Code of sadams/todo-redux-react-webpack for AI

master 761eedea980e cached
12 files
8.5 KB
2.7k tokens
1 requests
Download .txt 
Repository: sadams/todo-redux-react-webpack
Branch: master
Commit: 761eedea980e
Files: 12
Total size: 8.5 KB

Directory structure:
gitextract_90589lj7/

├── .gitignore
├── README.md
├── app/
│   ├── index.html
│   └── js/
│       ├── actions/
│       │   └── index.js
│       ├── app.js
│       ├── components/
│       │   ├── AddTodo.jsx
│       │   ├── AppRoot.jsx
│       │   ├── Footer.jsx
│       │   └── TodoList.jsx
│       └── store/
│           └── index.js
├── package.json
└── webpack.config.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
dist
/*.example.*

# Logs
logs
*.log
npm-debug.log*

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directory
# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
node_modules
### JetBrains template
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio

*.iml

## Directory-based project format:
.idea/
# if you remove the above rule, at least ignore the following:

# User-specific stuff:
# .idea/workspace.xml
# .idea/tasks.xml
# .idea/dictionaries

# Sensitive or high-churn files:
# .idea/dataSources.ids
# .idea/dataSources.xml
# .idea/sqlDataSources.xml
# .idea/dynamic.xml
# .idea/uiDesigner.xml

# Gradle:
# .idea/gradle.xml
# .idea/libraries

# Mongo Explorer plugin:
# .idea/mongoSettings.xml

## File-based project format:
*.ipr
*.iws

## Plugin-specific files:

# IntelliJ
/out/

# mpeltonen/sbt-idea plugin
.idea_modules/

# JIRA plugin
atlassian-ide-plugin.xml

# Crashlytics plugin (for Android Studio and IntelliJ)
com_crashlytics_export_strings.xml
crashlytics.properties
crashlytics-build.properties



================================================
FILE: README.md
================================================
# Todo App using React Redux Webpack

Yet another Todo app using React Redux and Webpack. 

The content is based on the example in the 
[great Redux tutorial by Dan Abramov](https://egghead.io/series/getting-started-with-redux).

The aim here was to keep it *really* simple to get started with these technologies.

## Deps

    npm install

This repository is meant to be used with npm 3. For version 2 also install:

    npm install --save-dev babel-plugin-transform-object-rest-spread
    npm install --save-dev babel-plugin-transform-class-properties

## Build

    node_modules/.bin/webpack

## Dev

    node_modules/.bin/webpack-dev-server --hot --inline


================================================
FILE: app/index.html
================================================
<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>todo</title>
</head>
<body>
    <h1>todo</h1>

    <div id="app-root"></div>

    <script src="js/app.js"></script>
</body>
</html>


================================================
FILE: app/js/actions/index.js
================================================
let nextTodoId = 0;

export const addTodo = (text) => {
  return {
    type: 'ADD_TODO',
    id: nextTodoId++,
    text
  };
};

export const toggleTodo = (id) => {
  return {
    type: 'TOGGLE_TODO',
    id
  };
};

export const setVisibilityFilter = (filter) => {
  return {
    type: 'SET_VISIBILITY_FILTER',
    filter
  };
};


================================================
FILE: app/js/app.js
================================================
import ReactDOM from 'react-dom';

import AppRoot from './components/AppRoot.jsx';

ReactDOM.render(
  AppRoot,
  document.getElementById('app-root')
);


================================================
FILE: app/js/components/AddTodo.jsx
================================================
import React from 'react';
import { connect } from 'react-redux';

import { addTodo } from '../actions';

let AddTodo = ({ dispatch }) => {
  let input;

  return (
    <div>
      <input ref={node => {
        input = node;
      }} />
      <button onClick={() => {
        dispatch(addTodo(input.value));
        input.value = '';
      }}>
        Add Todo
      </button>
    </div>
  );
};
export default connect()(AddTodo);

================================================
FILE: app/js/components/AppRoot.jsx
================================================
import React from 'react';
import { Provider } from 'react-redux';

import AddTodo from './AddTodo.jsx';
import TodoList from './TodoList.jsx';
import Footer from './Footer.jsx';
import store from '../store';


const TodoApp = () => (
  <div>
    <AddTodo />
    <TodoList />
    <Footer />
  </div>
);

export default (
  <Provider store={store}>
    <TodoApp />
  </Provider>
)

================================================
FILE: app/js/components/Footer.jsx
================================================
import React from 'react';
import { connect } from 'react-redux';

import { setVisibilityFilter } from '../actions';

const Link = ({
  active,
  children,
  onClick
  }) => {
  if (active) {
    return <span>{children}</span>;
  }

  return (
    <a href='#'
       onClick={e => {
         e.preventDefault();
         onClick();
       }}
      >
      {children}
    </a>
  );
};

const mapStateProps = (
  state,
  ownProps
) => {
  return {
    active:
      ownProps.filter ===
      state.visibilityFilter
  };
};
const mapDispatchProps = (
  dispatch,
  ownProps
) => {
  return {
    onClick: () => {
      dispatch(
        setVisibilityFilter(ownProps.filter)
      );
    }
  };
};

const FilterLink = connect(
  mapStateProps,
  mapDispatchProps
)(Link);

export default () => (
  <p>
    Show:
    {' '}
    <FilterLink filter='SHOW_ALL'>
      All
    </FilterLink>
    {', '}
    <FilterLink filter='SHOW_ACTIVE'>
      Active
    </FilterLink>
    {', '}
    <FilterLink filter='SHOW_COMPLETED'>
      Completed
    </FilterLink>
  </p>
);

================================================
FILE: app/js/components/TodoList.jsx
================================================
import React from 'react';
import { connect } from 'react-redux';

import { toggleTodo } from '../actions';

const Todo = ({
  onClick,
  completed,
  text
  }) => (
  <li
    onClick={onClick}
    style={{
      textDecoration:
        completed ?
          'line-through' :
          'none'
    }}
    className={
        completed ?
          'completed' :
          ''
    }
    >
    {text}
  </li>
);

const TodoList = ({
  todos,
  onTodoClick
  }) => (
  <ul>
    {todos.map(todo =>
        <Todo
          key={todo.id}
          {...todo}
          onClick={() => onTodoClick(todo.id)}
          />
    )}
  </ul>
);

const getVisibleTodos = (
  todos,
  filter
) => {
  switch (filter) {
    case 'SHOW_ALL':
      return todos;
    case 'SHOW_COMPLETED':
      return todos.filter(
          t => t.completed
      );
    case 'SHOW_ACTIVE':
      return todos.filter(
          t => !t.completed
      );
  }
}

const mapStateToProps = (
  state
) => {
  return {
    todos: getVisibleTodos(
      state.todos,
      state.visibilityFilter
    )
  };
};
const mapDispatchToProps = (
  dispatch
) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id));
    }
  };
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList);

================================================
FILE: app/js/store/index.js
================================================
import { createStore, combineReducers } from 'redux';

const todo = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        id: action.id,
        text: action.text,
        completed: false
      };
    case 'TOGGLE_TODO':
      if (state.id !== action.id) {
        return state;
      }

      return {
        ...state,
        completed: !state.completed
      };
    default:
      return state;
  }
};

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        todo(undefined, action)
      ];
    case 'TOGGLE_TODO':
      return state.map(t =>
          todo(t, action)
      );
    default:
      return state;
  }
};

const visibilityFilter = (
  state = 'SHOW_ALL',
  action
) => {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter;
    default:
      return state;
  }
};

const todoApp = combineReducers({
  todos,
  visibilityFilter
});

export default createStore(todoApp)

================================================
FILE: package.json
================================================
{
  "name": "Todo",
  "version": "0.0.0",
  "description": "Todo app using React, Redux and Webpack. Based on the example from Dan Abramov's excellent tutorial (https://egghead.io/series/getting-started-with-redux)",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --hot --inline"
  },
  "keywords": [
    "todo"
  ],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-plugin-react-transform": "^2.0.0",
    "babel-plugin-syntax-class-properties": "^6.3.13",
    "babel-plugin-syntax-decorators": "^6.3.13",
    "babel-plugin-syntax-object-rest-spread": "^6.3.13",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "file-loader": "^0.8.5",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "react": "^0.14.5",
    "react-dom": "^0.14.5",
    "react-redux": "^4.0.6",
    "redux": "^3.0.5"
  }
}


================================================
FILE: webpack.config.js
================================================
module.exports = {
  entry: {
    javascript: "./app/js/app.js",
    html: "./app/index.html"
  },
  output: {
    path: __dirname + "/dist",
    filename: "./js/app.js"
  },
  module: {
    loaders: [
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]"
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ["react-hot", 'babel?'+JSON.stringify(
          {
            presets: ['react', 'es2015'],
            "plugins": [
              "syntax-class-properties",
              "syntax-decorators",
              "syntax-object-rest-spread",

              "transform-class-properties",
              "transform-object-rest-spread"
            ]
          }
        )]
      }
    ]
  }
};
Download .txt 
gitextract_90589lj7/

├── .gitignore
├── README.md
├── app/
│   ├── index.html
│   └── js/
│       ├── actions/
│       │   └── index.js
│       ├── app.js
│       ├── components/
│       │   ├── AddTodo.jsx
│       │   ├── AppRoot.jsx
│       │   ├── Footer.jsx
│       │   └── TodoList.jsx
│       └── store/
│           └── index.js
├── package.json
└── webpack.config.js
Download .json
Condensed preview — 12 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (10K chars). 
[
  {
    "path": ".gitignore",
    "chars": 1432,
    "preview": "dist\n/*.example.*\n\n# Logs\nlogs\n*.log\nnpm-debug.log*\n\n# Runtime data\npids\n*.pid\n*.seed\n\n# Directory for instrumented libs"
  },
  {
    "path": "README.md",
    "chars": 660,
    "preview": "# Todo App using React Redux Webpack\n\nYet another Todo app using React Redux and Webpack. \n\nThe content is based on the "
  },
  {
    "path": "app/index.html",
    "chars": 213,
    "preview": "<!doctype html>\n<html lang=\"en-US\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>todo</title>\n</head>\n<body>\n    <h1>tod"
  },
  {
    "path": "app/js/actions/index.js",
    "chars": 331,
    "preview": "let nextTodoId = 0;\n\nexport const addTodo = (text) => {\n  return {\n    type: 'ADD_TODO',\n    id: nextTodoId++,\n    text\n"
  },
  {
    "path": "app/js/app.js",
    "chars": 153,
    "preview": "import ReactDOM from 'react-dom';\n\nimport AppRoot from './components/AppRoot.jsx';\n\nReactDOM.render(\n  AppRoot,\n  docume"
  },
  {
    "path": "app/js/components/AddTodo.jsx",
    "chars": 430,
    "preview": "import React from 'react';\nimport { connect } from 'react-redux';\n\nimport { addTodo } from '../actions';\n\nlet AddTodo = "
  },
  {
    "path": "app/js/components/AppRoot.jsx",
    "chars": 379,
    "preview": "import React from 'react';\nimport { Provider } from 'react-redux';\n\nimport AddTodo from './AddTodo.jsx';\nimport TodoList"
  },
  {
    "path": "app/js/components/Footer.jsx",
    "chars": 1057,
    "preview": "import React from 'react';\nimport { connect } from 'react-redux';\n\nimport { setVisibilityFilter } from '../actions';\n\nco"
  },
  {
    "path": "app/js/components/TodoList.jsx",
    "chars": 1274,
    "preview": "import React from 'react';\nimport { connect } from 'react-redux';\n\nimport { toggleTodo } from '../actions';\n\nconst Todo "
  },
  {
    "path": "app/js/store/index.js",
    "chars": 1027,
    "preview": "import { createStore, combineReducers } from 'redux';\n\nconst todo = (state, action) => {\n  switch (action.type) {\n    ca"
  },
  {
    "path": "package.json",
    "chars": 1040,
    "preview": "{\n  \"name\": \"Todo\",\n  \"version\": \"0.0.0\",\n  \"description\": \"Todo app using React, Redux and Webpack. Based on the exampl"
  },
  {
    "path": "webpack.config.js",
    "chars": 752,
    "preview": "module.exports = {\n  entry: {\n    javascript: \"./app/js/app.js\",\n    html: \"./app/index.html\"\n  },\n  output: {\n    path:"
  }
]

About this extraction

This page contains the full source code of the sadams/todo-redux-react-webpack GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 12 files (8.5 KB), approximately 2.7k tokens. 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.

Extract another repo
Copied to clipboard!