Skip to content

Week1/10/todo filter #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 14, 2021
Merged

Week1/10/todo filter #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
15c4aab
[week1] TodoFilter 구현
ink-0 Jul 14, 2021
b4e07a0
[week1] 코드 리팩토링
ink-0 Jul 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 0 additions & 48 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,56 +15,8 @@
<body>
<div class="todoapp">
<h1>TODOS</h1>

<!-- <input
id="new-todo-title"
class="new-todo"
placeholder="할일을 추가해주세요"
autofocus
/> -->
<main class="App">
<input class="toggle-all" type="checkbox" />
<!-- <ul id="todo-list" class="todo-list"></ul> -->
<!-- <div class="count-container"> -->
<!-- <span class="todo-count">총 <strong>0</strong> 개</span> -->
<!-- <ul class="filters">
<li>
<a class="all selected" href="#">전체보기</a>
</li>
<li>
<a class="active" href="#active">해야할 일</a>
</li>
<li>
<a class="completed" href="#completed">완료한 일</a>
</li>
</ul> -->
</div>
<!-- <ul id="todo-list" class="todo-list">
<li>
<div class="view">
<input class="toggle" type="checkbox"/>
<label class="label">새로운 타이틀</label>
<button class="destroy"></button>
</div>
<input class="edit" value="새로운 타이틀" />
</li>
<li class="editing">
<div class="view">
<input class="toggle" type="checkbox" />
<label class="label">완료된 타이틀</label>
<button class="destroy"></button>
</div>
<input class="edit" value="완료된 타이틀" />
</li>
<li class="completed">
<div class="view">
<input class="toggle" type="checkbox" checked/>
<label class="label">완료된 타이틀</label>
<button class="destroy"></button>
</div>
<input class="edit" value="완료된 타이틀" />
</li>
</ul> -->
</main>
</div>
</body>
Expand Down
87 changes: 64 additions & 23 deletions src/js/TodoApp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import TodoCount from './TodoCount.js';
import TodoInput from './TodoInput.js';
import TodoList from './TodoList.js';
import TodoFilter from './components/TodoFilter.js';
import TodoInput from './components/TodoInput.js';
import TodoList from './components/TodoList.js';
import { FILTER_TYPES } from '../utils/const.js';

export default function TodoApp($app) {
this.state = {
Expand All @@ -16,31 +17,35 @@ export default function TodoApp($app) {
state: '',
},
],
todoesFiltered: [],
isFilter: false,
todoesCount: '0',
};

this.setState = (nextState) => {
this.state = nextState;
todoList.setState(this.state.todoes);
todoCount.setState(this.state.todoes);
todoInput.setState(this.state.todoes);
todoList.setState(nextState);
todoInput.setState(nextState);
todoFilter.setState(nextState);
};

const todoInput = new TodoInput({
$app,
initialState: this.state.todoes,
initialState: this.state,
onAdd: (contents) => addTodo(contents),
});

const todoList = new TodoList({
$app,
initialState: this.state.todoes,
initialState: this.state,
onToggle: (idx) => toggleTodo(idx),
onDelete: (idx) => deleteTodo(idx),
onEdit: (idx, isEdit, newContent) => editTodo(idx, isEdit, newContent),
});
const todoCount = new TodoCount({
const todoFilter = new TodoFilter({
$app,
initialState: this.state.count,
initialState: this.state,
onFilter: (filterType) => filterTodo(filterType),
});

const init = () => {
Expand All @@ -50,27 +55,28 @@ export default function TodoApp($app) {
};
init();

const addTodo = (contents) => {
const todos = this.state.todoes;
const nextIdx = Math.max(0, ...todos.map((todo) => todo.idx)) + 1;
const addTodo = (addContent) => {
const { todoes } = this.state;
const nextIdx = Math.max(0, ...todoes.map((todo) => todo.idx)) + 1;
const newTodo = {
idx: nextIdx,
content: contents,
content: addContent,
state: '',
edit: '',
};
this.state.todoes.push(newTodo);
todoes.push(newTodo);

this.setState({
...this.state,
});
};

const toggleTodo = (idx) => {
const todos = this.state.todoes;
todos.map((todo) => {
const { todoes } = this.state;

todoes.map((todo) => {
if (todo.idx === idx) {
todo.state = todo.state === '' ? 'completed' : '';
todo.state = todo.state === '' ? FILTER_TYPES.COMPLETE : '';
}
});
this.setState({
Expand All @@ -79,19 +85,21 @@ export default function TodoApp($app) {
};

const deleteTodo = (idx) => {
const todos = this.state.todoes;
const newTodos = todos.filter((todo) => {
const { todoes } = this.state;

const resetTodoes = todoes.filter((todo) => {
return todo.idx !== idx;
});

this.setState({
todoes: newTodos,
todoes: resetTodoes,
});
};

const editTodo = (idx, isEdit, newContent) => {
const todos = this.state.todoes;
todos.map((todo) => {
const { todoes } = this.state;

todoes.map((todo) => {
if (todo.idx === idx) {
todo.state = todo.state === '' ? 'editing' : '';
if (isEdit) {
Expand All @@ -103,4 +111,37 @@ export default function TodoApp($app) {
...this.state,
});
};

const filterTodo = (filterType) => {
const { todoes } = this.state;

if (filterType === FILTER_TYPES.ALL) {
this.setState({
...this.state,
isFilter: false,
todoesCount: todoes.length,
});
} else if (filterType === FILTER_TYPES.COMPLETE) {
const completedTodoes = todoes.filter(
(todo) => todo.state === FILTER_TYPES.COMPLETE
);

this.setState({
...this.state,
todoesFiltered: completedTodoes,
isFilter: true,
todoesCount: completedTodoes.length,
});
} else if (filterType === FILTER_TYPES.ACTIVE) {
const activeTodoes = todoes.filter(
(todo) => todo.state !== FILTER_TYPES.COMPLETE
);
this.setState({
...this.state,
todoesFiltered: activeTodoes,
isFilter: true,
todoesCount: activeTodoes.length,
});
}
};
}
30 changes: 0 additions & 30 deletions src/js/TodoCount.js
View file
Open in desktop

This file was deleted.

21 changes: 0 additions & 21 deletions src/js/TodoItem.js
View file
Open in desktop

This file was deleted.

46 changes: 46 additions & 0 deletions src/js/components/TodoFilter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { FILTER_TYPES, TODO_FILTER_MENU } from '../../utils/const.js';
export default function TodoFilter({ $app, initialState, onFilter }) {
this.state = initialState;

this.$target = document.createElement('div');
this.$target.className = 'count-container';
$app.appendChild(this.$target);
const $nodeTodoFilter = this.$target;

this.setState = (nextState) => {
this.state = nextState;
this.render();
};

$nodeTodoFilter.addEventListener('click', (e) => {
const $node = e.target;

if ($node.className === FILTER_TYPES.COMPLETE) {
onFilter(FILTER_TYPES.COMPLETE);
} else if ($node.className === FILTER_TYPES.ACTIVE) {
onFilter(FILTER_TYPES.ACTIVE);
} else {
onFilter(FILTER_TYPES.ALL);
}
});

this.render = () => {
const { todoes, isFilter, todoesFiltered } = this.state;

const todoTotalCount = isFilter ? todoesFiltered.length : todoes.length;
const todoFilterTemplate = `
<span class="todo-count">총 <strong>${todoTotalCount}</strong> 개</span>
<ul class="filters">
<li>
<a class=${FILTER_TYPES.ALL} href="#">${TODO_FILTER_MENU.ALL_MENU}</a>
</li>
<li>
<a class=${FILTER_TYPES.ACTIVE} href="#${FILTER_TYPES.ACTIVE}">${TODO_FILTER_MENU.ACTIVE_MENU}</a>
</li>
<li>
<a class="completed" href="#${FILTER_TYPES.COMPLETE}">${TODO_FILTER_MENU.COMPLETE_MENU}</a>
</li>
</ul>`;
$nodeTodoFilter.innerHTML = todoFilterTemplate;
};
}
0 src/js/TodoInput.js → src/js/components/TodoInput.js
View file
Open in desktop
File renamed without changes.
Loading