[{"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\index.js":"1","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\History.js":"2","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\App.js":"3","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Dash.js":"4","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Constants\\constants.js":"5","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Loading.js":"6","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\System.js":"7","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Memberlist.js":"8","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\MemberCard.js":"9","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Functions\\discord-parser.js":"10","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Footer.js":"11","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Profile.js":"12","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Public.js":"13","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\ProfileList.js":"14","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\ProfileCard.js":"15","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\MemberPage.js":"16","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\MemberPages.js":"17","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\ProfilePages.js":"18","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\ProfilePage.js":"19"},{"size":329,"mtime":1607895960007,"results":"20","hashOfConfig":"21"},{"size":87,"mtime":1607504507181,"results":"22","hashOfConfig":"21"},{"size":9983,"mtime":1609934901122,"results":"23","hashOfConfig":"21"},{"size":243,"mtime":1609881413764,"results":"24","hashOfConfig":"21"},{"size":73,"mtime":1607504507180,"results":"25","hashOfConfig":"21"},{"size":231,"mtime":1607504507174,"results":"26","hashOfConfig":"21"},{"size":11158,"mtime":1609872701157,"results":"27","hashOfConfig":"21"},{"size":18085,"mtime":1609879377949,"results":"28","hashOfConfig":"21"},{"size":22273,"mtime":1609931499730,"results":"29","hashOfConfig":"21"},{"size":10382,"mtime":1607549930730,"results":"30","hashOfConfig":"21"},{"size":741,"mtime":1607964943027,"results":"31","hashOfConfig":"21"},{"size":4119,"mtime":1609885506592,"results":"32","hashOfConfig":"21"},{"size":1636,"mtime":1607976735762,"results":"33","hashOfConfig":"21"},{"size":8356,"mtime":1609924379131,"results":"34","hashOfConfig":"21"},{"size":6811,"mtime":1609933963373,"results":"35","hashOfConfig":"21"},{"size":22415,"mtime":1609933961848,"results":"36","hashOfConfig":"21"},{"size":895,"mtime":1609934750914,"results":"37","hashOfConfig":"21"},{"size":912,"mtime":1609934750369,"results":"38","hashOfConfig":"21"},{"size":6822,"mtime":1609934045523,"results":"39","hashOfConfig":"21"},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1uc84gl",{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"48"},{"filePath":"49","messages":"50","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"48"},{"filePath":"51","messages":"52","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"48"},{"filePath":"53","messages":"54","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"48"},{"filePath":"55","messages":"56","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"57","usedDeprecatedRules":"48"},{"filePath":"58","messages":"59","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"48"},{"filePath":"60","messages":"61","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"48"},{"filePath":"62","messages":"63","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"48"},{"filePath":"64","messages":"65","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"48"},{"filePath":"66","messages":"67","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"48"},{"filePath":"68","messages":"69","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"70","usedDeprecatedRules":"48"},{"filePath":"71","messages":"72","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"48"},{"filePath":"73","messages":"74","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"48"},{"filePath":"75","messages":"76","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"48"},{"filePath":"77","messages":"78","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"48"},{"filePath":"79","messages":"80","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\index.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\History.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\App.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Dash.js",[],["81","82"],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Constants\\constants.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Loading.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\System.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Memberlist.js",["83"],"import React, { useEffect, useLayoutEffect, useState, useCallback } from 'react';\r\nimport { useRouteMatch, Switch, Route } from \"react-router-dom\";\r\nimport  * as BS from 'react-bootstrap'\r\nimport Popup from 'reactjs-popup';\r\nimport 'reactjs-popup/dist/index.css';\r\nimport { useForm } from \"react-hook-form\";\r\n\r\nimport MemberCard from './MemberCard.js'\r\nimport MemberPages from './MemberPages.js'\r\nimport Loading from \"./Loading.js\";\r\nimport API_URL from \"../Constants/constants.js\";\r\n\r\nimport { FaPlus } from \"react-icons/fa\";\r\n\r\nexport default function Memberlist() {\r\n\r\n    const { path } = useRouteMatch();\r\n    \r\n    const user = JSON.parse(localStorage.getItem('user'));\r\n    const userId = user.id;\r\n\r\n    const [isLoading, setIsLoading ] = useState(false);\r\n    const [isError, setIsError ] = useState(false);\r\n    const [errorAlert, setErrorAlert ] = useState(false);\r\n\r\n    const [proxyView, setProxyView] = useState(false);\r\n    const [privacyView, setPrivacyView] = useState(false);\r\n    const [currentPage, setCurrentPage] = useState(1);\r\n    const [membersPerPage, setMembersPerPage] = useState(25);\r\n\r\n    const [open, setOpen] = useState(false);\r\n    const closeModal = () => setOpen(false);\r\n\r\n    const [members, setMembers ] = useState([]);\r\n    const [memberData, setMemberData ] = useState([]);\r\n    const [filteredMembers, setFilteredMembers ] = useState([]);\r\n    const [sortedMembers, setSortedMembers ] = useState([]);\r\n\r\n    const [searchBy, setSearchBy] = useState('name')\r\n    const [sortBy, setSortBy] = useState('name')\r\n\r\n    const [value, setValue] = useState('');\r\n    const [proxyTags, setProxyTags] = useState([{\r\n      prefix: \"\", suffix: \"\"\r\n    }]);\r\n\r\n    const {register, handleSubmit} = useForm();\r\n\r\n  const fetchMembers = useCallback( () => {\r\n    setIsLoading(true);\r\n    setIsError(false);\r\n    setMembersPerPage(25);\r\n\r\n     fetch(`${API_URL}s/${userId}/members`,{\r\n    method: 'GET',\r\n    headers: {\r\n      'Authorization': JSON.stringify(localStorage.getItem(\"token\")).slice(1, -1)\r\n    }}).then ( res => res.json()\r\n    ).then (data => { \r\n      setMembers(data)\r\n      setIsLoading(false);\r\n  })\r\n    .catch (error => { \r\n        console.log(error);\r\n        setIsError(true);\r\n        setIsLoading(false);\r\n    })\r\n  }, [userId])\r\n\r\n  useLayoutEffect(() => {\r\n    fetchMembers();\r\n  }, [fetchMembers])\r\n\r\n   useEffect(() => {\r\n    let Members = members.map(member => {\r\n      if (member.display_name) {\r\n        return {...member, displayName: member.display_name}\r\n      } return {...member, displayName: member.name}\r\n    }) \r\n    let Members1 = Members.map(member => {\r\n      if (member.description) {\r\n        return {...member, desc: member.description}\r\n      } return {...member, desc: \"(no description)\"}\r\n    })\r\n    setMemberData(Members1);\r\n  }, [members])\r\n\r\n    function addProxyField() {\r\n      setProxyTags(oldTags => [...oldTags, {prefix: '', suffix: ''}] )\r\n    }\r\n\r\n    const submitMember = data => {\r\n      setIsLoading(true);\r\n\r\n      const newdata = data.proxy_tags ? {...data, proxy_tags: data.proxy_tags.filter(tag => !(tag.prefix === \"\" && tag.suffix === \"\"))} : data\r\n\r\n      fetch(`${API_URL}m/`,{\r\n        method: 'POST',\r\n        body: JSON.stringify(newdata),\r\n        headers: {\r\n          'Content-Type': 'application/json',\r\n          'Authorization': JSON.stringify(localStorage.getItem(\"token\")).slice(1, -1)\r\n        }}).then (res => res.json()\r\n        ).then (data => { \r\n            setErrorAlert(false);\r\n            closeModal();\r\n            fetchMembers();\r\n    }\r\n        ).catch (error => {\r\n            console.error(error);\r\n            setErrorAlert(true);\r\n        });\r\n    }\r\n\r\n    const indexOfLastMember = currentPage * membersPerPage;\r\n    const indexOfFirstMember = indexOfLastMember - membersPerPage;\r\n    \r\n    useEffect(() => {\r\n      searchMembers();\r\n    }, [value, memberData, searchBy])\r\n\r\n    function searchMembers() {\r\n    const currentMembers =  memberData.filter(member => {\r\n      if (!value) return true;\r\n      \r\n      if (searchBy === 'name') {\r\n      if (member.name.toLowerCase().includes(value.toLowerCase())) {\r\n        return true;\r\n      }\r\n      return false;\r\n    } else if (searchBy === 'display name') {\r\n      if (member.displayName.toLowerCase().includes(value.toLowerCase())) {\r\n        return true;\r\n      }\r\n      return false\r\n    } else if (searchBy === 'description') {\r\n      if (member.desc.toLowerCase().includes(value.toLowerCase())) {\r\n        return true;\r\n      }\r\n      return false;\r\n    } else if (searchBy === 'ID') {\r\n      if (member.id.toLowerCase().includes(value.toLowerCase())) {\r\n        return true;\r\n      }\r\n      return false;\r\n    }\r\n      return false;\r\n    })\r\n    setFilteredMembers(currentMembers);\r\n    }\r\n\r\n    useEffect (() => { \r\n      if (sortBy === 'name') {\r\n      const sortMembers =  filteredMembers.sort((a, b) => a.name.localeCompare(b.name)).slice(indexOfFirstMember, indexOfLastMember);\r\n      setSortedMembers(sortMembers);\r\n      } else if (sortBy === 'display name') {\r\n        const sortMembers =  filteredMembers.sort((a, b) => a.displayName.localeCompare(b.displayName)).slice(indexOfFirstMember, indexOfLastMember);\r\n        setSortedMembers(sortMembers);\r\n      } else if (sortBy === 'ID') {\r\n        const sortMembers =  filteredMembers.sort((a, b) => a.id.localeCompare(b.id)).slice(indexOfFirstMember, indexOfLastMember);\r\n        setSortedMembers(sortMembers);\r\n      } else if (sortBy === 'date created') {\r\n        const sortMembers =  filteredMembers.sort((a, b) => a.created.localeCompare(b.created)).slice(indexOfFirstMember, indexOfLastMember);\r\n        setSortedMembers(sortMembers);\r\n      }\r\n    }, [sortBy, filteredMembers, indexOfFirstMember, indexOfLastMember])\r\n\r\n    const active = currentPage;\r\n    const pageAmount = Math.ceil(filteredMembers.length / membersPerPage);\r\n      \r\n    const memberList = sortedMembers.map((member) => <BS.Card key={member.id}>\r\n        <MemberCard\r\n        member={member} \r\n        />\r\n    </BS.Card>\r\n    );\r\n\r\n    return (\r\n      <Switch>\r\n        <Route exact path={path}>\r\n        <>\r\n        <BS.Row className=\"mb-3 justfiy-content-md-center\">\r\n        <BS.Col xs={12} lg={4}>\r\n        <BS.Form>\r\n          <BS.InputGroup className=\"mb-3\">\r\n          <BS.Form.Control disabled placeholder='Page length:'/>\r\n            <BS.Form.Control as=\"select\" defaultValue=\"25\" onChange={e => {\r\n              setMembersPerPage(e.target.value);\r\n              setCurrentPage(1);\r\n              }}>\r\n              <option>10</option>\r\n              <option>25</option>\r\n              <option>50</option>\r\n              <option>100</option>\r\n            </BS.Form.Control>\r\n            </BS.InputGroup>\r\n        </BS.Form>\r\n        </BS.Col>\r\n        <BS.Col xs={12} lg={4}>\r\n        <BS.Form>\r\n          <BS.InputGroup className=\"mb-3\">\r\n          <BS.Form.Control disabled placeholder='Search by:'/>\r\n            <BS.Form.Control as=\"select\" defaultValue={searchBy} onChange={e => {\r\n              setSearchBy(e.target.value)\r\n              }}>\r\n              <option>name</option>\r\n              <option>display name</option>\r\n              <option>description</option>\r\n              <option>ID</option>\r\n            </BS.Form.Control>\r\n            </BS.InputGroup>\r\n        </BS.Form>\r\n        </BS.Col>\r\n        <BS.Col xs={12} lg={4}>\r\n        <BS.Form>\r\n          <BS.InputGroup className=\"mb-3\">\r\n          <BS.Form.Control disabled placeholder='Sort by:'/>\r\n            <BS.Form.Control as=\"select\" defaultValue={sortBy} onChange={e => {\r\n              setSortBy(e.target.value)\r\n              }}>\r\n              <option>name</option>\r\n              <option>display name</option>\r\n              <option>ID</option>\r\n              <option>date created</option>\r\n            </BS.Form.Control>\r\n            </BS.InputGroup>\r\n        </BS.Form>\r\n        </BS.Col>\r\n        </BS.Row>\r\n        <BS.Row noGutters=\"true\" className=\"justify-content-md-center\">\r\n        <BS.Col className=\"ml-lg-2 mb-3\" xs={12} lg={6}>\r\n        <BS.Form>\r\n            <BS.Form.Control value={value} onChange={e => {setValue(e.target.value); setCurrentPage(1);}} placeholder={`Search by ${searchBy}`}/>\r\n        </BS.Form>\r\n        </BS.Col>\r\n        <BS.Col className=\"ml-lg-2 mb-3\" xs={12} lg={1}>\r\n          <BS.Button type=\"primary\" className=\"m-0\" block onClick={() => fetchMembers()}>Refresh</BS.Button>\r\n        </BS.Col>\r\n        </BS.Row>\r\n        <BS.Row className=\"justify-content-md-center\">\r\n        <BS.Pagination className=\"ml-auto mr-auto\">\r\n          { currentPage === 1 ? <BS.Pagination.Prev disabled/> : <BS.Pagination.Prev onClick={() => setCurrentPage(currentPage - 1)} />}\r\n          { currentPage < 3 ? \"\" : <BS.Pagination.Item  onClick={() => setCurrentPage(1)} active={1 === active}>{1}</BS.Pagination.Item>}\r\n          { currentPage < 4 ? \"\" :<BS.Pagination.Ellipsis disabled />}\r\n          { currentPage > 1 ? <BS.Pagination.Item  onClick={() => setCurrentPage(currentPage - 1)}>{currentPage - 1}</BS.Pagination.Item> : \"\" }\r\n          <BS.Pagination.Item  onClick={() => setCurrentPage(currentPage)} active={currentPage === active}>{currentPage}</BS.Pagination.Item>\r\n          { currentPage < pageAmount ? <BS.Pagination.Item  onClick={() => setCurrentPage(currentPage + 1)}>{currentPage + 1}</BS.Pagination.Item> : \"\" }\r\n          { currentPage > pageAmount - 3 ? \"\" : <BS.Pagination.Ellipsis disabled />}\r\n          { currentPage > pageAmount - 2 ? \"\" : <BS.Pagination.Item  onClick={() => setCurrentPage(pageAmount)} active={pageAmount === active}>{pageAmount}</BS.Pagination.Item>}\r\n          { currentPage === pageAmount ? <BS.Pagination.Next disabled /> :<BS.Pagination.Next onClick={() => setCurrentPage(currentPage + 1)} />}\r\n          </BS.Pagination>\r\n        </BS.Row>\r\n        { isLoading ? <Loading /> : isError ? \r\n        <BS.Alert variant=\"danger\">Error fetching members.</BS.Alert> :\r\n        <>\r\n        <BS.Card className=\"w-100\">\r\n          <BS.Card.Header className=\"d-flex align-items-center justify-content-between\">\r\n            <BS.Button variant=\"link\" className=\"float-left\" onClick={() => setOpen(o => !o)}><FaPlus className=\"mr-4\"/>Add Member</BS.Button> \r\n            <Popup open={open} position=\"top-center\" modal>\r\n              <BS.Container>\r\n                <BS.Card>\r\n                  <BS.Card.Header>\r\n                      <h5><FaPlus className=\"mr-3\"/> Add member </h5>\r\n                  </BS.Card.Header>\r\n                  <BS.Card.Body>\r\n                  { errorAlert ? <BS.Alert variant=\"danger\">Something went wrong, please try logging in and out again.</BS.Alert> : \"\" }\r\n                    <BS.Form onSubmit={handleSubmit(submitMember)}>\r\n                            <BS.Form.Text>\r\n                            </BS.Form.Text>\r\n                            <BS.Form.Row>\r\n                        <BS.Col className=\"mb-lg-2\" xs={12} lg={3}>\r\n                            <BS.Form.Label>Name:</BS.Form.Label>\r\n                          <BS.Form.Control name=\"name\" ref={register()} defaultValue={''} required/>\r\n                        </BS.Col>\r\n                        <BS.Col className=\"mb-lg-2\" xs={12} lg={3}>\r\n                            <BS.Form.Label>Display name: </BS.Form.Label>\r\n                            <BS.Form.Control name=\"display_name\" ref={register}  defaultValue={''} />\r\n                        </BS.Col>\r\n                        <BS.Col className=\"mb-lg-2\" xs={12} lg={3}>\r\n                            <BS.Form.Label>Birthday:</BS.Form.Label>\r\n                            <BS.Form.Control  pattern=\"^\\d{4}\\-(0[1-9]|1[012])\\-(0[1-9]|[12][0-9]|3[01])$\" name=\"birthday\" ref={register}  defaultValue={''}/>\r\n                            <BS.Form.Text>(YYYY-MM-DD)</BS.Form.Text>\r\n                        </BS.Col>\r\n                        <BS.Col className=\"mb-lg-2\" xs={12} lg={3}>\r\n                            <BS.Form.Label>Pronouns:</BS.Form.Label>\r\n                            <BS.Form.Control name=\"pronouns\" ref={register} defaultValue={''} />\r\n                        </BS.Col>\r\n                        <BS.Col className=\"mb-lg-2\" xs={12} lg={3}>\r\n                            <BS.Form.Label>Avatar url:</BS.Form.Label> \r\n                          <BS.Form.Control type=\"url\" name=\"avatar_url\" ref={register}  defaultValue={''} />\r\n                        </BS.Col>\r\n                        <BS.Col className=\"mb-lg-2\" xs={12} lg={3}>\r\n                            <BS.Form.Label>Color:</BS.Form.Label> \r\n                          <BS.Form.Control  pattern=\"[A-Fa-f0-9]{6}\" name=\"color\" ref={register}  defaultValue={''} />\r\n                            <BS.Form.Text>(hexcode)</BS.Form.Text>\r\n                        </BS.Col>\r\n                        <BS.Col className=\"mb-lg-2\" xs={12} lg={2}>\r\n                            <BS.Form.Label>Proxy tags:</BS.Form.Label> \r\n                            <BS.Button variant=\"primary\" block onClick={() => setProxyView(view => !view)}> { proxyView ? \"Hide\" : \"Show\" }</BS.Button>\r\n                        </BS.Col>\r\n                        <BS.Col className=\"mb-lg-2\" xs={12} lg={2}>\r\n                            <BS.Form.Label>Privacy settings:</BS.Form.Label> \r\n                            <BS.Button variant=\"primary\" block onClick={() => setPrivacyView(view => !view)}> { privacyView ? \"Hide\" : \"Show\" }</BS.Button>\r\n                        </BS.Col>\r\n                    </BS.Form.Row>\r\n                    <hr/>\r\n                    { proxyView ? <>\r\n                <h5>Proxy Tags</h5>\r\n                    <BS.Form.Row>\r\n                  { proxyTags.map((item, index) => (\r\n                    <BS.Col key={index} className=\"mb-lg-2\" xs={12} lg={2}>\r\n                        <BS.Form.Row>\r\n                        <BS.InputGroup className=\"ml-1 mr-1 mb-1\">\r\n                        <BS.Form.Control name={`proxy_tags[${index}].prefix`} defaultValue={item.prefix} ref={register}/> \r\n                        <BS.Form.Control disabled placeholder='text'/>\r\n                        <BS.Form.Control name={`proxy_tags[${index}].suffix`} defaultValue={item.suffix} ref={register}/>\r\n                        </BS.InputGroup>\r\n                        </BS.Form.Row>\r\n                    </BS.Col>\r\n                ))} <BS.Col className=\"mb-lg-2\" xs={12} lg={2}><BS.Button block variant=\"light\" onClick={() => addProxyField()}>Add new</BS.Button></BS.Col>\r\n             </BS.Form.Row>\r\n                    <hr/></> : \"\" }\r\n                { privacyView ? <><h5>privacy settings</h5>\r\n                    <BS.Form.Row>\r\n                    <BS.Col className=\"mb-lg-2\" xs={12} lg={3}>\r\n                        <BS.Form.Label>Visibility:</BS.Form.Label>\r\n                        <BS.Form.Control name=\"visibility\" as=\"select\" ref={register}>\r\n                            <option>public</option>\r\n                            <option>private</option>\r\n                        </BS.Form.Control>\r\n                    </BS.Col>\r\n                    <BS.Col className=\"mb-lg-2\" xs={12} lg={3}>\r\n                    <BS.Form.Label>Name:</BS.Form.Label>\r\n                        <BS.Form.Control name=\"name_privacy\" as=\"select\" ref={register}>\r\n                            <option>public</option>\r\n                            <option>private</option>\r\n                        </BS.Form.Control>\r\n                    </BS.Col>\r\n                    <BS.Col className=\"mb-lg-2\" xs={12} lg={3}>\r\n                    <BS.Form.Label>Description:</BS.Form.Label>\r\n                        <BS.Form.Control name=\"description_privacy\" as=\"select\" ref={register}>\r\n                            <option>public</option>\r\n                            <option>private</option>\r\n                        </BS.Form.Control>\r\n                    </BS.Col>\r\n                    <BS.Col className=\"mb-lg-2\" xs={12} lg={3}>\r\n                    <BS.Form.Label>Birthday:</BS.Form.Label>\r\n                        <BS.Form.Control name=\"birthday_privacy\" as=\"select\" ref={register}>\r\n                            <option>public</option>\r\n                            <option>private</option>\r\n                        </BS.Form.Control>\r\n                    </BS.Col>\r\n                    <BS.Col className=\"mb-lg-2\" xs={12} lg={3}>\r\n                    <BS.Form.Label>Pronouns:</BS.Form.Label>\r\n                        <BS.Form.Control name=\"pronoun_privacy\" as=\"select\" ref={register}>\r\n                            <option>public</option>\r\n                            <option>private</option>\r\n                        </BS.Form.Control>\r\n                    </BS.Col>\r\n                    <BS.Col className=\"mb-3\" xs={12} lg={3}>\r\n                    <BS.Form.Label>Meta:</BS.Form.Label>\r\n                        <BS.Form.Control name=\"metadata_privacy\" as=\"select\" ref={register}>\r\n                            <option>public</option>\r\n                            <option>private</option>\r\n                        </BS.Form.Control>\r\n                    </BS.Col>\r\n                </BS.Form.Row>               \r\n                <hr/></> : \"\" }\r\n                <BS.Form.Group className=\"mt-3\">\r\n                        <BS.Form.Label>Description:</BS.Form.Label>\r\n                        <BS.Form.Control maxLength=\"1000\" as=\"textarea\" rows=\"7\" name=\"description\" ref={register} defaultValue={''}/>\r\n                    </BS.Form.Group>\r\n                    <BS.Button variant=\"primary\" type=\"submit\">Submit</BS.Button> <BS.Button variant=\"light\" className=\"float-right\" onClick={closeModal}>Cancel</BS.Button>\r\n                    </BS.Form>\r\n                  </BS.Card.Body>\r\n                </BS.Card>\r\n              </BS.Container>\r\n            </Popup>\r\n          </BS.Card.Header>\r\n        </BS.Card>\r\n        \r\n        <BS.Accordion className=\"mb-3 mt-3 w-100\" defaultActiveKey=\"0\">\r\n            {memberList}\r\n        </BS.Accordion>\r\n        </>\r\n        }\r\n        </>\r\n        </Route>\r\n        <Route path={`${path}/:memberID`}>\r\n          { isLoading ? <Loading/> :\r\n          <MemberPages members={members}/>}\r\n        </Route>\r\n        </Switch>\r\n    )\r\n}","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\MemberCard.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Functions\\discord-parser.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Footer.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Profile.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\Public.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\ProfileList.js",["84"],"import React, { useEffect, useState, useCallback } from 'react';\r\nimport { Switch, Route, useParams, useRouteMatch } from 'react-router-dom';\r\nimport  * as BS from 'react-bootstrap'\r\nimport 'reactjs-popup/dist/index.css';\r\n\r\nimport ProfileCard from './ProfileCard.js'\r\nimport ProfilePages from './ProfilePages.js'\r\nimport Loading from \"./Loading.js\";\r\nimport API_URL from \"../Constants/constants.js\";\r\n\r\nexport default function Memberlist() {\r\n\r\n    const { path } = useRouteMatch();\r\n    const { sysID } = useParams();\r\n\r\n    const [isLoading, setIsLoading ] = useState(false);\r\n    const [isError, setIsError ] = useState(false);\r\n\r\n    const [currentPage, setCurrentPage] = useState(1);\r\n    const [membersPerPage, setMembersPerPage] = useState(25);\r\n\r\n    const [members, setMembers ] = useState([]);\r\n    const [memberData, setMemberData ] = useState([]);\r\n    const [filteredMembers, setFilteredMembers ] = useState([]);\r\n    const [sortedMembers, setSortedMembers ] = useState([]);\r\n\r\n    const [searchBy, setSearchBy] = useState('name')\r\n    const [sortBy, setSortBy] = useState('name')\r\n\r\n    const [value, setValue] = useState('');\r\n\r\n  const fetchMembers = useCallback( () => {\r\n    setIsLoading(true);\r\n    setIsError(false);\r\n    setMembersPerPage(25);\r\n\r\n     fetch(`${API_URL}s/${sysID}/members`,{\r\n    method: 'GET',\r\n    }).then ( res => res.json()\r\n    ).then (data => { \r\n    setMembers(data)\r\n      setIsLoading(false);\r\n  })\r\n    .catch (error => { \r\n        console.log(error);\r\n        setIsError(true);\r\n        setIsLoading(false);\r\n    })\r\n  }, [sysID])\r\n\r\n  useEffect(() => {\r\n    fetchMembers();\r\n  }, [fetchMembers])\r\n\r\n  useEffect(() => {\r\n    let Members = members.map(member => {\r\n      if (member.display_name) {\r\n        return {...member, displayName: member.display_name}\r\n      } return {...member, displayName: member.name}\r\n    }) \r\n    let Members1 = Members.map(member => {\r\n      if (member.description) {\r\n        return {...member, desc: member.description}\r\n      } return {...member, desc: \"(no description)\"}\r\n    })\r\n    setMemberData(Members1);\r\n  }, [members])\r\n\r\n    const indexOfLastMember = currentPage * membersPerPage;\r\n    const indexOfFirstMember = indexOfLastMember - membersPerPage;\r\n\r\n    useEffect(() => {\r\n      searchMembers();\r\n    }, [value, memberData, searchBy])\r\n\r\n    function searchMembers() {\r\n    const currentMembers =  memberData.filter(member => {\r\n      if (!value) return true;\r\n      \r\n      if (searchBy === 'name') {\r\n      if (member.name.toLowerCase().includes(value.toLowerCase())) {\r\n        return true;\r\n      }\r\n      return false;\r\n    } else if (searchBy === 'display name') {\r\n      if (member.displayName.toLowerCase().includes(value.toLowerCase())) {\r\n        return true;\r\n      }\r\n      return false\r\n    } else if (searchBy === 'description') {\r\n      if (member.desc.toLowerCase().includes(value.toLowerCase())) {\r\n        return true;\r\n      }\r\n      return false;\r\n    } else if (searchBy === 'ID') {\r\n      if (member.id.toLowerCase().includes(value.toLowerCase())) {\r\n        return true;\r\n      }\r\n      return false;\r\n    }\r\n      return false;\r\n    })\r\n    setFilteredMembers(currentMembers);\r\n    }\r\n\r\n    useEffect (() => { \r\n      if (sortBy === 'name') {\r\n      const sortMembers =  filteredMembers.sort((a, b) => a.name.localeCompare(b.name)).slice(indexOfFirstMember, indexOfLastMember);\r\n      setSortedMembers(sortMembers);\r\n      } else if (sortBy === 'display name') {\r\n        const sortMembers =  filteredMembers.sort((a, b) => a.displayName.localeCompare(b.displayName)).slice(indexOfFirstMember, indexOfLastMember);\r\n        setSortedMembers(sortMembers);\r\n      } else if (sortBy === 'ID') {\r\n        const sortMembers =  filteredMembers.sort((a, b) => a.id.localeCompare(b.id)).slice(indexOfFirstMember, indexOfLastMember);\r\n        setSortedMembers(sortMembers);\r\n      }\r\n    }, [sortBy, filteredMembers, indexOfFirstMember, indexOfLastMember])\r\n   \r\n\r\n    const active = currentPage;\r\n    const pageAmount = Math.ceil(filteredMembers.length / membersPerPage);\r\n      \r\n      const memberList = sortedMembers.map((member) => <BS.Card key={member.id}>\r\n        <ProfileCard\r\n        member={member} \r\n        />\r\n    </BS.Card>\r\n    );\r\n\r\n    return (\r\n      <Switch>\r\n        <Route exact path={path}>\r\n      <>\r\n      <BS.Row className=\"mb-3 justfiy-content-md-center\">\r\n      <BS.Col xs={12} lg={4}>\r\n      <BS.Form>\r\n        <BS.InputGroup className=\"mb-3\">\r\n        <BS.Form.Control disabled placeholder='Page length:'/>\r\n          <BS.Form.Control as=\"select\" defaultValue=\"25\" onChange={e => {\r\n            setMembersPerPage(e.target.value);\r\n            setCurrentPage(1);\r\n            }}>\r\n            <option>10</option>\r\n            <option>25</option>\r\n            <option>50</option>\r\n            <option>100</option>\r\n          </BS.Form.Control>\r\n          </BS.InputGroup>\r\n      </BS.Form>\r\n      </BS.Col>\r\n      <BS.Col xs={12} lg={4}>\r\n      <BS.Form>\r\n        <BS.InputGroup className=\"mb-3\">\r\n        <BS.Form.Control disabled placeholder='Search by:'/>\r\n          <BS.Form.Control as=\"select\" defaultValue={searchBy} onChange={e => {\r\n            setSearchBy(e.target.value)\r\n            }}>\r\n            <option>name</option>\r\n            <option>display name</option>\r\n            <option>description</option>\r\n            <option>ID</option>\r\n          </BS.Form.Control>\r\n          </BS.InputGroup>\r\n      </BS.Form>\r\n      </BS.Col>\r\n      <BS.Col xs={12} lg={4}>\r\n      <BS.Form>\r\n        <BS.InputGroup className=\"mb-3\">\r\n        <BS.Form.Control disabled placeholder='Sort by:'/>\r\n          <BS.Form.Control as=\"select\" defaultValue={sortBy} onChange={e => {\r\n            setSortBy(e.target.value)\r\n            }}>\r\n            <option>name</option>\r\n            <option>display name</option>\r\n            <option>ID</option>\r\n          </BS.Form.Control>\r\n          </BS.InputGroup>\r\n      </BS.Form>\r\n      </BS.Col>\r\n      </BS.Row>\r\n      <BS.Row noGutters=\"true\" className=\"justify-content-md-center\">\r\n      <BS.Col className=\"ml-lg-2 mb-3\" xs={12} lg={6}>\r\n      <BS.Form>\r\n          <BS.Form.Control value={value} onChange={e => {setValue(e.target.value); setCurrentPage(1);}} placeholder={`Search by ${searchBy}`}/>\r\n      </BS.Form>\r\n      </BS.Col>\r\n      <BS.Col className=\"ml-lg-2 mb-3\" xs={12} lg={1}>\r\n        <BS.Button type=\"primary\" className=\"m-0\" block onClick={() => fetchMembers()}>Refresh</BS.Button>\r\n      </BS.Col>\r\n      </BS.Row>\r\n      <BS.Row className=\"justify-content-md-center\">\r\n      <BS.Pagination className=\"ml-auto mr-auto\">\r\n        { currentPage === 1 ? <BS.Pagination.Prev disabled/> : <BS.Pagination.Prev onClick={() => setCurrentPage(currentPage - 1)} />}\r\n        { currentPage < 3 ? \"\" : <BS.Pagination.Item  onClick={() => setCurrentPage(1)} active={1 === active}>{1}</BS.Pagination.Item>}\r\n        { currentPage < 4 ? \"\" :<BS.Pagination.Ellipsis disabled />}\r\n        { currentPage > 1 ? <BS.Pagination.Item  onClick={() => setCurrentPage(currentPage - 1)}>{currentPage - 1}</BS.Pagination.Item> : \"\" }\r\n        <BS.Pagination.Item  onClick={() => setCurrentPage(currentPage)} active={currentPage === active}>{currentPage}</BS.Pagination.Item>\r\n        { currentPage < pageAmount ? <BS.Pagination.Item  onClick={() => setCurrentPage(currentPage + 1)}>{currentPage + 1}</BS.Pagination.Item> : \"\" }\r\n        { currentPage > pageAmount - 3 ? \"\" : <BS.Pagination.Ellipsis disabled />}\r\n        { currentPage > pageAmount - 2 ? \"\" : <BS.Pagination.Item  onClick={() => setCurrentPage(pageAmount)} active={pageAmount === active}>{pageAmount}</BS.Pagination.Item>}\r\n        { currentPage === pageAmount ? <BS.Pagination.Next disabled /> :<BS.Pagination.Next onClick={() => setCurrentPage(currentPage + 1)} />}\r\n        </BS.Pagination>\r\n      </BS.Row>\r\n      { isLoading ? <Loading /> : isError ? \r\n      <BS.Alert variant=\"danger\">Error fetching members.</BS.Alert> :\r\n      <>\r\n        <BS.Accordion className=\"mb-3 mt-3 w-100\" defaultActiveKey=\"0\">\r\n            {memberList}\r\n        </BS.Accordion>\r\n        </>\r\n        }\r\n        </>\r\n          </Route>\r\n            <Route path={`/pk-webs/profile/${sysID}/:memberID`}>\r\n              { isLoading ? <Loading/> :\r\n            <ProfilePages members={members}/>}\r\n          </Route>\r\n        </Switch>\r\n    )\r\n}","C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\ProfileCard.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\MemberPage.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\MemberPages.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\ProfilePages.js",[],"C:\\Users\\Fleur\\Desktop\\website projects etc\\pk-web\\src\\Components\\ProfilePage.js",[],{"ruleId":"85","replacedBy":"86"},{"ruleId":"87","replacedBy":"88"},{"ruleId":"89","severity":1,"message":"90","line":120,"column":8,"nodeType":"91","endLine":120,"endColumn":37,"suggestions":"92"},{"ruleId":"89","severity":1,"message":"90","line":74,"column":8,"nodeType":"91","endLine":74,"endColumn":37,"suggestions":"93"},"no-native-reassign",["94"],"no-negated-in-lhs",["95"],"react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'searchMembers'. Either include it or remove the dependency array.","ArrayExpression",["96"],["97"],"no-global-assign","no-unsafe-negation",{"desc":"98","fix":"99"},{"desc":"98","fix":"100"},"Update the dependencies array to be: [value, memberData, searchBy, searchMembers]",{"range":"101","text":"102"},{"range":"103","text":"102"},[3866,3895],"[value, memberData, searchBy, searchMembers]",[2299,2328]]