Alleop - reviews and ratings to have separate from 1 to 5 starts #64

dmitriyzhuk · 2021-03-12T12:17:48Z

What problem is this solving?

In our project the client needs to show a breakdown from 1 to 5 the available stars and total.

How to test it?

https://alleop1--alleop.myvtex.com/silikonova-kupa-za-pukanki-kinghoff-kh-1258-p75504/p?__bindingAddress=alleop.bg/

Screenshots or example usage:

OLD DESIGN https://i.imgur.com/4sqAZ6B.png
NEW DESIGN https://i.imgur.com/uUSAKRt.png

Describe alternatives you've considered, if any.

I have no idea :)

Related to / Depends on

How does this PR make you feel? 🔗

![](put .gif link here - can be found under "advanced" on giphy)

merge vtex into mine

vtex-io-ci-cd · 2021-03-12T12:17:49Z

Hi! I'm VTEX IO CI/CD Bot and I'll be helping you to publish your app! 🤖

Please select which version do you want to release:

Patch (backwards-compatible bug fixes)
Minor (backwards-compatible functionality)
Major (incompatible API changes)

And then you just need to merge your PR when you are ready! There is no need to create a release commit/tag.

No thanks, I would rather do it manually 😞

vtex-io-docs-bot · 2021-03-12T12:17:55Z

Beep boop 🤖

I noticed you didn't make any changes at the docs/ folder

There's nothing new to document 🤔
I'll do it later 😞

In order to keep track, I'll create an issue if you decide now is not a good time

I just updated 🎉🎉

klzns · 2021-03-12T21:33:14Z

react/RatingSummary.tsx

+import TotalReviewsByProductId4 from '../graphql/totalReviewsByProductId4.graphql'
+import TotalReviewsByProductId3 from '../graphql/totalReviewsByProductId3.graphql'
+import TotalReviewsByProductId2 from '../graphql/totalReviewsByProductId2.graphql'
+import TotalReviewsByProductId1 from '../graphql/totalReviewsByProductId1.graphql'


These data are not being used in this component. No need to change this file.

klzns · 2021-03-12T21:33:24Z

react/RatingInline.tsx

+  total4: 0,
+  total3: 0,
+  total2: 0,
+  total1: 0,


These data are not being used in this component. No need to change this file.

klzns · 2021-03-12T21:33:58Z

graphql/totalReviewsByProductId1.graphql

@@ -0,0 +1,3 @@
+query TotalReviewsByProductId1($productId: String!) {


No need to create new queries, just add a new field ratingHistogram in ReviewsResult.

klzns · 2021-03-12T21:34:03Z

graphql/totalReviewsByProductId2.graphql

@@ -0,0 +1,3 @@
+query TotalReviewsByProductId2($productId: String!) {


klzns · 2021-03-12T21:34:07Z

graphql/totalReviewsByProductId5.graphql

@@ -0,0 +1,3 @@
+query TotalReviewsByProductId5($productId: String!) {


klzns · 2021-03-12T21:35:23Z

react/Reviews.tsx

+  total2: number
+  total1: number
+}
+


Can remove all of these changes until this point.

klzns · 2021-03-12T21:36:36Z

react/Reviews.tsx

@@ -508,29 +697,88 @@ function Reviews() {
          <FormattedMessage id="store/reviews.list.summary.loading" />
        ) : !state.total ? null : (
          <Fragment>
-            <div className={`${handles.starsContainer} t-heading-4`}>
-              <Stars rating={state.average} />
+            <div>


Show only if a setting is turned on, otherwise this will be a breaking change.

klzns · 2021-03-12T21:37:57Z

dotnet/GraphQL/Query.cs

+
+            FieldAsync<IntGraphType>(
+                "totalReviewsByProductId4",
+                arguments: new QueryArguments(
+                    new QueryArgument<NonNullGraphType<StringGraphType>> { Name = "productId", Description = "Product Id" }
+                    ),
+                resolve: async context =>
+                {
+                    int count = 0;
+                    var searchResult = await productReviewService.GetReviewsByProductId(context.GetArgument<string>("productId"));
+
+                    if (searchResult != null && searchResult.Count > 0)
+                    {
+                        for (int i = 0; i < searchResult.Count; i++)
+                        {
+                            if (searchResult[i].Rating == 4)
+                            {
+                                count++;
+                            }
+                        }
+                    }
+
+                    return count;
+                }
+            );
+
+            FieldAsync<IntGraphType>(
+                "totalReviewsByProductId3",
+                arguments: new QueryArguments(
+                    new QueryArgument<NonNullGraphType<StringGraphType>> { Name = "productId", Description = "Product Id" }
+                    ),
+                resolve: async context =>
+                {
+                    int count = 0;
+                    var searchResult = await productReviewService.GetReviewsByProductId(context.GetArgument<string>("productId"));
+
+                    if (searchResult != null && searchResult.Count > 0)
+                    {
+                        for (int i = 0; i < searchResult.Count; i++)
+                        {
+                            if (searchResult[i].Rating == 3)
+                            {
+                                count++;
+                            }
+                        }
+                    }
+
+                    return count;
+                }
+            );
+
+            FieldAsync<IntGraphType>(
+                "totalReviewsByProductId2",
+                arguments: new QueryArguments(
+                    new QueryArgument<NonNullGraphType<StringGraphType>> { Name = "productId", Description = "Product Id" }
+                    ),
+                resolve: async context =>
+                {
+                    int count = 0;
+                    var searchResult = await productReviewService.GetReviewsByProductId(context.GetArgument<string>("productId"));
+
+                    if (searchResult != null && searchResult.Count > 0)
+                    {
+                        for (int i = 0; i < searchResult.Count; i++)
+                        {
+                            if (searchResult[i].Rating == 2)
+                            {
+                                count++;
+                            }
+                        }
+                    }
+
+                    return count;
+                }
+            );
+
+            FieldAsync<IntGraphType>(
+                "totalReviewsByProductId1",
+                arguments: new QueryArguments(
+                    new QueryArgument<NonNullGraphType<StringGraphType>> { Name = "productId", Description = "Product Id" }
+                    ),
+                resolve: async context =>
+                {
+                    int count = 1;
+                    var searchResult = await productReviewService.GetReviewsByProductId(context.GetArgument<string>("productId"));
+
+                    if (searchResult != null && searchResult.Count > 0)
+                    {
+                        for (int i = 0; i < searchResult.Count; i++)
+                        {
+                            if (searchResult[i].Rating == 1)
+                            {
+                                count++;
+                            }
+                        }
+                    }
+
+                    return count;
+                }
+            );


Suggested change

FieldAsync<IntGraphType>(

"totalReviewsByProductId5",

arguments: new QueryArguments(

new QueryArgument<NonNullGraphType<StringGraphType>> { Name = "productId", Description = "Product Id" }

),

resolve: async context =>

{

int count = 0;

var searchResult = await productReviewService.GetReviewsByProductId(context.GetArgument<string>("productId"));

if (searchResult != null && searchResult.Count > 0)

{

for (int i = 0; i < searchResult.Count; i++) {

if (searchResult[i].Rating == 5)

{

count++;

}

}

}

return count;

}

);

FieldAsync<IntGraphType>(

"totalReviewsByProductId4",

arguments: new QueryArguments(

new QueryArgument<NonNullGraphType<StringGraphType>> { Name = "productId", Description = "Product Id" }

),

resolve: async context =>

{

int count = 0;

var searchResult = await productReviewService.GetReviewsByProductId(context.GetArgument<string>("productId"));

if (searchResult != null && searchResult.Count > 0)

{

for (int i = 0; i < searchResult.Count; i++)

{

if (searchResult[i].Rating == 4)

{

count++;

}

}

}

return count;

}

);

FieldAsync<IntGraphType>(

"totalReviewsByProductId3",

arguments: new QueryArguments(

new QueryArgument<NonNullGraphType<StringGraphType>> { Name = "productId", Description = "Product Id" }

),

resolve: async context =>

{

int count = 0;

var searchResult = await productReviewService.GetReviewsByProductId(context.GetArgument<string>("productId"));

if (searchResult != null && searchResult.Count > 0)

{

for (int i = 0; i < searchResult.Count; i++)

{

if (searchResult[i].Rating == 3)

{

count++;

}

}

}

return count;

}

);

FieldAsync<IntGraphType>(

"totalReviewsByProductId2",

arguments: new QueryArguments(

new QueryArgument<NonNullGraphType<StringGraphType>> { Name = "productId", Description = "Product Id" }

),

resolve: async context =>

{

int count = 0;

var searchResult = await productReviewService.GetReviewsByProductId(context.GetArgument<string>("productId"));

if (searchResult != null && searchResult.Count > 0)

{

for (int i = 0; i < searchResult.Count; i++)

{

if (searchResult[i].Rating == 2)

{

count++;

}

}

}

return count;

}

);

FieldAsync<IntGraphType>(

"totalReviewsByProductId1",

arguments: new QueryArguments(

new QueryArgument<NonNullGraphType<StringGraphType>> { Name = "productId", Description = "Product Id" }

),

resolve: async context =>

{

int count = 1;

var searchResult = await productReviewService.GetReviewsByProductId(context.GetArgument<string>("productId"));

if (searchResult != null && searchResult.Count > 0)

{

for (int i = 0; i < searchResult.Count; i++)

{

if (searchResult[i].Rating == 1)

{

count++;

}

}

}

return count;

}

);

Can remove those resolvers

klzns · 2021-03-12T21:39:07Z

graphql/schema.graphql

+  totalReviewsByProductId5(productId: String!): Int @cacheControl(scope: PRIVATE)
+  totalReviewsByProductId4(productId: String!): Int @cacheControl(scope: PRIVATE)
+  totalReviewsByProductId3(productId: String!): Int @cacheControl(scope: PRIVATE)
+  totalReviewsByProductId2(productId: String!): Int @cacheControl(scope: PRIVATE)
+  totalReviewsByProductId1(productId: String!): Int @cacheControl(scope: PRIVATE)


We can remove those queries and just add the new field totals to ReviewsResult

Suggested change

totalReviewsByProductId5(productId: String!): Int @cacheControl(scope: PRIVATE)

totalReviewsByProductId4(productId: String!): Int @cacheControl(scope: PRIVATE)

totalReviewsByProductId3(productId: String!): Int @cacheControl(scope: PRIVATE)

totalReviewsByProductId2(productId: String!): Int @cacheControl(scope: PRIVATE)

totalReviewsByProductId1(productId: String!): Int @cacheControl(scope: PRIVATE)

klzns · 2021-03-12T21:40:56Z

Thanks for the PR! Left some comments!

dmitriyzhuk added 3 commits March 12, 2021 06:02

Merge pull request #1 from vtex-apps/master

ba48219

merge vtex into mine

no message

2893c1d

fix graphArray: number[]

166dbd8

dmitriyzhuk requested review from a team as code owners March 12, 2021 12:17

dmitriyzhuk requested review from klzns, icazevedo and victorhmp March 12, 2021 12:17

klzns suggested changes Mar 12, 2021

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Alleop - reviews and ratings to have separate from 1 to 5 starts #64

Alleop - reviews and ratings to have separate from 1 to 5 starts #64

dmitriyzhuk commented Mar 12, 2021

vtex-io-ci-cd bot commented Mar 12, 2021

vtex-io-docs-bot bot commented Mar 12, 2021

klzns Mar 12, 2021

klzns Mar 12, 2021

klzns Mar 12, 2021

klzns Mar 12, 2021

klzns Mar 12, 2021

klzns Mar 12, 2021

klzns Mar 12, 2021

klzns Mar 12, 2021

klzns Mar 12, 2021

klzns commented Mar 12, 2021

		@@ -0,0 +1,3 @@
		query TotalReviewsByProductId1($productId: String!) {

		@@ -0,0 +1,3 @@
		query TotalReviewsByProductId2($productId: String!) {

		@@ -0,0 +1,3 @@
		query TotalReviewsByProductId5($productId: String!) {

Alleop - reviews and ratings to have separate from 1 to 5 starts #64

Are you sure you want to change the base?

Alleop - reviews and ratings to have separate from 1 to 5 starts #64

Conversation

dmitriyzhuk commented Mar 12, 2021

What problem is this solving?

How to test it?

Screenshots or example usage:

Describe alternatives you've considered, if any.

Related to / Depends on

How does this PR make you feel? 🔗

vtex-io-ci-cd bot commented Mar 12, 2021

vtex-io-docs-bot bot commented Mar 12, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

klzns commented Mar 12, 2021