Skip to content

Commit

Permalink
refactor to use custom hooks entirely
Browse files Browse the repository at this point in the history
  • Loading branch information
@pankona
pankona committed Dec 9, 2021
1 parent ab504c5 commit a070e35
Show file tree
Hide file tree
Showing 4 changed files with 329 additions and 112 deletions.
212 changes: 116 additions & 96 deletions hashira-web/src/App.tsx
View file
Expand Up @@ -5,122 +5,156 @@ import { TaskList } from "./TaskList";
import TaskInput from "./TaskInput";
import styled from "styled-components";
import { StyledHorizontalSpacer, StyledVerticalSpacer } from "./styles";
import {
useAddTasks,
useFetchAccessTokens,
useFetchTasksAndPriorities,
useUpdateTasks,
useUpdateTasks2,
useUser,
} from "./hooks";

const StyledBody = styled.div`
padding-left: 8px;
padding-right: 8px;
`;

const App: React.VFC = () => {
const [user, setUser] = React.useState<firebase.User | null | undefined>(
undefined
);
const [accesstokens, setAccessTokens] = React.useState<string[]>([]);
const [checkedTokens, setCheckedTokens] = React.useState<{
[key: string]: boolean;
}>({});
const [checkedTasks, setCheckedTasks] = React.useState<{
[key: string]: boolean;
}>({});
const [tasksAndPriorities, setTasksAndPriorities] = React.useState<
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) {
return;
}

const tasksToAdd = tasks;
setIsUploading(true);

await firebase.uploadTasks(tasksToAdd);
const user = useUser();
const [addTasksState, addTasks] = useAddTasks();
const [updateTasksState, updateTasks] = useUpdateTasks();
const [updateTasks2State, updateTasks2] = useUpdateTasks2();
const [fetchAccessTokenState, fetchAccessTokens] = useFetchAccessTokens();
const [fetchTasksAndPrioritiesState, fetchTasksAndPriorities] =
useFetchTasksAndPriorities();

// refresh tasks and priorities
const tp = await firebase.fetchTaskAndPriorities(user.uid);
setTasksAndPriorities(tp);
const accesstokens = fetchAccessTokenState.data;
const tasksAndPriorities = fetchTasksAndPrioritiesState.data;
const isLoading =
addTasksState.isLoading ||
updateTasksState.isLoading ||
updateTasks2State.isLoading ||
fetchTasksAndPrioritiesState.isLoading;

setIsUploading(false);
};

const onMoveTask = async (taskId: string, direction: "left" | "right") => {
if (!user) {
return;
}
const tasksToMove: firebase.TasksObject = {};
const task = tasksAndPriorities["Tasks"][taskId];
const currentIndex = firebase.Place.indexOf(task.Place);
const nextIndex = ((): number => {
if (direction === "left") {
if (currentIndex === 0) {
return firebase.Place.length - 1;
const onSubmitTasks = React.useCallback(
(tasks: string[]) => {
return new Promise<void>(async (resolve, reject) => {
if (!user) {
resolve();
return;
}
return currentIndex - 1;
}

if (currentIndex === firebase.Place.length - 1) {
return 0;
}
return currentIndex + 1;
})();
try {
await addTasks(tasks);
// refresh tasks and priorities
await fetchTasksAndPriorities(user.uid);
resolve();
} catch (e) {
reject(e);
}
});
},
[user]
);

tasksToMove[taskId] = {
ID: task.ID,
IsDeleted: false,
Name: task.Name,
Place: firebase.Place[nextIndex],
};
const onMoveTask = React.useCallback(
(taskId: string, direction: "left" | "right") => {
return new Promise<void>(async (resolve, reject) => {
if (!user) {
resolve();
return;
}
const tasksToMove: firebase.TasksObject = {};
const task = tasksAndPriorities["Tasks"][taskId];
const currentIndex = firebase.Place.indexOf(task.Place);
const nextIndex = ((): number => {
if (direction === "left") {
if (currentIndex === 0) {
return firebase.Place.length - 1;
}
return currentIndex - 1;
}

setIsUploading(true);
if (currentIndex === firebase.Place.length - 1) {
return 0;
}
return currentIndex + 1;
})();

await firebase.updateTasks(tasksToMove);
tasksToMove[taskId] = {
ID: task.ID,
IsDeleted: false,
Name: task.Name,
Place: firebase.Place[nextIndex],
};

// refresh tasks and priorities
const tp = await firebase.fetchTaskAndPriorities(user.uid);
setTasksAndPriorities(tp);
setCheckedTasks({});
try {
await updateTasks(tasksToMove);
await fetchTasksAndPriorities(user.uid);
resolve();
} catch (e) {
reject(e);
}
});
},
[user, tasksAndPriorities]
);

setIsUploading(false);
};
const onEditTasks = React.useCallback(
(tasks: firebase.TasksObject) => {
return new Promise<void>(async (resolve, reject) => {
if (!user) {
resolve();
return;
}
try {
await updateTasks2(tasks);
// refresh tasks and priorities
await fetchTasksAndPriorities(user.uid);
resolve();
} catch (e) {
reject(e);
}
});
},
[user]
);

React.useEffect(() => {
firebase.onAuthStateChanged((user: firebase.User | null) => {
if (!user) {
setUser(null);
return;
}

if (user) {
Promise.all([
firebase.fetchAccessTokens(user.uid),
firebase.fetchTaskAndPriorities(user.uid),
]).then(([accesstokens, tasksAndPriorities]) => {
setUser(user);
setAccessTokens(accesstokens);
setTasksAndPriorities(tasksAndPriorities);
});
});
}, []);
fetchAccessTokens(user.uid),
fetchTasksAndPriorities(user.uid),
]);
}
}, [user]);

return (
<div>
<Header user={user} />
<StyledBody>
<TaskInput
onSubmitTasks={onSubmitTasks}
disabled={isUploading || !user}
disabled={isLoading || !user}
/>
<StyledVerticalSpacer />
{user ? (
{user && accesstokens && tasksAndPriorities ? (
<>
<div style={{ display: "flex" }}>
<input
type="button"
value={"Mark as Done"}
style={{ minWidth: "128px" }}
disabled={
isUploading ||
isLoading ||
((): boolean => {
for (const v in checkedTasks) {
if (checkedTasks[v]) {
Expand Down Expand Up @@ -149,24 +183,18 @@ const App: React.VFC = () => {
}
}

setIsUploading(true);

await firebase.updateTasks(tasksToMarkAsDone);

await updateTasks(tasksToMarkAsDone);
// refresh tasks and priorities
const tp = await firebase.fetchTaskAndPriorities(user.uid);
setTasksAndPriorities(tp);
await fetchTasksAndPriorities(user.uid);
setCheckedTasks({});

setIsUploading(false);
}}
/>
<StyledHorizontalSpacer />
<input
type="button"
value={mode === "move" ? "Finish moving" : "Move"}
style={{ minWidth: "128px" }}
disabled={isUploading}
disabled={isLoading}
onClick={() => {
setMode((prev) => {
if (prev === "move") {
Expand All @@ -188,42 +216,38 @@ const App: React.VFC = () => {
}}
>
<TaskList
user={user}
place={"BACKLOG"}
tasksAndPriorities={tasksAndPriorities}
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
setTasksAndPriorities={setTasksAndPriorities}
onEditTasks={onEditTasks}
mode={mode}
onMoveTask={onMoveTask}
/>
<TaskList
user={user}
place={"TODO"}
tasksAndPriorities={tasksAndPriorities}
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
setTasksAndPriorities={setTasksAndPriorities}
onEditTasks={onEditTasks}
mode={mode}
onMoveTask={onMoveTask}
/>
<TaskList
user={user}
place={"DOING"}
tasksAndPriorities={tasksAndPriorities}
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
setTasksAndPriorities={setTasksAndPriorities}
onEditTasks={onEditTasks}
mode={mode}
onMoveTask={onMoveTask}
/>
<TaskList
user={user}
place={"DONE"}
tasksAndPriorities={tasksAndPriorities}
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
setTasksAndPriorities={setTasksAndPriorities}
onEditTasks={onEditTasks}
mode={mode}
onMoveTask={onMoveTask}
/>
Expand All @@ -232,9 +256,7 @@ const App: React.VFC = () => {
<button
onClick={async () => {
await firebase.claimNewAccessToken(user.uid);

const ret = await firebase.fetchAccessTokens(user.uid);
setAccessTokens(ret);
await fetchAccessTokens(user.uid);
}}
>
Generate new access token
Expand All @@ -255,9 +277,7 @@ const App: React.VFC = () => {
}

await firebase.revokeAccessTokens(user.uid, accesstokens);

const ret = await firebase.fetchAccessTokens(user.uid);
setAccessTokens(ret);
await fetchAccessTokens(user.uid);
}}
>
Revoke access token
Expand Down
6 changes: 3 additions & 3 deletions hashira-web/src/TaskInput.tsx
View file
Expand Up @@ -7,7 +7,7 @@ const StyledInputForm = styled.form`
`;

const TaskInput: React.VFC<{
onSubmitTasks: (tasks: string[]) => void;
onSubmitTasks: (tasks: string[]) => Promise<void>;
disabled: boolean;
}> = ({ onSubmitTasks, disabled }) => {
const [tasks, setTasks] = React.useState<string[]>([]);
Expand All @@ -27,9 +27,9 @@ const TaskInput: React.VFC<{
value="Submit"
autoFocus={true}
disabled={tasks.length === 0 || disabled}
onClick={(e: React.FormEvent<HTMLInputElement>) => {
onClick={async (e: React.FormEvent<HTMLInputElement>) => {
e.preventDefault();
onSubmitTasks(tasks);
await onSubmitTasks(tasks);
setTasks([]);
}}
/>
Expand Down
17 changes: 4 additions & 13 deletions hashira-web/src/TaskList.tsx
View file
Expand Up @@ -52,21 +52,19 @@ const StyledArrow = styled.div`
`;

export const TaskList: React.VFC<{
user: firebase.User;
place: typeof firebase.Place[number];
tasksAndPriorities: any;
checkedTasks: { [key: string]: boolean };
setCheckedTasks: (a: { [key: string]: boolean }) => void;
setTasksAndPriorities: (tp: any | undefined) => void;
onEditTasks: (tasks: firebase.TasksObject) => Promise<void>;
mode: "move" | "select";
onMoveTask: (taskId: string, direction: "left" | "right") => void;
onMoveTask: (taskId: string, direction: "left" | "right") => Promise<void>;
}> = ({
user,
place,
tasksAndPriorities,
checkedTasks,
setCheckedTasks,
setTasksAndPriorities,
onEditTasks,
mode,
onMoveTask,
}) => {
Expand Down Expand Up @@ -122,14 +120,7 @@ export const TaskList: React.VFC<{
};
}

await firebase.updateTasks2(tasksToUpdate);

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

await onEditTasks(tasksToUpdate);
setUpdatedTasks({});
}}
/>
Expand Down

0 comments on commit a070e35

Please sign in to comment.