fe04cee5-bfc9-4f5e-a2aa-d14e7e628ddc

Committed 03 Jul 2024 12:20AM UTC coverage: 91.96% (-0.5%) from 92.435%

Build # fe04cee5-bfc9-4f5e-a2aa-d14e7e628ddc

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

297 of 360 branches covered (82.5%)

Branch coverage included in aggregate %.

128 of 142 new or added lines in 8 files covered. (90.14%)

801 of 834 relevant lines covered (96.04%)

7.77 hits per line

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

92.31

/src/views/seller/CreateColletion.tsx

import { useState } from 'react';
import {  ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import useAxiosClient from '../../hooks/AxiosInstance';

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSave: (optionName: string) => void;
}
interface Collection {
  name: string;
  description: string;
  id?: string
}

const CreateCollection: React.FC<ModalProps> = ({ isOpen, onClose, onSave }) => {
  const [optionName, setOptionName] = useState('');
  const [optionDescription, setOptionDescription] = useState('');
  const axiosClient = useAxiosClient();
  if (!isOpen) return null;
  const addNewCollection = async (collection: Collection)=>{
    try{
        await axiosClient.post("/collections", collection);
    }catch(error){
      toast.error("Error creating Collection Try again");
    }

  }
  const handleSave = () => {
    if (optionName.trim()) {
      onSave(optionName);
      onSave(optionDescription);
      setOptionName('');
      setOptionDescription('');
      addNewCollection({
        name: optionName,
        description: optionDescription
      })
    }
  };

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
      <div className="bg-white rounded-lg shadow-lg p-6 w-[50%]">
        <h2 className="text-xl mb-4">Add New Collection</h2>
        <label className="text-xl mb-4 block">Name</label>
        <input
          type="text"
          className="border border-gray-300 rounded-md px-2 py-1 w-full mb-4"
          value={optionName}
          onChange={(e) => setOptionName(e.target.value)}
          placeholder="Collection name"
        />
        <label className="text-xl mb-4 block">Description</label>
        <textarea
          className="border border-gray-300 rounded-md px-2 py-1 w-full mb-4"
          value={optionDescription}
          onChange={(e) => setOptionDescription(e.target.value)}
          placeholder="Describe your collection"
        />
        <div className="flex justify-end">
          <button
            className="px-4 py-2 bg-gray-300 text-gray-700 rounded-md mr-2"
            onClick={onClose}
          >
            <span className='w-50rem'>Cancel</span>
          </button>
          <button
            className="px-4 py-2 bg-black text-white rounded-md"
            onClick={handleSave}
          >
            Save
          </button>
        </div>
      </div>
      <ToastContainer />
    </div>
  );
};

export default CreateCollection;

1	import { useState } from 'react';	2✔
2	import { ToastContainer, toast } from "react-toastify";	2✔
3	import "react-toastify/dist/ReactToastify.css";	2✔
4	import useAxiosClient from '../../hooks/AxiosInstance';	2✔
5
6	interface ModalProps {
7	isOpen: boolean;
8	onClose: () => void;
9	onSave: (optionName: string) => void;
10	}
11	interface Collection {
12	name: string;
13	description: string;
14	id?: string
15	}
16
17	const CreateCollection: React.FC<ModalProps> = ({ isOpen, onClose, onSave }) => {	2✔
18	const [optionName, setOptionName] = useState('');	7✔
19	const [optionDescription, setOptionDescription] = useState('');	7✔
20	const axiosClient = useAxiosClient();	7✔
21	if (!isOpen) return null;	7!
22	const addNewCollection = async (collection: Collection)=>{	7✔
23	try{	1✔
24	await axiosClient.post("/collections", collection);	1✔
25	}catch(error){
NEW 26	toast.error("Error creating Collection Try again");	×
27	}
28
29	}
30	const handleSave = () => {	7✔
31	if (optionName.trim()) {	1✔
32	onSave(optionName);	1✔
33	onSave(optionDescription);	1✔
34	setOptionName('');	1✔
35	setOptionDescription('');	1✔
36	addNewCollection({	1✔
37	name: optionName,
38	description: optionDescription
39	})
40	}
41	};
42
43	return (	7✔
44	<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
45	<div className="bg-white rounded-lg shadow-lg p-6 w-[50%]">
46	<h2 className="text-xl mb-4">Add New Collection</h2>
47	<label className="text-xl mb-4 block">Name</label>
48	<input
49	type="text"
50	className="border border-gray-300 rounded-md px-2 py-1 w-full mb-4"
51	value={optionName}
52	onChange={(e) => setOptionName(e.target.value)}	1✔
53	placeholder="Collection name"
54	/>
55	<label className="text-xl mb-4 block">Description</label>
56	<textarea
57	className="border border-gray-300 rounded-md px-2 py-1 w-full mb-4"
58	value={optionDescription}
59	onChange={(e) => setOptionDescription(e.target.value)}	1✔
60	placeholder="Describe your collection"
61	/>
62	<div className="flex justify-end">
63	<button
64	className="px-4 py-2 bg-gray-300 text-gray-700 rounded-md mr-2"
65	onClick={onClose}
66	>
67	<span className='w-50rem'>Cancel</span>
68	</button>
69	<button
70	className="px-4 py-2 bg-black text-white rounded-md"
71	onClick={handleSave}
72	>
73	Save
74	</button>
75	</div>
76	</div>
77	<ToastContainer />
78	</div>
79	);
80	};
81
82	export default CreateCollection;	2✔

atlp-rwanda / e-commerce-bitcrafters-fn / fe04cee5-bfc9-4f5e-a2aa-d14e7e628ddc

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