6a81dcf9-2e6d-40d4-b78b-4b7d0bc9415e

Build # 6a81dcf9-2e6d-40d4-b78b-4b7d0bc9415e

Build Type

push

circleci

Committed by GitHub

Commit Message

feat: implement Display Users (#22)

Run Details

245 of 445 branches covered (55.06%)

Branch coverage included in aggregate %.

163 of 163 new or added lines in 9 files covered. (100.0%)

1043 of 1308 relevant lines covered (79.74%)

9.94 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

61.22

/src/components/DropDown.js

import React, { useEffect, useRef, useState } from "react";
import { useSelector } from "react-redux";
import { changeStatus } from "../features/auth/changeUserStatusSlice";
import { updateRole } from "../features/auth/rolesSlice";
import Transition from "./Transition";

const DropDown = ({ toggle, children }) => {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const { data: rolesData } = useSelector((state) => state.roles);
  const { data: statusChangeData } = useSelector((state) => state.changeStatus);
  const trigger = useRef(null);
  const dropdown = useRef(null);

  useEffect(() => {
    const clickHandler = ({ target }) => {
      if (!dropdown.current || !trigger.current) {
        return;
      }
      if (
        !dropdownOpen ||
        dropdown.current.contains(target) ||
        trigger.current.contains(target)
      ) {
        return;
      }

      setDropdownOpen(false);
    };
    document.addEventListener("click", clickHandler);
    return () => document.removeEventListener("click", clickHandler);
  }, [dropdownOpen]);

  useEffect(() => {
    if (rolesData) {
      setDropdownOpen(false);
    }
  }, [rolesData]);

  useEffect(() => {
    if (statusChangeData) {
      setDropdownOpen(false);
    }
  }, [statusChangeData]);

  useEffect(() => {
    const keyHandler = ({ keyCode }) => {
      if (!dropdownOpen || keyCode !== 27) return;
      setDropdownOpen(false);
    };
    document.addEventListener("keydown", keyHandler);
    return () => document.removeEventListener("keydown", keyHandler);
  }, [dropdownOpen]);

  return (
    <div className="relative inline-flex">
      {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}
      <div
        ref={trigger}
        role="button"
        aria-haspopup="true"
        onClick={() => setDropdownOpen(!dropdownOpen)}
        onKeyDown={() => setDropdownOpen(!dropdownOpen)}
        aria-expanded={dropdownOpen}
      >
        {toggle}
      </div>

      <Transition
        className="origin-top-right z-50 w-full absolute top-full right-0 min-w-[200px] translate-x-1/2 bg-brand-blue-light rounded shadow-lg overflow-hidden mt-1"
        show={dropdownOpen}
        enter="transition ease-out duration-200 transform"
        enterStart="opacity-0 -translate-y-2"
        enterEnd="opacity-100 translate-y-0"
        leave="transition ease-out duration-200"
        leaveStart="opacity-100"
        leaveEnd="opacity-0"
      >
        <div
          className="w-full h-full"
          ref={dropdown}
          onFocus={() => setDropdownOpen(true)}
          onBlur={() => setDropdownOpen(false)}
        >
          {/* {React.Children.map(children, (child) =>
            React.cloneElement(child, {
              onClick: () => setDropdownOpen(false),
            })
          )} */}
          {children}
        </div>
      </Transition>
    </div>
  );
};

export default DropDown;

1	import React, { useEffect, useRef, useState } from "react";
2	import { useSelector } from "react-redux";
3	import { changeStatus } from "../features/auth/changeUserStatusSlice";
4	import { updateRole } from "../features/auth/rolesSlice";
5	import Transition from "./Transition";
6
7	const DropDown = ({ toggle, children }) => {	39✔
8	const [dropdownOpen, setDropdownOpen] = useState(false);	4✔
9	const { data: rolesData } = useSelector((state) => state.roles);	4✔
10	const { data: statusChangeData } = useSelector((state) => state.changeStatus);	4✔
11	const trigger = useRef(null);	4✔
12	const dropdown = useRef(null);	4✔
13
14	useEffect(() => {	4✔
15	const clickHandler = ({ target }) => {	4✔
16	if (!dropdown.current \|\| !trigger.current) {	1!
17	return;	×
18	}
19	if (	1!
20	!dropdownOpen \|\|	1!
21	dropdown.current.contains(target) \|\|
22	trigger.current.contains(target)
23	) {
24	return;	1✔
25	}
26
27	setDropdownOpen(false);	×
28	};
29	document.addEventListener("click", clickHandler);	4✔
30	return () => document.removeEventListener("click", clickHandler);	4✔
31	}, [dropdownOpen]);
32
33	useEffect(() => {	4✔
34	if (rolesData) {	3!
35	setDropdownOpen(false);	×
36	}
37	}, [rolesData]);
38
39	useEffect(() => {	4✔
40	if (statusChangeData) {	3!
41	setDropdownOpen(false);	×
42	}
43	}, [statusChangeData]);
44
45	useEffect(() => {	4✔
46	const keyHandler = ({ keyCode }) => {	4✔
47	if (!dropdownOpen \|\| keyCode !== 27) return;	×
48	setDropdownOpen(false);	×
49	};
50	document.addEventListener("keydown", keyHandler);	4✔
51	return () => document.removeEventListener("keydown", keyHandler);	4✔
52	}, [dropdownOpen]);
53
54	return (	4✔
55	<div className="relative inline-flex">
56	{/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}
57	<div
58	ref={trigger}
59	role="button"
60	aria-haspopup="true"
61	onClick={() => setDropdownOpen(!dropdownOpen)}	1✔
62	onKeyDown={() => setDropdownOpen(!dropdownOpen)}	×
63	aria-expanded={dropdownOpen}
64	>
65	{toggle}
66	</div>
67
68	<Transition
69	className="origin-top-right z-50 w-full absolute top-full right-0 min-w-[200px] translate-x-1/2 bg-brand-blue-light rounded shadow-lg overflow-hidden mt-1"
70	show={dropdownOpen}
71	enter="transition ease-out duration-200 transform"
72	enterStart="opacity-0 -translate-y-2"
73	enterEnd="opacity-100 translate-y-0"
74	leave="transition ease-out duration-200"
75	leaveStart="opacity-100"
76	leaveEnd="opacity-0"
77	>
78	<div
79	className="w-full h-full"
80	ref={dropdown}
81	onFocus={() => setDropdownOpen(true)}	×
82	onBlur={() => setDropdownOpen(false)}	×
83	>
84	{/* {React.Children.map(children, (child) =>
85	React.cloneElement(child, {
86	onClick: () => setDropdownOpen(false),
87	})
88	)} */}
89	{children}
90	</div>
91	</Transition>
92	</div>
93	);
94	};
95
96	export default DropDown;

atlp-rwanda / vikings-ec-fe / 6a81dcf9-2e6d-40d4-b78b-4b7d0bc9415e

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous