8f34c787-314c-42bd-a081-11a13a773cd8

Committed 01 Jul 2024 09:43AM UTC coverage: 92.874% (-0.6%) from 93.441%

Build # 8f34c787-314c-42bd-a081-11a13a773cd8

Build Type

Pull #16

circleci

Committed by

Yvan-David

Commit Message

feat(Add Product): implement frontend for adding product

 - seller should be able to add a product in a collection
 - only authenticated seller can access the collection and the page
 - a seller can create a collection

[Delivers #187364686]

Pull Request Pull Request #16: [#187364686] A seller should be able to create/add items

Run Details

159 of 184 branches covered (86.41%)

Branch coverage included in aggregate %.

202 of 231 new or added lines in 12 files covered. (87.45%)

1 existing line in 1 file now uncovered.

610 of 644 relevant lines covered (94.72%)

6.4 hits per line

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

82.98

/src/views/dashboard/seller/SelectCollection.tsx

import { useEffect, useState } from 'react';
import { selectAllCollections, getcollectionsStatus, getcollectionsError, fetchCollections } from '../../../redux/slices/collectionSlice';
import { useDispatch, useSelector } from 'react-redux';
import { AppDispatch } from '../../../redux/store';

type Option = {
  name: string;
  description: string;
  id?: string;
};

const SelectCollection = () => {
  const collections = useSelector(selectAllCollections);
  const collectionsStatus = useSelector(getcollectionsStatus);
  const collectionsError = useSelector(getcollectionsError);
  const dispatch = useDispatch<AppDispatch>();

  useEffect(() => {
    if (collectionsStatus === 'idle') {
      try {
        dispatch(fetchCollections());
      } catch (error) {
        console.log('Error fetching collections:', error);
      }
    }
  }, [collectionsStatus, dispatch]);

  const [isOpen, setIsOpen] = useState<boolean>(false);
  const [selectedOption, setSelectedOption] = useState<string>('Collections');

  const toggleDropdown = () => {
    setIsOpen(!isOpen);
  };

  const handleOptionSelect = (option: Option) => {
    setSelectedOption(option.name);
    const collectionId = localStorage.getItem("collectionId")
    if(collectionId){
      localStorage.removeItem("collectionId")
      localStorage.setItem("collectionId", option.id as string)
    }else{
      localStorage.setItem("collectionId", option.id as string)
    }
    setIsOpen(false);
  };

  const renderOptions = () => {
    if (!Array.isArray(collections)) {
      return null;
    }
    switch (collectionsStatus) {
      case 'loading':
        return <div className="block px-4 py-2 text-sm text-gray-700">Loading collections...</div>;
      case 'failed':
        return <div className="block px-4 py-2 text-sm text-gray-700">Error: {collectionsError}</div>;
      case 'succeeded':
        return (
          <div className="py-1" role="none">
            {collections.map((option) => (
              <a
                key={option?.id}
                href="#"
                className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 relative"
                role="menuitem"
                onClick={() => handleOptionSelect(option)}
              >
                {option.name}
              </a>
            ))}
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <div className="relative text-left grid grid-cols-4 flex">
      <div className='col-span-4 sm:col-span-2'>
        <button
          type="button"
          className="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
          id="options-menu"
          aria-haspopup="true"
          aria-expanded={isOpen}
          onClick={toggleDropdown}
        >
          {selectedOption}
          <svg
            className="-mr-1 ml-2 h-5 w-5"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
            aria-hidden="true"
          >
            <path
              fillRule="evenodd"
              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
              clipRule="evenodd"
            />
          </svg>
        </button>
      </div>

      {isOpen && (
        <div
          className="origin-top-right absolute z-50 right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
          role="menu"
          aria-orientation="vertical"
          aria-labelledby="options-menu"
        >
          {renderOptions()}
        </div>
      )}
    </div>
  );
};

export default SelectCollection;

1	import { useEffect, useState } from 'react';	3✔
2	import { selectAllCollections, getcollectionsStatus, getcollectionsError, fetchCollections } from '../../../redux/slices/collectionSlice';	3✔
3	import { useDispatch, useSelector } from 'react-redux';	3✔
4	import { AppDispatch } from '../../../redux/store';
5
6	type Option = {
7	name: string;
8	description: string;
9	id?: string;
10	};
11
12	const SelectCollection = () => {	3✔
13	const collections = useSelector(selectAllCollections);	31✔
14	const collectionsStatus = useSelector(getcollectionsStatus);	30✔
15	const collectionsError = useSelector(getcollectionsError);	30✔
16	const dispatch = useDispatch<AppDispatch>();	30✔
17
18	useEffect(() => {	30✔
19	if (collectionsStatus === 'idle') {	12✔
20	try {	3✔
21	dispatch(fetchCollections());	3✔
22	} catch (error) {
NEW 23	console.log('Error fetching collections:', error);	×
24	}
25	}
26	}, [collectionsStatus, dispatch]);
27
28	const [isOpen, setIsOpen] = useState<boolean>(false);	30✔
29	const [selectedOption, setSelectedOption] = useState<string>('Collections');	30✔
30
31	const toggleDropdown = () => {	30✔
32	setIsOpen(!isOpen);	4✔
33	};
34
35	const handleOptionSelect = (option: Option) => {	30✔
36	setSelectedOption(option.name);	1✔
37	const collectionId = localStorage.getItem("collectionId")	1✔
38	if(collectionId){	1!
NEW 39	localStorage.removeItem("collectionId")	×
NEW 40	localStorage.setItem("collectionId", option.id as string)	×
41	}else{
42	localStorage.setItem("collectionId", option.id as string)	1✔
43	}
44	setIsOpen(false);	1✔
45	};
46
47	const renderOptions = () => {	30✔
48	if (!Array.isArray(collections)) {	4!
NEW 49	return null;	×
50	}
51	switch (collectionsStatus) {	4!
52	case 'loading':
53	return <div className="block px-4 py-2 text-sm text-gray-700">Loading collections...</div>;	1✔
54	case 'failed':
55	return <div className="block px-4 py-2 text-sm text-gray-700">Error: {collectionsError}</div>;	1✔
56	case 'succeeded':
57	return (	2✔
58	<div className="py-1" role="none">
59	{collections.map((option) => (
60	<a	3✔
61	key={option?.id}
62	href="#"
63	className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 relative"
64	role="menuitem"
65	onClick={() => handleOptionSelect(option)}	1✔
66	>
67	{option.name}
68	</a>
69	))}
70	</div>
71	);
72	default:
NEW 73	return null;	×
74	}
75	};
76
77	return (	30✔
78	<div className="relative text-left grid grid-cols-4 flex">
79	<div className='col-span-4 sm:col-span-2'>
80	<button
81	type="button"
82	className="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
83	id="options-menu"
84	aria-haspopup="true"
85	aria-expanded={isOpen}
86	onClick={toggleDropdown}
87	>
88	{selectedOption}
89	<svg
90	className="-mr-1 ml-2 h-5 w-5"
91	xmlns="http://www.w3.org/2000/svg"
92	viewBox="0 0 20 20"
93	fill="currentColor"
94	aria-hidden="true"
95	>
96	<path
97	fillRule="evenodd"
98	d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
99	clipRule="evenodd"
100	/>
101	</svg>
102	</button>
103	</div>
104
105	{isOpen && (	34✔
106	<div
107	className="origin-top-right absolute z-50 right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
108	role="menu"
109	aria-orientation="vertical"
110	aria-labelledby="options-menu"
111	>
112	{renderOptions()}
113	</div>
114	)}
115	</div>
116	);
117	};
118
119	export default SelectCollection;	3✔

atlp-rwanda / e-commerce-bitcrafters-fn / 8f34c787-314c-42bd-a081-11a13a773cd8

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