Repository: spoike/refluxjs-todo
Branch: master
Commit: ce32dfaebb58
Files: 12
Total size: 16.9 KB
Directory structure:
gitextract_fnrg5n3l/
├── .editorconfig
├── .gitignore
├── Gruntfile.js
├── bower.json
├── css/
│ └── app.css
├── index.html
├── js/
│ ├── actions.js
│ ├── components.jsx.js
│ └── store.js
├── package.json
├── readme.md
└── readme_template.md
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
root = true
[*]
end_of_line = lf
insert_final_newline = true
indent_style = space
trim_trailing_whitespace = true
charset = utf-8
[*.js]
indent_size = 4
[{package.json,.travis.yml}]
indent_size = 2
================================================
FILE: .gitignore
================================================
# Node.JS specifics
lib-cov
*.seed
*.log
*.csv
*.dat
*.out
*.pid
*.gz
pids
logs
results
npm-debug.log
node_modules
# MacOSX specifics
.DS_Store
# Build artifacts
tmp
bower_components
components
================================================
FILE: Gruntfile.js
================================================
module.exports = function(grunt) {
var options = {
port: 8080
};
grunt.initConfig({
options: options,
pkg: grunt.file.readJSON('package.json'),
connect: {
server: {
options: {
port: options.port,
base: '.'
}
}
},
open: {
server: {
path: 'http://localhost:<%= options.port %>/'
}
},
watch: {
}
});
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
grunt.registerTask('default', ['connect', 'open', 'watch']);
};
================================================
FILE: bower.json
================================================
{
"name": "reflux-todo",
"version": "0.0.1",
"dependencies": {
"todomvc-app-css": "~1.0.1",
"reflux": "~0.2.4",
"react": "~0.12.2",
"lodash": "~3.0.1",
"react-router": "~0.11.6"
}
}
================================================
FILE: css/app.css
================================================
/* base.css overrides */
================================================
FILE: index.html
================================================
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ReactJS + RefluxJS • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-app-css/index.css">
<!-- CSS overrides - remove if you don't need it -->
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<section id="todoapp">
<!-- Bootstrap code will add components here, see js/components.jsx.js -->
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<!-- Remove the below line ↓ -->
<p>Template by <a href="http://github.com/sindresorhus">Sindre Sorhus</a></p>
<!-- Change this out with your name and url ↓ -->
<p>Created by <a href="https://github.com/spoike/refluxjs">Mikael Brassman</a></p>
<!--<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>-->
</footer>
<!-- Scripts here. Don't remove this ↓ -->
<!-- <script src="bower_components/todomvc-common/base.js"></script> -->
<script src="bower_components/react/react-with-addons.js"></script>
<script src="bower_components/react-router/dist/react-router.js"></script>
<script src="bower_components/react/JSXTransformer.js"></script>
<script src="bower_components/lodash/lodash.js"></script>
<script src="bower_components/reflux/dist/reflux.js"></script>
<script src="js/actions.js"></script>
<script src="js/store.js"></script>
<script type="text/jsx" src="js/components.jsx.js"></script>
</body>
</html>
================================================
FILE: js/actions.js
================================================
(function(Reflux, global) {
'use strict';
// Each action is like an event channel for one specific event. Actions are called by components.
// The store is listening to all actions, and the components in turn are listening to the store.
// Thus the flow is: User interaction -> component calls action -> store reacts and triggers -> components update
global.TodoActions = Reflux.createActions([
"toggleItem", // called by button in TodoItem
"toggleAllItems", // called by button in TodoMain (even though you'd think TodoHeader)
"addItem", // called by hitting enter in field in TodoHeader
"removeItem", // called by button in TodoItem
"clearCompleted", // called by button in TodoFooter
"editItem" // called by finishing edit in TodoItem
]);
})(window.Reflux, window);
================================================
FILE: js/components.jsx.js
================================================
/** @jsx React.DOM */
(function(React, ReactRouter, Reflux, TodoActions, todoListStore, global) {
// Renders a single Todo item in the list
// Used in TodoMain
var TodoItem = React.createClass({
propTypes: {
label: React.PropTypes.string.isRequired,
isComplete: React.PropTypes.bool.isRequired,
id: React.PropTypes.number
},
mixins: [React.addons.LinkedStateMixin], // exposes this.linkState used in render
getInitialState: function() {
return {};
},
handleToggle: function(evt) {
TodoActions.toggleItem(this.props.id);
},
handleEditStart: function(evt) {
evt.preventDefault();
// because of linkState call in render, field will get value from this.state.editValue
this.setState({
isEditing: true,
editValue: this.props.label
}, function() {
this.refs.editInput.getDOMNode().focus();
});
},
handleValueChange: function(evt) {
var text = this.state.editValue; // because of the linkState call in render, this is the contents of the field
// we pressed enter, if text isn't empty we blur the field which will cause a save
if (evt.which === 13 && text) {
this.refs.editInput.getDOMNode().blur();
}
// pressed escape. set editing to false before blurring so we won't save
else if (evt.which === 27) {
this.setState({ isEditing: false },function(){
this.refs.editInput.getDOMNode().blur();
});
}
},
handleBlur: function() {
var text = this.state.editValue; // because of the linkState call in render, this is the contents of the field
// unless we're not editing (escape was pressed) or text is empty, save!
if (this.state.isEditing && text) {
TodoActions.editItem(this.props.id, text);
}
// whatever the outcome, if we left the field we're not editing anymore
this.setState({isEditing:false});
},
handleDestroy: function() {
TodoActions.removeItem(this.props.id);
},
render: function() {
var classes = React.addons.classSet({
'completed': this.props.isComplete,
'editing': this.state.isEditing
});
return (
<li className={classes}>
<div className="view">
<input className="toggle" type="checkbox" checked={!!this.props.isComplete} onChange={this.handleToggle} />
<label onDoubleClick={this.handleEditStart}>{this.props.label}</label>
<button className="destroy" onClick={this.handleDestroy}></button>
</div>
<input ref="editInput" className="edit" valueLink={this.linkState('editValue')} onKeyUp={this.handleValueChange} onBlur={this.handleBlur} />
</li>
);
}
});
// Renders the todo list as well as the toggle all button
// Used in TodoApp
var TodoMain = React.createClass({
mixins: [ ReactRouter.State ],
propTypes: {
list: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
},
toggleAll: function(evt) {
TodoActions.toggleAllItems(evt.target.checked);
},
render: function() {
var filteredList;
switch(this.getPath()){
case '/completed':
filteredList = _.filter(this.props.list,function(item){ return item.isComplete; });
break;
case '/active':
filteredList = _.filter(this.props.list,function(item){ return !item.isComplete; });
break;
default:
filteredList = this.props.list;
}
var classes = React.addons.classSet({
"hidden": this.props.list.length < 1
});
return (
<section id="main" className={classes}>
<input id="toggle-all" type="checkbox" onChange={this.toggleAll} />
<label htmlFor="toggle-all">Mark all as complete</label>
<ul id="todo-list">
{ filteredList.map(function(item){
return <TodoItem label={item.label} isComplete={item.isComplete} id={item.key} key={item.key}/>;
})}
</ul>
</section>
);
}
});
// Renders the headline and the form for creating new todos.
// Used in TodoApp
// Observe that the toogleall button is NOT rendered here, but in TodoMain (it is then moved up to the header with CSS)
var TodoHeader = React.createClass({
handleValueChange: function(evt) {
var text = evt.target.value;
if (evt.which === 13 && text) { // hit enter, create new item if field isn't empty
TodoActions.addItem(text);
evt.target.value = '';
} else if (evt.which === 27) { // hit escape, clear without creating
evt.target.value = '';
}
},
render: function() {
return (
<header id="header">
<h1>todos</h1>
<input id="new-todo" placeholder="What needs to be done?" autoFocus onKeyUp={this.handleValueChange}/>
</header>
);
}
});
// Renders the bottom item count, navigation bar and clearallcompleted button
// Used in TodoApp
var TodoFooter = React.createClass({
propTypes: {
list: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
},
render: function() {
var nbrcompleted = _.filter(this.props.list, "isComplete").length,
nbrtotal = this.props.list.length,
nbrincomplete = nbrtotal-nbrcompleted,
clearButtonClass = React.addons.classSet({hidden: nbrcompleted < 1}),
footerClass = React.addons.classSet({hidden: !nbrtotal }),
completedLabel = "Clear completed (" + nbrcompleted + ")",
itemsLeftLabel = nbrincomplete === 1 ? " item left" : " items left";
return (
<footer id="footer" className={footerClass}>
<span id="todo-count"><strong>{nbrincomplete}</strong>{itemsLeftLabel}</span>
<ul id="filters">
<li>
<ReactRouter.Link activeClassName="selected" to="All">All</ReactRouter.Link>
</li>
<li>
<ReactRouter.Link activeClassName="selected" to="Active">Active</ReactRouter.Link>
</li>
<li>
<ReactRouter.Link activeClassName="selected" to="Completed">Completed</ReactRouter.Link>
</li>
</ul>
<button id="clear-completed" className={clearButtonClass} onClick={TodoActions.clearCompleted}>{completedLabel}</button>
</footer>
);
}
});
// Renders the full application
// RouteHandler will always be TodoMain, but with different 'showing' prop (all/completed/active)
var TodoApp = React.createClass({
// this will cause setState({list:updatedlist}) whenever the store does trigger(updatedlist)
mixins: [Reflux.connect(todoListStore,"list")],
render: function() {
return (
<div>
<TodoHeader />
<ReactRouter.RouteHandler list={this.state.list} />
<TodoFooter list={this.state.list} />
</div>
);
}
});
var routes = (
<ReactRouter.Route handler={TodoApp}>
<ReactRouter.Route name="All" path="/" handler={TodoMain} />
<ReactRouter.Route name="Completed" path="/completed" handler={TodoMain} />
<ReactRouter.Route name="Active" path="/active" handler={TodoMain} />
</ReactRouter.Route>
);
ReactRouter.run(routes, function(Handler) {
React.render(<Handler/>, document.getElementById('todoapp'));
});
})(window.React, window.ReactRouter, window.Reflux, window.TodoActions, window.todoListStore, window);
================================================
FILE: js/store.js
================================================
(function(Reflux, TodoActions, global) {
'use strict';
// some variables and helpers for our fake database stuff
var todoCounter = 0,
localStorageKey = "todos";
function getItemByKey(list,itemKey){
return _.find(list, function(item) {
return item.key === itemKey;
});
}
global.todoListStore = Reflux.createStore({
// this will set up listeners to all publishers in TodoActions, using onKeyname (or keyname) as callbacks
listenables: [TodoActions],
onEditItem: function(itemKey, newLabel) {
var foundItem = getItemByKey(this.list,itemKey);
if (!foundItem) {
return;
}
foundItem.label = newLabel;
this.updateList(this.list);
},
onAddItem: function(label) {
this.updateList([{
key: todoCounter++,
created: new Date(),
isComplete: false,
label: label
}].concat(this.list));
},
onRemoveItem: function(itemKey) {
this.updateList(_.filter(this.list,function(item){
return item.key!==itemKey;
}));
},
onToggleItem: function(itemKey) {
var foundItem = getItemByKey(this.list,itemKey);
if (foundItem) {
foundItem.isComplete = !foundItem.isComplete;
this.updateList(this.list);
}
},
onToggleAllItems: function(checked) {
this.updateList(_.map(this.list, function(item) {
item.isComplete = checked;
return item;
}));
},
onClearCompleted: function() {
this.updateList(_.filter(this.list, function(item) {
return !item.isComplete;
}));
},
// called whenever we change a list. normally this would mean a database API call
updateList: function(list){
localStorage.setItem(localStorageKey, JSON.stringify(list));
// if we used a real database, we would likely do the below in a callback
this.list = list;
this.trigger(list); // sends the updated list to all listening components (TodoApp)
},
// this will be called by all listening components as they register their listeners
getInitialState: function() {
var loadedList = localStorage.getItem(localStorageKey);
if (!loadedList) {
// If no list is in localstorage, start out with a default one
this.list = [{
key: todoCounter++,
created: new Date(),
isComplete: false,
label: 'Rule the web'
}];
} else {
this.list = _.map(JSON.parse(loadedList), function(item) {
// just resetting the key property for each todo item
item.key = todoCounter++;
return item;
});
}
return this.list;
}
});
})(window.Reflux, window.TodoActions, window);
================================================
FILE: package.json
================================================
{
"name": "reflux-todo",
"version": "0.0.1",
"description": "Todo example for the reflux project",
"main": "index.js",
"scripts": {
"prepublish": "bower install",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "MIT",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-connect": "^0.8.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-open": "^0.2.3",
"matchdep": "^0.3.0"
}
}
================================================
FILE: readme.md
================================================
# ReactJS w. RefluxJS TodoMVC Example
> A simple library for uni-directional dataflow application architecture inspired by ReactJS [Flux](http://facebook.github.io/react/blog/2014/05/06/flux.html)
> _[RefluxJS](https://github.com/spoike/refluxjs)_
## Implementation
TODO
## Running
Install dependencies with bower and npm. You'll first need to have [bower](http://bower.io/) and [npm](npmjs.org) installed to do so. Then run the following:
```
bower install && npm install
```
This project comes with a grunt task to runs a [`connect`](https://github.com/gruntjs/grunt-contrib-connect) web server and opens up the web browser for you. Just run:
```
grunt
```
## Credit
This TodoMVC application was created by [Mikael Brassman](https://github.com/spoike/refluxjs).
================================================
FILE: readme_template.md
================================================
# Template • [TodoMVC](http://todomvc.com)
## Getting Started
Read the [App Specification](https://github.com/tastejs/todomvc/blob/master/app-spec.md) before touching the template.
## Need help?
Feel free to contact [Sindre](https://github.com/sindresorhus) or [Pascal](https://github.com/passy) if you have any questions or need help with the template.
## Credit
Created by [Sindre Sorhus](http://sindresorhus.com)
gitextract_fnrg5n3l/ ├── .editorconfig ├── .gitignore ├── Gruntfile.js ├── bower.json ├── css/ │ └── app.css ├── index.html ├── js/ │ ├── actions.js │ ├── components.jsx.js │ └── store.js ├── package.json ├── readme.md └── readme_template.md
SYMBOL INDEX (1 symbols across 1 files)
FILE: js/store.js
function getItemByKey (line 8) | function getItemByKey(list,itemKey){
Condensed preview — 12 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (18K chars).
[
{
"path": ".editorconfig",
"chars": 201,
"preview": "root = true\n\n[*]\nend_of_line = lf\ninsert_final_newline = true\nindent_style = space\ntrim_trailing_whitespace = true\nchars"
},
{
"path": ".gitignore",
"chars": 199,
"preview": "# Node.JS specifics\n\nlib-cov\n*.seed\n*.log\n*.csv\n*.dat\n*.out\n*.pid\n*.gz\n\npids\nlogs\nresults\n\nnpm-debug.log\nnode_modules\n\n#"
},
{
"path": "Gruntfile.js",
"chars": 671,
"preview": "module.exports = function(grunt) {\n\n var options = {\n port: 8080\n };\n\n grunt.initConfig({\n option"
},
{
"path": "bower.json",
"chars": 210,
"preview": "{\n \"name\": \"reflux-todo\",\n \"version\": \"0.0.1\",\n \"dependencies\": {\n \"todomvc-app-css\": \"~1.0.1\",\n \"reflux\": \"~0."
},
{
"path": "css/app.css",
"chars": 25,
"preview": "/* base.css overrides */\n"
},
{
"path": "index.html",
"chars": 1558,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=ed"
},
{
"path": "js/actions.js",
"chars": 866,
"preview": "(function(Reflux, global) {\n 'use strict';\n\n // Each action is like an event channel for one specific event. Actio"
},
{
"path": "js/components.jsx.js",
"chars": 8687,
"preview": "/** @jsx React.DOM */\n\n(function(React, ReactRouter, Reflux, TodoActions, todoListStore, global) {\n\n // Renders a sin"
},
{
"path": "js/store.js",
"chars": 3190,
"preview": "(function(Reflux, TodoActions, global) {\n 'use strict';\n\n // some variables and helpers for our fake database stuf"
},
{
"path": "package.json",
"chars": 457,
"preview": "{\n \"name\": \"reflux-todo\",\n \"version\": \"0.0.1\",\n \"description\": \"Todo example for the reflux project\",\n \"main\": \"inde"
},
{
"path": "readme.md",
"chars": 776,
"preview": "# ReactJS w. RefluxJS TodoMVC Example\n\n> A simple library for uni-directional dataflow application architecture inspired"
},
{
"path": "readme_template.md",
"chars": 426,
"preview": "# Template • [TodoMVC](http://todomvc.com)\n\n\n\n## Getting Started\n\nRead the [App Specification](https://github.com/tastej"
}
]
About this extraction
This page contains the full source code of the spoike/refluxjs-todo GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 12 files (16.9 KB), approximately 4.1k tokens, and a symbol index with 1 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.