Merge pull request #154 from crupest/toolchain

Upgrade toolchain of front end.

1 files changed, 218 insertions, 219 deletions

diff --git a/Timeline/ClientApp/src/app/timeline/TimelineMember.tsx b/Timeline/ClientApp/src/app/timeline/TimelineMember.tsx
index 39af412e..f334c6e9 100644
--- a/Timeline/ClientApp/src/app/timeline/TimelineMember.tsx
+++ b/Timeline/ClientApp/src/app/timeline/TimelineMember.tsx
@@ -1,219 +1,218 @@
-import React, { useState } from 'react';

-import { useTranslation } from 'react-i18next';

-import {

-  Container,

-  ListGroup,

-  ListGroupItem,

-  Modal,

-  Row,

-  Col,

-  Button,

-} from 'reactstrap';

-

-import { User, useAvatar } from '../data/user';

-

-import SearchInput from '../common/SearchInput';

-import BlobImage from '../common/BlobImage';

-

-const TimelineMemberItem: React.FC<{

-  user: User;

-  owner: boolean;

-  onRemove?: (username: string) => void;

-}> = ({ user, owner, onRemove }) => {

-  const { t } = useTranslation();

-

-  const avatar = useAvatar(user.username);

-

-  return (

-    <ListGroupItem className="container">

-      <Row>

-        <Col className="col-auto">

-          <BlobImage blob={avatar} className="avatar small" />

-        </Col>

-        <Col>

-          <Row>{user.nickname}</Row>

-          <Row>

-            <small>{'@' + user.username}</small>

-          </Row>

-        </Col>

-        {(() => {

-          if (owner) {

-            return null;

-          }

-          if (onRemove == null) {

-            return null;

-          }

-          return (

-            <Button

-              className="align-self-center"

-              color="danger"

-              onClick={() => {

-                onRemove(user.username);

-              }}

-            >

-              {t('timeline.member.remove')}

-            </Button>

-          );

-        })()}

-      </Row>

-    </ListGroupItem>

-  );

-};

-

-export interface TimelineMemberCallbacks {

-  onCheckUser: (username: string) => Promise<User | null>;

-  onAddUser: (user: User) => Promise<void>;

-  onRemoveUser: (username: string) => void;

-}

-

-export interface TimelineMemberProps {

-  members: User[];

-  edit: TimelineMemberCallbacks | null | undefined;

-}

-

-const TimelineMember: React.FC<TimelineMemberProps> = (props) => {

-  const { t } = useTranslation();

-

-  const [userSearchText, setUserSearchText] = useState<string>('');

-  const [userSearchState, setUserSearchState] = useState<

-    | {

-        type: 'user';

-        data: User;

-      }

-    | { type: 'error'; data: string }

-    | { type: 'loading' }

-    | { type: 'init' }

-  >({ type: 'init' });

-

-  const userSearchAvatar = useAvatar(

-    userSearchState.type === 'user' ? userSearchState.data.username : undefined

-  );

-

-  const members = props.members;

-

-  return (

-    <Container className="px-4">

-      <ListGroup className="my-3">

-        {members.map((member, index) => (

-          <TimelineMemberItem

-            key={member.username}

-            user={member}

-            owner={index === 0}

-            onRemove={props.edit?.onRemoveUser}

-          />

-        ))}

-      </ListGroup>

-      {(() => {

-        const edit = props.edit;

-        if (edit != null) {

-          return (

-            <>

-              <SearchInput

-                value={userSearchText}

-                onChange={(v) => {

-                  setUserSearchText(v);

-                }}

-                loading={userSearchState.type === 'loading'}

-                onButtonClick={() => {

-                  if (userSearchText === '') {

-                    setUserSearchState({

-                      type: 'error',

-                      data: 'login.emptyUsername',

-                    });

-                    return;

-                  }

-

-                  setUserSearchState({ type: 'loading' });

-                  edit.onCheckUser(userSearchText).then(

-                    (u) => {

-                      if (u == null) {

-                        setUserSearchState({

-                          type: 'error',

-                          data: 'timeline.userNotExist',

-                        });

-                      } else {

-                        setUserSearchState({ type: 'user', data: u });

-                      }

-                    },

-                    (e) => {

-                      setUserSearchState({

-                        type: 'error',

-                        data: `${e as string}`,

-                      });

-                    }

-                  );

-                }}

-              />

-              {(() => {

-                if (userSearchState.type === 'user') {

-                  const u = userSearchState.data;

-                  const addable =

-                    members.findIndex((m) => m.username === u.username) === -1;

-                  return (

-                    <>

-                      {!addable ? (

-                        <p>{t('timeline.member.alreadyMember')}</p>

-                      ) : null}

-                      <Container className="mb-3">

-                        <Row>

-                          <Col className="col-auto">

-                            <BlobImage

-                              blob={userSearchAvatar}

-                              className="avatar small"

-                            />

-                          </Col>

-                          <Col>

-                            <Row>{u.nickname}</Row>

-                            <Row>

-                              <small>{'@' + u.username}</small>

-                            </Row>

-                          </Col>

-                          <Button

-                            color="primary"

-                            className="align-self-center"

-                            disabled={!addable}

-                            onClick={() => {

-                              void edit.onAddUser(u).then((_) => {

-                                setUserSearchText('');

-                                setUserSearchState({ type: 'init' });

-                              });

-                            }}

-                          >

-                            {t('timeline.member.add')}

-                          </Button>

-                        </Row>

-                      </Container>

-                    </>

-                  );

-                } else if (userSearchState.type === 'error') {

-                  return (

-                    <p className="text-danger">{t(userSearchState.data)}</p>

-                  );

-                }

-              })()}

-            </>

-          );

-        } else {

-          return null;

-        }

-      })()}

-    </Container>

-  );

-};

-

-export default TimelineMember;

-

-export interface TimelineMemberDialogProps extends TimelineMemberProps {

-  open: boolean;

-  onClose: () => void;

-}

-

-export const TimelineMemberDialog: React.FC<TimelineMemberDialogProps> = (

-  props

-) => {

-  return (

-    <Modal isOpen={props.open} toggle={props.onClose}>

-      <TimelineMember {...props} />

-    </Modal>

-  );

-};

+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Container,
+  ListGroup,
+  ListGroupItem,
+  Modal,
+  Row,
+  Col,
+  Button,
+} from "reactstrap";
+
+import { User, useAvatar } from "../data/user";
+import SearchInput from "../common/SearchInput";
+import BlobImage from "../common/BlobImage";
+
+const TimelineMemberItem: React.FC<{
+  user: User;
+  owner: boolean;
+  onRemove?: (username: string) => void;
+}> = ({ user, owner, onRemove }) => {
+  const { t } = useTranslation();
+
+  const avatar = useAvatar(user.username);
+
+  return (
+    <ListGroupItem className="container">
+      <Row>
+        <Col className="col-auto">
+          <BlobImage blob={avatar} className="avatar small" />
+        </Col>
+        <Col>
+          <Row>{user.nickname}</Row>
+          <Row>
+            <small>{"@" + user.username}</small>
+          </Row>
+        </Col>
+        {(() => {
+          if (owner) {
+            return null;
+          }
+          if (onRemove == null) {
+            return null;
+          }
+          return (
+            <Button
+              className="align-self-center"
+              color="danger"
+              onClick={() => {
+                onRemove(user.username);
+              }}
+            >
+              {t("timeline.member.remove")}
+            </Button>
+          );
+        })()}
+      </Row>
+    </ListGroupItem>
+  );
+};
+
+export interface TimelineMemberCallbacks {
+  onCheckUser: (username: string) => Promise<User | null>;
+  onAddUser: (user: User) => Promise<void>;
+  onRemoveUser: (username: string) => void;
+}
+
+export interface TimelineMemberProps {
+  members: User[];
+  edit: TimelineMemberCallbacks | null | undefined;
+}
+
+const TimelineMember: React.FC<TimelineMemberProps> = (props) => {
+  const { t } = useTranslation();
+
+  const [userSearchText, setUserSearchText] = useState<string>("");
+  const [userSearchState, setUserSearchState] = useState<
+    | {
+        type: "user";
+        data: User;
+      }
+    | { type: "error"; data: string }
+    | { type: "loading" }
+    | { type: "init" }
+  >({ type: "init" });
+
+  const userSearchAvatar = useAvatar(
+    userSearchState.type === "user" ? userSearchState.data.username : undefined
+  );
+
+  const members = props.members;
+
+  return (
+    <Container className="px-4">
+      <ListGroup className="my-3">
+        {members.map((member, index) => (
+          <TimelineMemberItem
+            key={member.username}
+            user={member}
+            owner={index === 0}
+            onRemove={props.edit?.onRemoveUser}
+          />
+        ))}
+      </ListGroup>
+      {(() => {
+        const edit = props.edit;
+        if (edit != null) {
+          return (
+            <>
+              <SearchInput
+                value={userSearchText}
+                onChange={(v) => {
+                  setUserSearchText(v);
+                }}
+                loading={userSearchState.type === "loading"}
+                onButtonClick={() => {
+                  if (userSearchText === "") {
+                    setUserSearchState({
+                      type: "error",
+                      data: "login.emptyUsername",
+                    });
+                    return;
+                  }
+
+                  setUserSearchState({ type: "loading" });
+                  edit.onCheckUser(userSearchText).then(
+                    (u) => {
+                      if (u == null) {
+                        setUserSearchState({
+                          type: "error",
+                          data: "timeline.userNotExist",
+                        });
+                      } else {
+                        setUserSearchState({ type: "user", data: u });
+                      }
+                    },
+                    (e) => {
+                      setUserSearchState({
+                        type: "error",
+                        data: `${e as string}`,
+                      });
+                    }
+                  );
+                }}
+              />
+              {(() => {
+                if (userSearchState.type === "user") {
+                  const u = userSearchState.data;
+                  const addable =
+                    members.findIndex((m) => m.username === u.username) === -1;
+                  return (
+                    <>
+                      {!addable ? (
+                        <p>{t("timeline.member.alreadyMember")}</p>
+                      ) : null}
+                      <Container className="mb-3">
+                        <Row>
+                          <Col className="col-auto">
+                            <BlobImage
+                              blob={userSearchAvatar}
+                              className="avatar small"
+                            />
+                          </Col>
+                          <Col>
+                            <Row>{u.nickname}</Row>
+                            <Row>
+                              <small>{"@" + u.username}</small>
+                            </Row>
+                          </Col>
+                          <Button
+                            color="primary"
+                            className="align-self-center"
+                            disabled={!addable}
+                            onClick={() => {
+                              void edit.onAddUser(u).then((_) => {
+                                setUserSearchText("");
+                                setUserSearchState({ type: "init" });
+                              });
+                            }}
+                          >
+                            {t("timeline.member.add")}
+                          </Button>
+                        </Row>
+                      </Container>
+                    </>
+                  );
+                } else if (userSearchState.type === "error") {
+                  return (
+                    <p className="text-danger">{t(userSearchState.data)}</p>
+                  );
+                }
+              })()}
+            </>
+          );
+        } else {
+          return null;
+        }
+      })()}
+    </Container>
+  );
+};
+
+export default TimelineMember;
+
+export interface TimelineMemberDialogProps extends TimelineMemberProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const TimelineMemberDialog: React.FC<TimelineMemberDialogProps> = (
+  props
+) => {
+  return (
+    <Modal isOpen={props.open} toggle={props.onClose}>
+      <TimelineMember {...props} />
+    </Modal>
+  );
+};