Phone catalog app #216

ValeraViachalo · 2023-09-06T07:31:33Z

https://valeraviachalo.github.io/react_phone-catalog/

TarasHoliuk · 2023-09-06T17:09:51Z

There is an empty screen:

If you have problems with deploying feel free to ask in the chat

TarasHoliuk

Please, re-request review when the task will be done. Do not close your PR. If you have any questions it's better to ask them in the chat 🙂

TarasHoliuk · 2023-09-14T15:29:58Z

Let's fix a few minor UI issues

Placeholder is not aligned here:

There should be cursor pointer:

Fix the footer layout, and open external links (GH, Instagram in new tabs, RIGHTS link shouldn't lead to 404 page):

Align slider:

TarasHoliuk

For sure, very good job 👍

Let's add a few minor improvements

BTW: do not forget re-deploy app after any changes (I still can't see the favicon)

TarasHoliuk · 2023-09-14T15:18:48Z

src/helpers/productFilter.ts

+import { Product } from '../types/Product';
+
+export const productFilter = (products: Product[], query: string) => {
+  const preparedQuery = query.toLowerCase().trim();


not sure we have to trim here - it's a search query, not input that will be part of some entity you create, etc. For example query Hi will still match the word Himars which might a bit unexpectedly

TarasHoliuk · 2023-09-14T15:19:18Z

src/helpers/productFilter.ts

+export const productFilter = (products: Product[], query: string) => {
+  const preparedQuery = query.toLowerCase().trim();
+
+  const productsIncludeQuery = products.filter(product => {


Suggested change

const productsIncludeQuery = products.filter(product => {

return products.filter(product => {

in such cases you may immediately return - FYI

TarasHoliuk · 2023-09-14T15:23:01Z

src/contexts/CartContextProvider.tsx

+    ]);
+  };
+
+  const quantityCart = (productId: string, action: Action) => {


let's rename it - sounds like a variable that stores amount (quantity) of products in the cart

TarasHoliuk · 2023-09-14T15:25:21Z

src/pages/PhonePage/PhonePage.tsx

+
+import './PhonePage.scss';
+
+export const PhonePage = () => {


PhonesPage - it renders the list of Phones not one item

The same below - ProductsPage

IvanFesenko

Check this case, + add some trastion for hover effect
https://github.com/mate-academy/react_phone-catalog/assets/61904995/9596c369-0541-4e4b-b3eb-8c68e847b667

Bottom border invisible on hover
https://github.com/mate-academy/react_phone-catalog/assets/61904995/88f523cd-bfcd-4264-a61f-68b41f487e9c

add cursor: pointer to all elements user can click

fix indents in footer

ValeraViachalo · 2023-09-17T10:34:29Z

i dont know how but in deploy transform doesn`t smooth

20230917133319.mp4

VitaliyBondarenko1982

Also set cursor: pointer for all interactive elements.
For example
fix footer from prev comments.
for portfolio project very important to make responsive all pages.

VitaliyBondarenko1982 · 2023-09-17T13:45:37Z

src/styles/utils/_mixins.scss

@@ -0,0 +1,43 @@
+@mixin hover($property, $toValue) {
+  transition: #{$property}, $effect-duration;


Suggested change

transition: #{$property}, $effect-duration;

transition: #{$property}, $effect-duration ease;

something went wrong with transition.
try to set ease function.

devtools in demo-link

and after change transition property

also can be problem with css imports. try to import without ./ in glonal-imports.

ValeraViachalo · 2023-09-17T18:39:56Z

I`ll do a responsive all pages after another problems have been solved

etojeDenys

still can reproduce it, try to re-deploy your work

ValeraViachalo · 2023-09-20T14:20:31Z

Dont know how to solve that proplem

ValeraViachalo · 2023-09-20T14:22:30Z

also cant create normal that swipers

Im trying to do how I found in docs but its not working(

maxim2310

it must help but with swiper need to read documentation and stackoverflow

ValeraViachalo · 2023-09-21T09:21:07Z

There is only one problem with jumping, and I have no idea how to fix it

VitaliyBondarenko1982

Almost done.
Found a few moments for improvement

check transition in all elements. for example
check styles for dropdown option
center content horizontally for tablet/mobile view. check all pages and different widths
home page approximately 708px width. no visible right border
phone details page. make spaces between images as in design.

I haven't noticed some jumping on details page - but if you have questions about it, please ask in fe_chat

ValeraViachalo · 2023-09-21T12:16:43Z

home page approximately 708px width. no visible right border

its swiper issue. Dont know how to solve that

sTorba24

Swiper is cropped for some reason :(

fix it please

VitaliyBondarenko1982

Looks good to me

maxim2310

need to add cursor pointer and padding for better clickable
make it more readability, make font not bold and a bit smaller and check that it placed by center

rest looks good

ValeraViachalo · 2023-10-10T08:41:58Z

20231010114016.mp4

problem with sort per page

doesnt show anything

c0464ad

ValeraViachalo closed this Sep 6, 2023

ValeraViachalo reopened this Sep 6, 2023

ValeraViachalo closed this Sep 6, 2023

ValeraViachalo reopened this Sep 6, 2023

swiper issue

4fb11f3

TarasHoliuk suggested changes Sep 6, 2023

View reviewed changes

ValeraViachalo added 2 commits September 11, 2023 20:12

Home page and started phones page

bf1a221

.

a2eaf35

ValeraViachalo changed the title ~~doesnt show anything~~ Phone catalog app Sep 12, 2023

catalog app

0d0e9c7

ValeraViachalo requested a review from TarasHoliuk September 14, 2023 13:51

fav icon added

85ce65b

TarasHoliuk suggested changes Sep 14, 2023

View reviewed changes

some improvements

8fb1b54

ValeraViachalo requested a review from TarasHoliuk September 15, 2023 10:09

.

ab7c942

IvanFesenko suggested changes Sep 15, 2023

View reviewed changes

some UI improvments

048069c

ValeraViachalo requested a review from IvanFesenko September 17, 2023 10:24

.

6a9f7b5

VitaliyBondarenko1982 suggested changes Sep 17, 2023

View reviewed changes

improved hover problem

f43a9e7

ValeraViachalo requested a review from VitaliyBondarenko1982 September 17, 2023 18:40

etojeDenys suggested changes Sep 18, 2023

View reviewed changes

solved footer problem

07da831

ValeraViachalo added 2 commits September 19, 2023 20:34

improved product page and pagination

e9d4984

created response

724bb6f

ValeraViachalo requested a review from Anastasiia-Svintsova September 20, 2023 14:22

maxim2310 suggested changes Sep 20, 2023

View reviewed changes

improved response and fixed swiper

0d12f5b

ValeraViachalo requested a review from maxim2310 September 21, 2023 09:19

VitaliyBondarenko1982 suggested changes Sep 21, 2023

View reviewed changes

litle impovments

9c41092

swiper issue solve (try 1)

b629fc5

ValeraViachalo requested a review from VitaliyBondarenko1982 September 21, 2023 12:48

ValeraViachalo added 2 commits September 21, 2023 15:52

.

3dfdfce

some style imporments

a41f226

sTorba24 suggested changes Sep 21, 2023

View reviewed changes

carousel improved

b27edb8

ValeraViachalo requested a review from sTorba24 September 22, 2023 10:04

VitaliyBondarenko1982 approved these changes Sep 22, 2023

View reviewed changes

maxim2310 reviewed Oct 9, 2023

View reviewed changes

ValeraViachalo added 2 commits October 9, 2023 16:25

some improvements

80f9fc5

.

88deb57

ValeraViachalo requested a review from maxim2310 October 9, 2023 14:56

added function for pagination to up

ab7f151

ValeraViachalo added 4 commits October 10, 2023 12:45

fixed all filter

555e55e

transition on galery

6e6d1f3

added some animations

ecf1595

.

f2af603

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Phone catalog app #216

Phone catalog app #216

ValeraViachalo commented Sep 6, 2023

TarasHoliuk commented Sep 6, 2023

TarasHoliuk left a comment

TarasHoliuk commented Sep 14, 2023

TarasHoliuk left a comment

TarasHoliuk Sep 14, 2023

TarasHoliuk Sep 14, 2023

TarasHoliuk Sep 14, 2023

TarasHoliuk Sep 14, 2023

IvanFesenko left a comment •

edited

Loading

ValeraViachalo commented Sep 17, 2023

VitaliyBondarenko1982 left a comment

VitaliyBondarenko1982 Sep 17, 2023

ValeraViachalo commented Sep 17, 2023

etojeDenys left a comment

ValeraViachalo commented Sep 20, 2023

ValeraViachalo commented Sep 20, 2023

maxim2310 left a comment

ValeraViachalo commented Sep 21, 2023 •

edited

Loading

VitaliyBondarenko1982 left a comment

ValeraViachalo commented Sep 21, 2023

sTorba24 left a comment

VitaliyBondarenko1982 left a comment

maxim2310 left a comment

ValeraViachalo commented Oct 10, 2023

	const productsIncludeQuery = products.filter(product => {
	return products.filter(product => {

		@@ -0,0 +1,43 @@
		@mixin hover($property, $toValue) {
		transition: #{$property}, $effect-duration;

Phone catalog app #216

Are you sure you want to change the base?

Phone catalog app #216

Conversation

ValeraViachalo commented Sep 6, 2023

TarasHoliuk commented Sep 6, 2023

TarasHoliuk left a comment

Choose a reason for hiding this comment

TarasHoliuk commented Sep 14, 2023

TarasHoliuk left a comment

Choose a reason for hiding this comment

TarasHoliuk Sep 14, 2023

Choose a reason for hiding this comment

TarasHoliuk Sep 14, 2023

Choose a reason for hiding this comment

TarasHoliuk Sep 14, 2023

Choose a reason for hiding this comment

TarasHoliuk Sep 14, 2023

Choose a reason for hiding this comment

IvanFesenko left a comment • edited Loading

Choose a reason for hiding this comment

ValeraViachalo commented Sep 17, 2023

VitaliyBondarenko1982 left a comment

Choose a reason for hiding this comment

VitaliyBondarenko1982 Sep 17, 2023

Choose a reason for hiding this comment

ValeraViachalo commented Sep 17, 2023

etojeDenys left a comment

Choose a reason for hiding this comment

ValeraViachalo commented Sep 20, 2023

ValeraViachalo commented Sep 20, 2023

maxim2310 left a comment

Choose a reason for hiding this comment

ValeraViachalo commented Sep 21, 2023 • edited Loading

VitaliyBondarenko1982 left a comment

Choose a reason for hiding this comment

ValeraViachalo commented Sep 21, 2023

sTorba24 left a comment

Choose a reason for hiding this comment

VitaliyBondarenko1982 left a comment

Choose a reason for hiding this comment

maxim2310 left a comment

Choose a reason for hiding this comment

ValeraViachalo commented Oct 10, 2023

IvanFesenko left a comment •

edited

Loading

ValeraViachalo commented Sep 21, 2023 •

edited

Loading