Skip to content

Commit

Permalink
refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@pankona
pankona committed Dec 9, 2021
1 parent 336b740 commit d79523a
Show file tree
Hide file tree
Showing 2 changed files with 174 additions and 157 deletions.
321 changes: 167 additions & 154 deletions hashira-web/src/App.tsx
View file
Expand Up @@ -139,173 +139,186 @@ const App: React.VFC = () => {

return (
<div>
<Header user={user} />
<Header
user={user}
isLoading={!user || !accesstokens || !tasksAndPriorities}
/>
<StyledBody>
<TaskInput
onSubmitTasks={onSubmitTasks}
disabled={isLoading || !user}
/>
{user !== null && (
<TaskInput
onSubmitTasks={onSubmitTasks}
disabled={isLoading || !user}
/>
)}
<StyledVerticalSpacer />
{user && accesstokens && tasksAndPriorities ? (
<>
<div style={{ display: "flex" }}>
<input
type="button"
value={"Mark as Done"}
style={{ minWidth: "128px" }}
disabled={
isLoading ||
((): boolean => {
for (const v in checkedTasks) {
if (checkedTasks[v]) {
return false;
{(() => {
if (user === null) {
return <></>;
}

if (!user || !accesstokens || !tasksAndPriorities) {
return <div>Loading...</div>;
}

return (
<>
<div style={{ display: "flex" }}>
<input
type="button"
value={"Mark as Done"}
style={{ minWidth: "128px" }}
disabled={
isLoading ||
((): boolean => {
for (const v in checkedTasks) {
if (checkedTasks[v]) {
return false;
}
}
}
return true;
})()
}
onClick={async (e: React.FormEvent<HTMLInputElement>) => {
e.preventDefault();
if (!user) {
return;
return true;
})()
}

const tasksToMarkAsDone: firebase.TasksObject = {};
for (const v in checkedTasks) {
if (checkedTasks[v]) {
const task = tasksAndPriorities["Tasks"][v];
tasksToMarkAsDone[v] = {
ID: task.ID,
IsDeleted: task.Place === "DONE",
Name: task.Name,
Place: "DONE",
};
onClick={async (e: React.FormEvent<HTMLInputElement>) => {
e.preventDefault();
if (!user) {
return;
}
}

await updateTasks(tasksToMarkAsDone);
// refresh tasks and priorities
await fetchTasksAndPriorities(user.uid);
setCheckedTasks({});
}}
/>
<StyledHorizontalSpacer />
<input
type="button"
value={mode === "move" ? "Finish moving" : "Move"}
style={{ minWidth: "128px" }}
disabled={isLoading}
onClick={() => {
setMode((prev) => {
if (prev === "move") {
return "select";
const tasksToMarkAsDone: firebase.TasksObject = {};
for (const v in checkedTasks) {
if (checkedTasks[v]) {
const task = tasksAndPriorities["Tasks"][v];
tasksToMarkAsDone[v] = {
ID: task.ID,
IsDeleted: task.Place === "DONE",
Name: task.Name,
Place: "DONE",
};
}
}

await updateTasks(tasksToMarkAsDone);
// refresh tasks and priorities
await fetchTasksAndPriorities(user.uid);
setCheckedTasks({});
return "move";
});
}}
/>
</div>
<StyledVerticalSpacer />
{tasksAndPriorities ? (
<div
className="TaskAndPriorities"
style={{
display: "flex",
overflow: "auto",
}}
>
<TaskList
place={"BACKLOG"}
tasksAndPriorities={tasksAndPriorities}
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
onEditTasks={onEditTasks}
mode={mode}
onMoveTask={onMoveTask}
/>
<TaskList
place={"TODO"}
tasksAndPriorities={tasksAndPriorities}
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
onEditTasks={onEditTasks}
mode={mode}
onMoveTask={onMoveTask}
}}
/>
<TaskList
place={"DOING"}
tasksAndPriorities={tasksAndPriorities}
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
onEditTasks={onEditTasks}
mode={mode}
onMoveTask={onMoveTask}
/>
<TaskList
place={"DONE"}
tasksAndPriorities={tasksAndPriorities}
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
onEditTasks={onEditTasks}
mode={mode}
onMoveTask={onMoveTask}
<StyledHorizontalSpacer />
<input
type="button"
value={mode === "move" ? "Finish moving" : "Move"}
style={{ minWidth: "128px" }}
disabled={isLoading}
onClick={() => {
setMode((prev) => {
if (prev === "move") {
return "select";
}
setCheckedTasks({});
return "move";
});
}}
/>
</div>
) : undefined}
<button
onClick={async () => {
await firebase.claimNewAccessToken(user.uid);
await fetchAccessTokens(user.uid);
}}
>
Generate new access token
</button>
<button
disabled={((): boolean => {
for (const v in checkedTokens) {
if (checkedTokens[v]) {
return false;
<StyledVerticalSpacer />
{tasksAndPriorities ? (
<div
className="TaskAndPriorities"
style={{
display: "flex",
overflow: "auto",
}}
>
<TaskList
place={"BACKLOG"}
tasksAndPriorities={tasksAndPriorities}
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
onEditTasks={onEditTasks}
mode={mode}
onMoveTask={onMoveTask}
/>
<TaskList
place={"TODO"}
tasksAndPriorities={tasksAndPriorities}
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
onEditTasks={onEditTasks}
mode={mode}
onMoveTask={onMoveTask}
/>
<TaskList
place={"DOING"}
tasksAndPriorities={tasksAndPriorities}
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
onEditTasks={onEditTasks}
mode={mode}
onMoveTask={onMoveTask}
/>
<TaskList
place={"DONE"}
tasksAndPriorities={tasksAndPriorities}
checkedTasks={checkedTasks}
setCheckedTasks={setCheckedTasks}
onEditTasks={onEditTasks}
mode={mode}
onMoveTask={onMoveTask}
/>
</div>
) : undefined}
<button
onClick={async () => {
await firebase.claimNewAccessToken(user.uid);
await fetchAccessTokens(user.uid);
}}
>
Generate new access token
</button>
<button
disabled={((): boolean => {
for (const v in checkedTokens) {
if (checkedTokens[v]) {
return false;
}
}
return true;
})()}
onClick={async () => {
const accesstokens: string[] = [];
for (let v in checkedTokens) {
accesstokens.push(v);
}
}
return true;
})()}
onClick={async () => {
const accesstokens: string[] = [];
for (let v in checkedTokens) {
accesstokens.push(v);
}

await firebase.revokeAccessTokens(user.uid, accesstokens);
await fetchAccessTokens(user.uid);
}}
>
Revoke access token
</button>
{accesstokens.map((token: string) => {
return (
<li key={token}>
<input
id={token}
type="checkbox"
checked={checkedTokens[token] || false}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setCheckedTokens({
...checkedTokens,
[e.target.id]: e.target.checked,
});
}}
name={token}
value={token}
/>
{token}
</li>
);
})}
</>
) : (
<div>Loading...</div>
)}
await firebase.revokeAccessTokens(user.uid, accesstokens);
await fetchAccessTokens(user.uid);
}}
>
Revoke access token
</button>
{accesstokens.map((token: string) => {
return (
<li key={token}>
<input
id={token}
type="checkbox"
checked={checkedTokens[token] || false}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
setCheckedTokens({
...checkedTokens,
[e.target.id]: e.target.checked,
});
}}
name={token}
value={token}
/>
{token}
</li>
);
})}
</>
);
})()}
</StyledBody>
</div>
);
Expand Down
10 changes: 7 additions & 3 deletions hashira-web/src/Header.tsx
View file
Expand Up @@ -28,9 +28,10 @@ const StyledLoginLogout = styled.div`
justify-content: end;
`;

const Header: React.VFC<{ user: firebase.User | null | undefined }> = ({
user,
}) => {
const Header: React.VFC<{
user: firebase.User | null | undefined;
isLoading: boolean;
}> = ({ user, isLoading }) => {
return (
<StyledHeader>
<div style={{ display: "flex", minWidth: "50%" }}>
Expand All @@ -51,6 +52,9 @@ const Header: React.VFC<{ user: firebase.User | null | undefined }> = ({
</div>
);
default:
if (isLoading) {
return <div></div>;
}
return (
<div style={{ cursor: "pointer" }} onClick={firebase.logout}>
Logout
Expand Down

0 comments on commit d79523a

Please sign in to comment.