Skip to content

Commit fc1c5c3

Browse files
jamessizelandjamessizeland
committed
undo formatting
1 parent 7a8171a commit fc1c5c3

File tree

4 files changed

+158
-217
lines changed

4 files changed

+158
-217
lines changed

‎tauri-todos/src/App.tsx‎

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
1-
import { listen } from "@tauri-apps/api/event";
2-
import { useAtom } from "jotai";
3-
import { useEffect, useState } from "react";
4-
import TodoList from "./component/TodoList";
5-
import OpenList from "./component/OpenList";
6-
import { allTodosAtom, filterAtom } from "./store/todos";
7-
import { Todo } from "./types/todo";
8-
import { invoke } from "@tauri-apps/api/core";
1+
import { invoke } from '@tauri-apps/api/core'
2+
import { listen } from '@tauri-apps/api/event'
3+
import { useAtom } from 'jotai'
4+
import { useEffect, useState } from 'react'
5+
import TodoList from './component/TodoList'
6+
import OpenList from './component/OpenList'
7+
import { allTodosAtom, filterAtom } from './store/todos'
8+
import { Todo } from './types/todo'
99

1010
function App() {
11-
const [, setAllTodos] = useAtom(allTodosAtom);
12-
const [todos] = useAtom(filterAtom);
11+
const [, setAllTodos] = useAtom(allTodosAtom)
12+
const [todos] = useAtom(filterAtom)
1313
const [showOpenList, setShowOpenList] = useState(true);
1414

1515
useEffect(() => {
16-
listen("update-all", (event) => {
17-
console.log("updating", event);
18-
getTodos();
19-
});
20-
}, []);
16+
listen('update-all', (event) => {
17+
console.log("updating", event)
18+
getTodos()
19+
})
20+
}, [])
2121

2222
function createList() {
2323
console.log("create list");
24-
invoke("new_list").then(() => {
24+
invoke('new_list').then(() => {
2525
console.log("in new_list and then");
26-
getTodos();
27-
setShowOpenList(false);
28-
});
26+
getTodos();
27+
setShowOpenList(false);
28+
})
2929
}
3030

31-
function joinList(ticket: string) {
31+
function joinList(ticket:string) {
3232
console.log("join list");
3333
setTicket(ticket);
3434
getTodos();
@@ -38,27 +38,25 @@ function App() {
3838
function setTicket(ticket: string) {
3939
// this is the effect for the modal
4040
// otherwise just get-todos
41-
invoke<Todo[]>("set_ticket", { ticket }).then(() => {
42-
getTodos();
43-
});
41+
invoke<Todo[]>('set_ticket', {ticket}).then(() => {
42+
getTodos()
43+
})
4444
}
4545

4646
function getTodos() {
47-
invoke<Todo[]>("get_todos")
48-
.then((res) => {
49-
setAllTodos(res);
50-
})
51-
.then(() => {
52-
setShowOpenList(false);
53-
});
47+
invoke<Todo[]>('get_todos').then((res) => {
48+
setAllTodos(res)
49+
}).then(()=> {
50+
setShowOpenList(false)
51+
})
5452
}
5553

5654
return (
5755
<div className="todoapp">
58-
{showOpenList && <OpenList createList={createList} joinList={joinList} />}
56+
{showOpenList && <OpenList createList={createList} joinList={joinList}/>}
5957
{!showOpenList && <TodoList todos={todos} />}
6058
</div>
61-
);
59+
)
6260
}
6361

64-
export default App;
62+
export default App

‎tauri-todos/src/component/OpenList.tsx‎

Lines changed: 28 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,38 @@
11
import { useState } from "react";
22

3-
const OpenList: React.FC<{
4-
createList: () => void;
5-
joinList: (ticket: string) => void;
6-
}> = ({ createList, joinList }) => {
7-
const [ticket, setTicket] = useState("");
3+
const OpenList: React.FC<{ createList: () => void, joinList: (ticket: string) => void }> = ({ createList, joinList}) => {
4+
const [ticket, setTicket] = useState('');
85
return (
96
<>
107
<header className="header">
118
<h1>todos</h1>
129
</header>
13-
<footer className="footer" style={{ height: "auto" }}>
14-
<p style={{ fontWeight: 400, padding: 0, margin: 0 }}>
15-
Open a new todo list or input a ticket to join an active one:
16-
</p>
17-
<div style={{ margin: 20, display: "flex", justifyContent: "center" }}>
18-
<div style={{ width: 100 }}>
19-
<a
20-
onClick={createList}
21-
style={{ color: "#b83f45", cursor: "pointer" }}
22-
>
23-
Create New List ⇨
24-
</a>
10+
<footer className="footer" style={{ height:"auto"}}>
11+
<p style={{ fontWeight:400, padding:0, margin:0 }}>Open a new todo list or input a ticket to join an active one:</p>
12+
<div style={{margin:20, display: "flex", justifyContent:"center"}}>
13+
<div style={{width: 100}}>
14+
<a onClick={createList} style={{ color: "#b83f45", cursor: "pointer" }}>Create New List ⇨</a>
15+
</div>
16+
</div>
17+
<div style={{margin:20, display: "flex", justifyContent:"space-between"}}>
18+
<input style={
19+
{
20+
background: "#f5f5f5",
21+
boxShadow: "0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1)",
22+
border: "1px solid #e6e6e6",
23+
flexGrow: 1,
24+
paddingLeft: 10,
25+
marginRight: 10,
26+
}}
27+
value={ticket}
28+
onChange={(e) => { setTicket(e.target.value) }}
29+
type="text"
30+
placeholder='input a ticket to join a list'
31+
/>
32+
<a onClick={() => joinList(ticket)}style={{width: 110, cursor: "pointer", color:"#b83f45"}}>Join Using Ticket ⇨</a>
2533
</div>
26-
</div>
27-
<div
28-
style={{
29-
margin: 20,
30-
display: "flex",
31-
justifyContent: "space-between",
32-
}}
33-
>
34-
<input
35-
style={{
36-
background: "#f5f5f5",
37-
boxShadow:
38-
"0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1)",
39-
border: "1px solid #e6e6e6",
40-
flexGrow: 1,
41-
paddingLeft: 10,
42-
marginRight: 10,
43-
}}
44-
value={ticket}
45-
onChange={(e) => {
46-
setTicket(e.target.value);
47-
}}
48-
type="text"
49-
placeholder="input a ticket to join a list"
50-
/>
51-
<a
52-
onClick={() => joinList(ticket)}
53-
style={{ width: 110, cursor: "pointer", color: "#b83f45" }}
54-
>
55-
Join Using Ticket ⇨
56-
</a>
57-
</div>
5834
</footer>
5935
</>
60-
);
61-
};
62-
export default OpenList;
36+
)
37+
}
38+
export default OpenList

‎tauri-todos/src/component/TodoItem.tsx‎

Lines changed: 52 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,93 @@
1-
import { useAtom } from "jotai";
2-
import {
3-
ChangeEventHandler,
4-
KeyboardEventHandler,
5-
useCallback,
6-
useRef,
7-
useState,
8-
} from "react";
9-
import { useClickAway } from "react-use";
10-
import { useDebouncedCallback } from "use-debounce";
11-
import { allTodosAtom } from "../store/todos";
12-
import { Todo } from "../types/todo";
13-
import { useDoubleClick } from "../hooks/useDoubleClick";
14-
import { invoke } from "@tauri-apps/api/core";
1+
import { useAtom } from 'jotai'
2+
import { ChangeEventHandler, KeyboardEventHandler, useCallback, useRef, useState } from 'react'
3+
import { useClickAway } from 'react-use'
4+
import { useDebouncedCallback } from 'use-debounce'
5+
import { allTodosAtom } from '../store/todos'
6+
import { Todo } from '../types/todo'
7+
import { useDoubleClick } from '../hooks/useDoubleClick'
8+
import { invoke } from '@tauri-apps/api/core'
159

1610
const TodoItem: React.FC<{ todo: Todo }> = ({ todo }) => {
17-
const [, setTodos] = useAtom(allTodosAtom);
18-
const [editing, setEditing] = useState(false);
19-
const ref = useRef<HTMLInputElement>(null);
11+
const [, setTodos] = useAtom(allTodosAtom)
12+
const [editing, setEditing] = useState(false)
13+
const ref = useRef<HTMLInputElement>(null)
2014

2115
const toggleDone = useDebouncedCallback(() => {
22-
invoke("toggle_done", { id: todo.id });
23-
}, 500);
16+
invoke('toggle_done', { id: todo.id })
17+
}, 500)
2418

2519
const setLabel = useDebouncedCallback((label: string) => {
26-
invoke("update_todo", {
27-
todo: { ...todo, label },
28-
});
29-
}, 500);
20+
invoke('update_todo', {
21+
todo: { ...todo, label }
22+
})
23+
}, 500)
3024

3125
const deleteTodo = useCallback(() => {
32-
invoke("delete", { id: todo.id });
33-
}, [todo]);
26+
invoke('delete', { id: todo.id })
27+
}, [todo])
3428

3529
const onDelete = () => {
3630
setTodos((todos) => {
3731
return todos.filter((t) => {
38-
return t.id !== todo.id;
39-
});
40-
});
41-
deleteTodo();
42-
};
32+
return t.id !== todo.id
33+
})
34+
})
35+
deleteTodo()
36+
}
4337

4438
const onChange: ChangeEventHandler<HTMLInputElement> = (e) => {
45-
const label = e?.target.value;
39+
const label = e?.target.value
4640
setTodos((todos) => {
4741
return todos.map((t) => {
4842
if (t.id === todo.id) {
49-
setLabel(label);
50-
return { ...t, label };
43+
setLabel(label)
44+
return { ...t, label }
5145
}
52-
return t;
53-
});
54-
});
55-
};
46+
return t
47+
})
48+
})
49+
}
5650

5751
useClickAway(ref, () => {
58-
finishEditing();
59-
});
52+
finishEditing()
53+
})
6054

6155
const finishEditing = useCallback(() => {
62-
setEditing(false);
63-
}, [todo]);
56+
setEditing(false)
57+
}, [todo])
6458

6559
const handleViewClick = useDoubleClick(null, () => {
66-
setEditing(true);
67-
});
60+
setEditing(true)
61+
})
6862

6963
const onDone = useCallback(() => {
7064
setTodos((todos) => {
7165
return todos.map((t) => {
7266
if (t.id === todo.id) {
73-
toggleDone();
74-
return { ...t, done: !t.done };
67+
toggleDone()
68+
return { ...t, done: !t.done }
7569
}
76-
return t;
77-
});
78-
});
79-
}, [todo.id]);
70+
return t
71+
})
72+
})
73+
}, [todo.id])
8074

8175
const onEnter = useCallback<KeyboardEventHandler<HTMLInputElement>>(
8276
(event) => {
83-
if (event.key === "Enter") {
84-
event.preventDefault();
85-
finishEditing();
77+
if (event.key === 'Enter') {
78+
event.preventDefault()
79+
finishEditing()
8680
}
8781
},
8882
[todo]
89-
);
83+
)
9084
return (
9185
<li
92-
className={[editing && "editing", todo.done && "completed"]
93-
.filter(Boolean)
94-
.join(" ")}
86+
className={[editing && 'editing', todo.done && 'completed'].filter(Boolean).join(' ')}
9587
onClick={handleViewClick}
9688
>
9789
<div className="view">
98-
<input
99-
type="checkbox"
100-
className="toggle"
101-
checked={todo.done}
102-
onChange={onDone}
103-
autoFocus
104-
/>
90+
<input type="checkbox" className="toggle" checked={todo.done} onChange={onDone} autoFocus />
10591
<label>{todo.label}</label>
10692
<button className="destroy" onClick={onDelete}></button>
10793
</div>
@@ -117,6 +103,6 @@ const TodoItem: React.FC<{ todo: Todo }> = ({ todo }) => {
117103
/>
118104
)}
119105
</li>
120-
);
121-
};
122-
export default TodoItem;
106+
)
107+
}
108+
export default TodoItem

0 commit comments

Comments
 (0)