arch: move web folder into api & move api to top level

2020-07-04 18:08:37 -05:00
parent eaffaa70df
commit e5d5e6da01
354 changed files with 20 additions and 1557 deletions
--- a/frontend/src/shared/components/MemberManager/index.tsx
+++ b/frontend/src/shared/components/MemberManager/index.tsx
@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+
+import {
+  MemberName,
+  ProfileIcon,
+  MemberManagerWrapper,
+  MemberManagerSearchWrapper,
+  MemberManagerSearch,
+  BoardMembersLabel,
+  BoardMembersList,
+  BoardMembersListItem,
+  BoardMemberListItemContent,
+  ActiveIconWrapper,
+} from './Styles';
+import { Checkmark } from 'shared/icons';
+
+type MemberManagerProps = {
+  availableMembers: Array<TaskUser>;
+  activeMembers: Array<TaskUser>;
+  onMemberChange: (member: TaskUser, isActive: boolean) => void;
+};
+const MemberManager: React.FC<MemberManagerProps> = ({
+  availableMembers,
+  activeMembers: initialActiveMembers,
+  onMemberChange,
+}) => {
+  const [activeMembers, setActiveMembers] = useState(initialActiveMembers);
+  const [currentSearch, setCurrentSearch] = useState('');
+  return (
+    <MemberManagerWrapper>
+      <MemberManagerSearchWrapper>
+        <MemberManagerSearch
+          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+            setCurrentSearch(e.currentTarget.value);
+          }}
+        />
+      </MemberManagerSearchWrapper>
+      <BoardMembersLabel>Board Members</BoardMembersLabel>
+      <BoardMembersList>
+        {availableMembers
+          .filter(
+            member => currentSearch === '' || member.fullName.toLowerCase().startsWith(currentSearch.toLowerCase()),
+          )
+          .map(member => {
+            return (
+              <BoardMembersListItem key={member.id}>
+                <BoardMemberListItemContent
+                  onClick={() => {
+                    const isActive = activeMembers.findIndex(m => m.id === member.id) !== -1;
+                    if (isActive) {
+                      setActiveMembers(activeMembers.filter(m => m.id !== member.id));
+                    } else {
+                      setActiveMembers([...activeMembers, member]);
+                    }
+                    onMemberChange(member, !isActive);
+                  }}
+                >
+                  <ProfileIcon>JK</ProfileIcon>
+                  <MemberName>{member.fullName}</MemberName>
+                  {activeMembers.findIndex(m => m.id === member.id) !== -1 && (
+                    <ActiveIconWrapper>
+                      <Checkmark width={16} height={16} />
+                    </ActiveIconWrapper>
+                  )}
+                </BoardMemberListItemContent>
+              </BoardMembersListItem>
+            );
+          })}
+      </BoardMembersList>
+    </MemberManagerWrapper>
+  );
+};
+export default MemberManager;