First Pass at E-Commerce Front End Service by apradoada · Pull Request #1 · AdaGold/Ada-E-Commerce-FE

apradoada · 2026-04-20T22:53:32Z

This is a basic front end for the E-Commerce Site. Minimal testing and styling currently that will be built out later.

Current abilities:

Login - User can login or create a new account, which will be sent to the User Microservice
Products - If the user is an admin, they can see all the products, delete them or update stock on the Home page. If the user is not an admin, they can see all products and add them to a cart.
Orders - As a cart is created, users can submit a cart to the Order microservice. Admins can see all orders. Non-Admins can see their orders.
User - Users can update their own information.

mikellewade

Look through the application and great as a first pass! Left some comments mainly about making it more DRY so students have less to read through, conceptual questions and then some niceties. Let me know if you have any questions.

mikellewade · 2026-04-23T15:27:16Z

+            <div>
+                <label>ID</label>
+                <input type="text" value={user.id} disabled />
+            </div>
+            <div>
+                <label>First Name</label>
+                <input
+                    type="text"
+                    name="firstName"
+                    value={formData.firstName}
+                    onChange={handleChange}
+                />
+            </div>


You could make a helper function that constructs the controlled inputs. If you look in Flasky Frontend, you will see the pattern. I believe it's in one of the Forms sessions. That way the code will be more DRY. Would most likely need to alter the function, of course.

mikellewade · 2026-04-23T15:32:02Z

+        }));
+    };
+
+    const handleSubmit = (e: FormEvent) => {


In VScode it says that FormEvent is deprecated. It states that the following:

" FormEvent doesn't actually exist. You probably meant to use ChangeEvent, InputEvent, SubmitEvent, or just SyntheticEvent instead depending on the event type."

Based on the function, I am assuming that you will need a SubmitEvent instead.

I missed this one when I was refactoring! Changed it to a SubmitEvent!

mikellewade · 2026-04-23T15:43:23Z

+
+    const [status, setStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {


Instead of the React.ChangeEvent<HTMLInputElement>, I think you could remove the React prefix and just import it at the top of the file like the FormEvent.

mikellewade · 2026-04-23T15:57:13Z

+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value, type, checked } = e.target;
+        setFormData(prev => ({
+            ...prev,
+            [name]: type === 'checkbox' ? checked : value,
+        }));
+    };
+
+    const handleSubmit = (e: React.SubmitEvent<HTMLFormElement>) => {


Like in the UserForm.tsx, just a suggestion to import the different events that the top of the file to remove the React prefix.

mikellewade · 2026-04-23T16:25:03Z

+            <form onSubmit={handleSubmit}>
+                <div>
+                    <label>First Name</label>
+                    <input
+                        type="text"
+                        name="firstName"
+                        value={formData.firstName}
+                        onChange={handleChange}
+                    />
+                </div>
+                <div>
+                    <label>Last Name</label>
+                    <input
+                        type="text"
+                        name="lastName"
+                        value={formData.lastName}
+                        onChange={handleChange}
+                    />
+                </div>


As mentioned in UserForm.tsx, you could DRY this up by making the helper function that constructs controlled inputs.

mikellewade · 2026-04-27T05:24:45Z

+
+    const orderCards = orders.map((order: Order) => {
+        return (
+            <li key={order.id}>


Currently, you have an li item tag here and also inside the OrderCard.tsx component. React is throwing a warning about having li tags nested within li tags. I think it is safe to remove the one inside the OrderCard.tsx file.

Changed it to a dummy parent tag!

mikellewade · 2026-04-27T05:34:16Z

+                        <li><button onClick={()=>deleteProduct(id)}>Delete Item</button></li>
+                    </>
+                ) : (
+                    <li><button onClick={() => addItem({ productId: id, name, price, quantity: numItem })}>Add to Cart</button></li>


Could we maybe add some user feedback here for when the item is added? At first I didn't think that it worked .

Added some very simple feedback!

mikellewade · 2026-04-27T05:37:21Z

In this file, there are a few times you reference an individual item as i, could we choose a variable name that is more descriptive of the data that it is referencing?

mikellewade · 2026-04-27T05:42:26Z

+            userId: user?.id ?? '',
+            userEmail: user?.email ?? '',


Conceptually speaking, I would assume that any consumer that needs this information would call the useAuth hook to retrieve this information. Would we want to remove this from the Cart context?

…and updating product with image

Co-authored-by: Mikelle <119449245+mikellewade@users.noreply.github.com>

apradoada · 2026-04-29T02:56:20Z

Thank you so much for looking through this and for your suggestions! I think I got them all with a couple that I'll save for another update. The big ones I got were:

Controlled Inputs elements in CreateUserForm and ProductForm
Deleting the UserForm and allow the CreateUserForm to run different API calls depending on if a user is logged in.
Set up image functionality with S3 and Lambda
Small syntax changes

mikellewade

So sorry, I did not see that you submitted all the changes. The reply in the thread was late at night so I didn't see the notification. Apologies! But looks great, just commented about a couple of things. Let me know what you think or if you have any questions.

mikellewade · 2026-05-07T14:33:13Z

Oh nice! I didn't even think about this approach.

mikellewade · 2026-05-07T14:33:37Z

+        e.preventDefault();
+        setStatus('saving');
+
+        if(user === null){


Suggested change

if(user === null){

if (user === null){

mikellewade · 2026-05-07T14:50:34Z

+            axios.post(`${userUrl}/users/`, {
+                first_name: formData.firstName,
+                last_name: formData.lastName,
+                email: formData.email,
+                is_admin: formData.isAdmin,
+            })
+            .then(() => setStatus('saved'))
+            .catch(() => setStatus('error'));
+        }
+        else {
+            axios.put(`${userUrl}/users/${user?.id}`, {
+                first_name: formData.firstName,
+                last_name: formData.lastName,
+                email: formData.email,
+                is_admin: formData.isAdmin,
+            })
+            .then(() => setStatus('saved'))
+            .catch(() => setStatus('error'));
+        }


Given that the only difference between these calls are the HTTP methods (put vs post) and the URLs. To make it more DRY you could condense this to a function and then have a conditional. Something like this perhaps:

const saveUser = () => { const method = user ? 'put' : 'post'; const url = user ? `${userUrl}/users/${user.id}` : `${userUrl}/users/`; axios[method](url, { first_name: formData.firstName, last_name: formData.lastName, email: formData.email, is_admin: formData.isAdmin, }) .then(() => setStatus('saved')) .catch(() => setStatus('error')); };

mikellewade · 2026-05-07T14:51:29Z

+
+    const orderCards = orders.map((order: Order) => {
+        return (
+            <li key={order.id}>


mikellewade · 2026-05-07T14:55:38Z

+        const inputName = event.target.name;
+
+        setFormState(prev => ({...prev, 
+            [inputName]: inputName ==='price'|| inputName === 'stock'? Number(inputValue) : inputValue}));


Suggested change

[inputName]: inputName ==='price'|| inputName === 'stock'? Number(inputValue) : inputValue}));

[inputName]: inputName ==='price'|| inputName === 'stock' ? Number(inputValue) : inputValue}));

mikellewade · 2026-05-07T15:11:35Z

+            onChange={handleChange}
+            />
+        );
+    };


You could refactor the you make controlled components into a single one and pull it out into a utility file so the code would be more DRY. But I don't think that is the highest priority.

mikellewade · 2026-05-07T15:12:24Z

+
+    return (
+        <div>
+            <h1> Add User </h1>


A conditional based on if the user is null or not for Update User or Add User?

mikellewade · 2026-05-07T15:14:34Z

Maybe just some styling on this component so it is easier to digest the information being displayed?

mikellewade · 2026-05-07T15:15:43Z

+const addStock = (product: Product, newStock: number) => {
+    return { ...product, stock: newStock};
+};
+
+const getAllProductsAPI = () => {
+    return axios.get(`${productUrl}/products/`)
+        .then(response => response.data)
+};
+const updateProductAPI = (id: string, updateData: Partial<Product>) => {
+    return axios.patch(`${productUrl}/products/${id}`, updateData)
+}
+const deleteProductAPI = (id : string) => {
+    return axios.delete(`${productUrl}/products/${id}`)
+};
+const convertFromAPI = (apiProduct: APIProduct): Product => {
+    return {
+        ...apiProduct,
+        id: apiProduct.productId,
+    };
+
+};
+const addProductAPI = (newProduct: Omit<Product, 'id'>) => {
+    return axios.post(`${productUrl}/products/`, newProduct)
+        .then(response => response.data)
+};


Fine by me.

mikellewade · 2026-05-07T15:17:02Z

+                    id: String(fetchedUser.id),
+                    firstName: fetchedUser.first_name,
+                    lastName: fetchedUser.last_name,
+                    email: fetchedUser.email,
+                    isAdmin: fetchedUser.is_admin // Map snake_case to camelCase


Yeah, I don't think its terribly important.

apradoada added 18 commits April 9, 2026 10:49

Initial directory tree created

3c31f0b

Update Component Names to avoid confusion with respective types.

a6f3760

Set up Basic Auth Hook and Added Page Routing

6c348a3

Add types file with basic types

17e9e39

Add AuthContext and Login Page

b759fdd

Added Product functionality - Get, Post, Delete, Update

3c64442

Add NavBar

03cc2a4

Added User functionality - Add, Update, retrieve

9ff0d84

Add Cart and Cart Context - Submit Order

79d958d

Create useCart Hook

11cb144

Add Product Form

fcc371b

Add order retrieval functionality

79bd199

Update login functionality

35a0238

Update configuration

565e426

Update Types

26a96a6

Add basic styling

bf208e3

Added testing for Product Functionality

232faa3

Update Product Form and README

3875c72

mikellewade requested changes Apr 27, 2026

View reviewed changes

apradoada and others added 6 commits April 28, 2026 16:31

Responding to most feedback from code review except controlled input …

ef4b4ec

…and updating product with image

Update src/components/OrderList.tsx

2b1e52e

Co-authored-by: Mikelle <119449245+mikellewade@users.noreply.github.com>

Update auth and cart contexts for proper nesting

76fff70

Update Product service to submit and retrieve S3 images

a5ceffb

Combine User Forms and use Controlled Input Pattern

ab67d52

Added functionality to clear form after submit

d2dce69

mikellewade requested changes May 7, 2026

View reviewed changes

apradoada added 3 commits May 19, 2026 12:43

update package-lock

9aecef7

Fix deployment bugs

0cf2f7e

Fixed build issues

9c1f7fc

Update navbar css import

38bff16


		const [status, setStatus] = useState<'idle' \| 'saving' \| 'saved' \| 'error'>('idle');

		const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {

	[inputName]: inputName ==='price'\|\| inputName === 'stock'? Number(inputValue) : inputValue}));
	[inputName]: inputName ==='price'\|\| inputName === 'stock' ? Number(inputValue) : inputValue}));

Conversation

apradoada commented Apr 20, 2026

Uh oh!

mikellewade left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

apradoada commented Apr 29, 2026

Uh oh!

mikellewade left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants