Skip to content

Commit

Permalink
add move button and toggle mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@pankona
pankona committed Dec 9, 2021
1 parent 70c563e commit 9d496a6
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 52 deletions.
20 changes: 19 additions & 1 deletion hashira-web/src/App.tsx
View file
Expand Up @@ -19,6 +19,7 @@ const App: React.VFC = () => {
any | undefined
>(undefined);
const [isUploading, setIsUploading] = React.useState<boolean>(false);
const [mode, setMode] = React.useState<"move" | "select">("select");

const onSubmitTasks = async (tasks: string[]) => {
if (!user) {
Expand Down Expand Up @@ -109,7 +110,20 @@ const App: React.VFC = () => {
setIsUploading(false);
}}
/>
<input type="button" value={"Move"} disabled={isUploading} />
<input
type="button"
value={mode === "move" ? "finish move" : "move"}
disabled={isUploading}
onClick={() => {
setMode((prev) => {
if (prev === "move") {
return "select";
}
setCheckedTasks({});
return "move";
});
}}
/>

{tasksAndPriorities ? (
<div
Expand All @@ -126,6 +140,7 @@ const App: React.VFC = () => {
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
setTasksAndPriorities={setTasksAndPriorities}
mode={mode}
/>
<TaskList
user={user}
Expand All @@ -134,6 +149,7 @@ const App: React.VFC = () => {
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
setTasksAndPriorities={setTasksAndPriorities}
mode={mode}
/>
<TaskList
user={user}
Expand All @@ -142,6 +158,7 @@ const App: React.VFC = () => {
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
setTasksAndPriorities={setTasksAndPriorities}
mode={mode}
/>
<TaskList
user={user}
Expand All @@ -150,6 +167,7 @@ const App: React.VFC = () => {
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
setTasksAndPriorities={setTasksAndPriorities}
mode={mode}
/>
</div>
) : undefined}
Expand Down
134 changes: 83 additions & 51 deletions hashira-web/src/TaskList.tsx
View file
Expand Up @@ -15,6 +15,12 @@ const StyledList = styled.div`
const StyledListItem = styled.div`
display: flex;
align-items: center;
position: relative;
min-height: 24px;
`;

const StyledCheckbox = styled.input.attrs({ type: "checkbox" })`
position: absolute;
`;

const StyledListContent = styled.input.attrs({ type: "text" })`
Expand All @@ -30,10 +36,19 @@ const StyledListContent = styled.input.attrs({ type: "text" })`
::-webkit-scrollbar {
display: none;
}
margin-left: 24px;
z-index: 1000;
`;

const StyledCheckbox = styled.input.attrs({ type: "checkbox" })`
margin-right: 8px;
const StyledArrow = styled.div`
position: absolute;
min-width: 24px;
min-height: 24px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
font-size: 12px;
`;

export const TaskList: React.VFC<{
Expand All @@ -43,13 +58,15 @@ export const TaskList: React.VFC<{
checkedTasks: { [key: string]: boolean };
setCheckedTasks: (a: { [key: string]: boolean }) => void;
setTasksAndPriorities: (tp: any | undefined) => void;
mode: "move" | "select";
}> = ({
user,
place,
tasksAndPriorities,
checkedTasks,
setCheckedTasks,
setTasksAndPriorities,
mode,
}) => {
const [updatedTasks, setUpdatedTasks] = React.useState<{
[key: string]: string;
Expand All @@ -64,60 +81,75 @@ export const TaskList: React.VFC<{
const taskName = tasksAndPriorities["Tasks"][p].Name;
return (
<StyledListItem key={taskId}>
<StyledCheckbox
id={taskId}
value={taskName}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setCheckedTasks({
...checkedTasks,
[e.target.id]: e.target.checked,
});
}}
/>
<StyledListContent
id={taskId}
key={taskId}
value={
updatedTasks[taskId] !== undefined
? updatedTasks[taskId]
: taskName
}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setUpdatedTasks({
...updatedTasks,
[e.target.id]: e.target.value,
});
}}
onBlur={async (_e: React.ChangeEvent<HTMLInputElement>) => {
const tasksToUpdate: firebase.TasksObject = {};
for (const v in updatedTasks) {
if (updatedTasks[v] === "") {
delete updatedTasks[v];
setUpdatedTasks({
...updatedTasks,
});
return;
<>
<StyledListContent
style={{
marginRight: mode === "select" ? "0px" : "24px",
}}
id={taskId}
key={taskId}
value={
updatedTasks[taskId] !== undefined
? updatedTasks[taskId]
: taskName
}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setUpdatedTasks({
...updatedTasks,
[e.target.id]: e.target.value,
});
}}
onBlur={async (_e: React.ChangeEvent<HTMLInputElement>) => {
const tasksToUpdate: firebase.TasksObject = {};
for (const v in updatedTasks) {
if (updatedTasks[v] === "") {
delete updatedTasks[v];
setUpdatedTasks({
...updatedTasks,
});
return;
}

const task = tasksAndPriorities["Tasks"][v];
tasksToUpdate[v] = {
ID: task.ID,
IsDeleted: false,
Name:
updatedTasks[v] !== "" ? updatedTasks[v] : taskName,
Place: task.Place,
};
}

const task = tasksAndPriorities["Tasks"][v];
tasksToUpdate[v] = {
ID: task.ID,
IsDeleted: false,
Name:
updatedTasks[v] !== "" ? updatedTasks[v] : taskName,
Place: task.Place,
};
}
await firebase.updateTasks2(tasksToUpdate);

await firebase.updateTasks2(tasksToUpdate);
// refresh tasks and priorities
const tp = await firebase.fetchTaskAndPriorities(
user.uid
);
setTasksAndPriorities(tp);

// refresh tasks and priorities
const tp = await firebase.fetchTaskAndPriorities(user.uid);
setTasksAndPriorities(tp);
setUpdatedTasks({});
}}
/>

setUpdatedTasks({});
}}
/>
{mode === "select" ? (
<StyledCheckbox
id={taskId}
value={taskName}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setCheckedTasks({
...checkedTasks,
[e.target.id]: e.target.checked,
});
}}
/>
) : (
<StyledArrow>
<div style={{ cursor: "pointer" }}>👈</div>
<div style={{ cursor: "pointer" }}>👉</div>
</StyledArrow>
)}
</>
</StyledListItem>
);
})}
Expand Down

0 comments on commit 9d496a6

Please sign in to comment.