1 files changed, 218 insertions, 0 deletions
diff --git a/Timeline/ClientApp/src/app/timeline/TimelineMember.tsx b/Timeline/ClientApp/src/app/timeline/TimelineMember.tsx
new file mode 100644
index 00000000..8c637f46
--- /dev/null
+++ b/Timeline/ClientApp/src/app/timeline/TimelineMember.tsx
@@ -0,0 +1,218 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Container,
+  ListGroup,
+  ListGroupItem,
+  Modal,
+  Row,
+  Col,
+  Button,
+} from 'reactstrap';
+
+import { User, useAvatarUrl } from '../data/user';
+
+import SearchInput from '../common/SearchInput';
+
+const TimelineMemberItem: React.FC<{
+  user: User;
+  owner: boolean;
+  onRemove?: (username: string) => void;
+}> = ({ user, owner, onRemove }) => {
+  const { t } = useTranslation();
+
+  const avatarUrl = useAvatarUrl(user.username);
+
+  return (
+    <ListGroupItem className="container">
+      <Row>
+        <Col className="col-auto">
+          <img src={avatarUrl} 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 userSearchAvatarUrl = useAvatarUrl(
+    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">
+                            <img
+                              src={userSearchAvatarUrl}
+                              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>
+  );
+};