AzizaAlSayed · AzizaAlSayed · Nov 27, 2021 · Nov 28, 2021 · Nov 29, 2021 · Abdallatif
diff --git a/src/App.css b/src/App.css
@@ -91,6 +91,16 @@
   margin-left: 10px;
 }
 
+.ButtonDeleteMembers {
+  background-color: #f44336;
+  color: white;
+  border: none;
+  width: 50px;
+  height: 30px;
+  justify-content: center;
+  margin-left: 100px;
+}
+
 .AddInput {
   background-color: #ffffff;
   border: none;
@@ -119,3 +129,21 @@
   background-size: 13px 13px;
   background-image: url("Icons/check.svg");
 }
+
+.MembersDeleting {
+  display: flex;
+  align-items: center;
+}
+
+.FontMembersDeleting {
+  font-size: 10px;
+  margin-left: 87px;
+}
+
+.VisibleTag {
+  visibility: visible;
+}
+
+.HiddenTag {
+  visibility: hidden;
+}
diff --git a/src/components/App.js b/src/components/App.js
@@ -1,44 +1,55 @@
-import Header from './header';
-import Search from './search';
-import NewMember from './newMember';
-import '../App.css';
+import Header from "./header";
+import Search from "./search";
+import NewMember from "./newMember";
+import "../App.css";
 import { useState } from "react";
-import { members } from '../data';
-import MemberList from './memberList';
+import { members } from "../data";
+import MemberList from "./memberList";
 
 export default function App() {
   const [listOfMembers, setListOfMembers] = useState(members);
   const [memberName, setMemberName] = useState("");
+  const searchMemberResult = !memberName
+    ? listOfMembers
+    : listOfMembers.filter((member) =>
+      member.name.toLowerCase().includes(memberName.toLowerCase())
+    );
 
   function handleAddNewMember(memberName) {
-    setListOfMembers(members => [...members, {
-      id: listOfMembers.length,
-      name: memberName,
-    }]);
+    setListOfMembers((members) => [
+      ...members,
+      {
+        id: listOfMembers.length,
+        name: memberName,
+      },
+    ]);
   }
 
+  function handleDeleteMembers(activeMembers) {
 
-  const searchMemberResult = !memberName
-    ? listOfMembers : listOfMembers.filter(member =>
-      (member.name.toLowerCase()).includes(memberName.toLowerCase())
+    setListOfMembers(
+      listOfMembers.filter((member) => !activeMembers[member.id] === true)
     );
+  }
 
   function handleDeleteMember(memberId) {
-    setListOfMembers(listOfMembers.filter(member => member.id !== memberId));
+    setListOfMembers(listOfMembers.filter((member) => member.id !== memberId));
   }
 
   return (
     <div className="Container">
-      <div className="LeftPadding" >
+      <div className="LeftPadding">
         <Header />
         <div className="TitleStyle">
-          <Search memberName={memberName}
-            onMemberNameChange={setMemberName} />
-          <MemberList members={searchMemberResult} onDeleteMember={handleDeleteMember} />
+          <Search memberName={memberName} onMemberNameChange={setMemberName} />
+          <MemberList
+            members={searchMemberResult}
+            onDeleteMember={handleDeleteMember}
+            deleteMembers={handleDeleteMembers}
+          />
           <NewMember onAddNewMember={handleAddNewMember} />
         </div>
       </div>
-    </div >
+    </div>
   );
 }
-
diff --git a/src/components/deleteMembers.js b/src/components/deleteMembers.js
@@ -0,0 +1,14 @@
+export default function DeleteMembers({ onDeleteMembers }) {
+    return (
+        <div className="MembersDeleting">
+            <p className="FontMembersDeleting">Selected Members to Delete</p>
+            <button
+                type="button"
+                className="ButtonDeleteMembers"
+                onClick={onDeleteMembers}
+            >
+                Delete
+            </button>
+        </div>
+    );
+}
diff --git a/src/components/header.js b/src/components/header.js
@@ -1,5 +1,3 @@
 export default function Header() {
-    return (
-        <h5> Add members to Front-end development team </h5>
-    );
-}
+  return <h5> Add members to Front-end development team </h5>;
+}
diff --git a/src/components/member.js b/src/components/member.js
@@ -1,30 +1,51 @@
 import { useState } from "react";
 
-export default function Member({ id, name, onDelete }) {
-    const [isActive, setActive] = useState(false);
+export default function Member({ id, name, onDelete, setActive, isActive }) {
 
-    return (
-        <div key={id} className="FlexDisplay">
-            <div class="Members">
-                <div className="Member">
-                    <svg width="18px" height="18px" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path
-                            d="M24.5 25.98C29.4725 25.98 33.5 21.9227 33.5 16.9133C33.5 11.904 29.4725 7.84668 24.5 7.84668C19.5275 7.84668 15.5 11.904 15.5 16.9133C15.5 21.9227 19.5275 25.98 24.5 25.98Z"
-                            fill="#000000" />
-                        <path
-                            d="M17.3786 29.2021C17.8814 29.0785 18.3971 29.3313 18.6254 29.7991L22.6893 32.7994C24.5 32.799 24.5 32.7995 26.3105 32.7991L30.3746 29.7991C30.6029 29.3313 31.1186 29.0785 31.6214 29.2021C37.0255 30.5301 42.5 33.238 42.5 37.3116V41.845H6.5V37.3116C6.5 33.238 11.9745 30.5301 17.3786 29.2021Z"
-                            fill="#000000" />
-                    </svg>
-                    <p key={id}>{name}</p>
-                </div>
-                <div className="MemberPadding">
-                    <button type="button" className={isActive ? "CheckIconMember ButtonCheckMember" : "ButtonCheckMember CyrcleIconMember"} onClick={() => setActive(!isActive)}>
-                    </button>
-                </div>
-            </div>
-            <button id="delet_m7" type="button" className="ButtonDeleteMember" onClick={() => onDelete(id)}> Delete
-            </button>
+  function onCheckDelete() {
+    setActive(!isActive);
+  }
+  return (
+    <div key={id} className="FlexDisplay">
+      <div class="Members">
+        <div className="Member">
+          <svg
+            width="18px"
+            height="18px"
+            viewBox="0 0 49 49"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M24.5 25.98C29.4725 25.98 33.5 21.9227 33.5 16.9133C33.5 11.904 29.4725 7.84668 24.5 7.84668C19.5275 7.84668 15.5 11.904 15.5 16.9133C15.5 21.9227 19.5275 25.98 24.5 25.98Z"
+              fill="#000000"
+            />
+            <path
+              d="M17.3786 29.2021C17.8814 29.0785 18.3971 29.3313 18.6254 29.7991L22.6893 32.7994C24.5 32.799 24.5 32.7995 26.3105 32.7991L30.3746 29.7991C30.6029 29.3313 31.1186 29.0785 31.6214 29.2021C37.0255 30.5301 42.5 33.238 42.5 37.3116V41.845H6.5V37.3116C6.5 33.238 11.9745 30.5301 17.3786 29.2021Z"
+              fill="#000000"
+            />
+          </svg>
+          <p key={id}>{name}</p>
         </div>
-    );
+        <div className="MemberPadding">
+          <button
+            type="button"
+            className={
+              isActive
+                ? "CheckIconMember ButtonCheckMember"
+                : "ButtonCheckMember CyrcleIconMember"
+            }
+            onClick={() => onCheckDelete()}
+          ></button>
+        </div>
+      </div>
+      <button
+        type="button"
+        className="ButtonDeleteMember"
+        onClick={() => onDelete(id)}
+      >
+        Delete
+      </button>
+    </div>
+  );
 }
-
diff --git a/src/components/memberList.js b/src/components/memberList.js
@@ -1,9 +1,37 @@
 import Member from "./member";
-export default function MemberList({ members, onDeleteMember }) {
-  const membersList = members.map(member =>
-    <Member key={member.id} id={member.id} name={member.name} onDelete={onDeleteMember}></Member>)
-    ;
+import DeleteMembers from "./deleteMembers";
+import { useState } from "react";
+
+export default function MemberList({
+  members,
+  onDeleteMember,
+  deleteMembers,
+}) {
+  const [activeMembers, setActiveMembers] = useState({});
+
+  const isDeleteVisible = Object.values(activeMembers).some((v) => v === true);
   return (
-    <p> {membersList} </p>
+    <div>
+      <p>
+        {members.map((member) => (
+          <Member
+            key={member.id}
+            id={member.id}
+            name={member.name}
+            onDelete={onDeleteMember}
+            isActive={Boolean(activeMembers[member.id])}
+            setActive={() =>
+              setActiveMembers((members) => {
+                const isActive = Boolean(activeMembers[member.id]);
+                return { ...members, [member.id]: !isActive };
+              })
+            }
+          ></Member>
+        ))}
+        {isDeleteVisible && (
+          <DeleteMembers onDeleteMembers={() => deleteMembers(activeMembers)} />
+        )}
+      </p>
+    </div>
   );
-}
+}
diff --git a/src/components/newMember.js b/src/components/newMember.js
@@ -1,23 +1,52 @@
 import { useState } from "react";
 
 export default function NewMember({ onAddNewMember }) {
-    const [name, setName] = useState('');
+    const [name, setName] = useState("");
 
     return (
         <div className="FlexDisplay">
             <div className="Members">
                 <div className="Member">
-                    <input className="AddInput" id="add" type="text" name="add" placeholder="Add a member" value={name}
-                        onChange={memberName => setName(memberName.target.value)} />
+                    <input
+                        className="AddInput"
+                        id="add"
+                        type="text"
+                        name="add"
+                        placeholder="Add a member"
+                        value={name}
+                        onChange={(memberName) => setName(memberName.target.value)}
+                    />
                 </div>
             </div>
-            <button disabled={name === "" || name === null} type="reset" name="learn" className="ButtonAddMember" value="myimage" onClick={() => { setName(''); onAddNewMember(name); }}>
-                <svg version="1.1" width="10" height="10" id="Capa_1" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490"
-                    fill="white" space="preserve">
-                    <polygon points="222.031,490 267.969,490 267.969,267.969 490,267.969 490,222.031 267.969,222.031 267.969,0 222.031,0 
-          222.031,222.031 0,222.031 0,267.969 222.031,267.969 " />
+            <button
+                disabled={name === "" || name === null}
+                type="reset"
+                name="learn"
+                className="ButtonAddMember"
+                value="myimage"
+                onClick={() => {
+                    setName("");
+                    onAddNewMember(name);
+                }}
+            >
+                <svg
+                    version="1.1"
+                    width="10"
+                    height="10"
+                    id="Capa_1"
+                    xlink="http://www.w3.org/1999/xlink"
+                    x="0px"
+                    y="0px"
+                    viewBox="0 0 490 490"
+                    fill="white"
+                    space="preserve"
+                >
+                    <polygon
+                        points="222.031,490 267.969,490 267.969,267.969 490,267.969 490,222.031 267.969,222.031 267.969,0 222.031,0 
+          222.031,222.031 0,222.031 0,267.969 222.031,267.969 "
+                    />
                 </svg>
             </button>
-        </div >
+        </div>
     );
-}
+}
diff --git a/src/components/search.js b/src/components/search.js
@@ -1,8 +1,14 @@
 export default function Search({ memberName, onMemberNameChange }) {
-    const onHandleChange = name => {
+    const onHandleChange = (name) => {
         onMemberNameChange(name.target.value);
     };
     return (
-        <input className="SearchInput" value={memberName} type="search" placeholder="Find members" onChange={onHandleChange} />
+        <input
+            className="SearchInput"
+            value={memberName}
+            type="search"
+            placeholder="Find members"
+            onChange={onHandleChange}
+        />
     );
-}
+}