Skip to content
This repository was archived by the owner on Dec 29, 2022. It is now read-only.

Commit c2fe37f

Browse files
DaniAkashDaniAkash
committed
created README
1 parent 9ade4f1 commit c2fe37f

7 files changed

Lines changed: 5374 additions & 0 deletions

File tree

‎rex-example/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Rex Example</title>
7+
</head>
8+
<body>
9+
<div id="app-root"></div>
10+
<script src="./src/index.tsx"></script>
11+
</body>
12+
</html>

‎rex-example/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "rex-example",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "parcel index.html",
8+
"test": "echo \"Error: no test specified\" && exit 1"
9+
},
10+
"keywords": [],
11+
"author": "",
12+
"license": "ISC",
13+
"devDependencies": {
14+
"parcel-bundler": "^1.12.4"
15+
},
16+
"dependencies": {
17+
"@types/react": "^16.9.21",
18+
"@types/react-dom": "^16.9.5",
19+
"react": "^16.12.0",
20+
"react-dom": "^16.12.0"
21+
}
22+
}

‎rex-example/src/App.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React, { useState } from "react";
2+
import { useRex } from "rex";
3+
4+
export default function App() {
5+
const store = useRex();
6+
const { todos } = store;
7+
8+
const [newTask, updateNewTask] = useState("");
9+
10+
const onAddTask = () => {
11+
todos.addTask(newTask);
12+
updateNewTask("");
13+
};
14+
15+
return (
16+
<div>
17+
<input
18+
type="text"
19+
value={newTask}
20+
onChange={event => updateNewTask(event.target.value)}
21+
placeholder="New Task"
22+
/>
23+
<button onClick={onAddTask}>Submit</button>
24+
<ul>
25+
{todos.list.map((item, itemIndex) => {
26+
const onClickCheckbox = () => {
27+
// now how to toggle this elegantly??
28+
};
29+
return (
30+
<li key={itemIndex}>
31+
<input
32+
type="checkbox"
33+
onChange={onClickCheckbox}
34+
checked={item.taskStatus}
35+
/>
36+
{item.task}
37+
</li>
38+
);
39+
})}
40+
</ul>
41+
</div>
42+
);
43+
}

‎rex-example/src/index.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import { RexProvider } from "rex";
4+
import store from "./store/store";
5+
import App from "./App";
6+
// import './index.css'
7+
8+
ReactDOM.render(
9+
<RexProvider store={store}>
10+
<App />
11+
</RexProvider>,
12+
document.getElementById("app-root")
13+
);

‎rex-example/src/store/Todos.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import Rex from "rex";
2+
3+
export interface ITask {
4+
task: string;
5+
status: boolean;
6+
}
7+
8+
export interface ITodosRexState {
9+
list: ITask[];
10+
}
11+
12+
class Todos extends Rex {
13+
state = {
14+
list: [
15+
{
16+
task: "Task One",
17+
status: false
18+
},
19+
{
20+
task: "Task Two",
21+
status: false
22+
}
23+
]
24+
};
25+
26+
addTask = (newTask: string) => {
27+
const newTaskObject = {
28+
task: newTask,
29+
status: false
30+
};
31+
const list: ITask[] = [...this.state.list, newTaskObject];
32+
this.setState({ list });
33+
};
34+
35+
get list() {
36+
return this.state.list;
37+
}
38+
}
39+
40+
export default Todos;

‎rex-example/src/store/store.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import Todos from "./Todos";
2+
3+
const store = {
4+
todos: Todos
5+
};
6+
7+
export default store;

0 commit comments

Comments
 (0)