From 32764e304069e4277dbad4f33b0f60a750a76f1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C2=96=C2=96AsTroLog?= <tarasbondarenko3@gmail.com>
Date: Sun, 5 Nov 2023 16:18:31 +0000
Subject: [PATCH] Create connection to api

---
 .../Models/Messages.cs                        | 14 +++
 .../Pages/Chat.razor                          | 57 +++++++-----
 .../Pages/Chat.razor.cs                       | 89 +++++++++++++++----
 .../Pages/Chat.razor.css                      |  1 +
 .../Pages/Index.razor                         | 23 ++++-
 .../Pages/Index.razor.cs                      | 57 ++++++++++++
 .../Shared/NavMenu.razor                      | 19 ++--
 .../Shared/NavMenu.razor.cs                   | 12 +--
 8 files changed, 203 insertions(+), 69 deletions(-)
 create mode 100644 ShoppingAssistantWebClient.Web/Models/Messages.cs
 create mode 100644 ShoppingAssistantWebClient.Web/Pages/Index.razor.cs

diff --git a/ShoppingAssistantWebClient.Web/Models/Messages.cs b/ShoppingAssistantWebClient.Web/Models/Messages.cs
new file mode 100644
index 0000000..9cbed36
--- /dev/null
+++ b/ShoppingAssistantWebClient.Web/Models/Messages.cs
@@ -0,0 +1,14 @@
+namespace ShoppingAssistantWebClient.Web.Models
+{
+    public class Messages
+    {
+
+        public required string Id { get; set; }
+
+        public required string Text { get; set; }
+
+        public required string Role { get; set; }
+
+        public required string CreatedById { get; set; }
+    }
+}
diff --git a/ShoppingAssistantWebClient.Web/Pages/Chat.razor b/ShoppingAssistantWebClient.Web/Pages/Chat.razor
index d3ed902..939c8e8 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Chat.razor
+++ b/ShoppingAssistantWebClient.Web/Pages/Chat.razor
@@ -23,25 +23,26 @@
 
             <ul class="chat_box">
 
-                <li class="chat_outgoing">
-                    <p>Give me product recommendation. Ask me questions if you need more directions. I am looking for:
-                        hub for my macbook to connect external monitors</p>
-                </li>
-                <li class=" chat_incoming">
-                    <p>Sure! I can help you with that. I will ask you some leading questions. This is the first:
-                        <br>
-                        How many external monitors do you want to connect to your MacBook?
-                    </p>
-                </li>
-                <li class="chat_outgoing">
-                    <p>7</p>
-                </li>
-                <li class=" chat_incoming">
-                    <p>Thank you. Here is the next question:
-                        <br>
-                        What type of external monitors do you have? (e.g., HDMI, DisplayPort, VGA)
-                    </p>
-                </li>
+                @if(!isLoading && Messages!=null){
+
+                    @foreach (var item in Messages){
+
+                      if(item.Role!="User"){
+
+                        <li class=" chat_incoming">
+                            <p>@item.Text</p>
+                        </li>
+
+                      }else{
+
+                        <li class="chat_outgoing">
+                            <p>@item.Text</p>
+                        </li>
+
+                      }
+                    }
+
+                }
 
             </ul>
 
@@ -71,9 +72,9 @@
 
 
         <div class="chat_input">
-            <input class="input_messages" type="text" id="chatInput"
+            <input @bind="inputValue" @onkeydown="Enter" class="input_messages" type="text" id="chatInput"
                 placeholder="Describe what you are looking for....">
-            <img class="button_sende" src="/images/send.svg" alt="Send message">
+            <img @onclick="AddNewMessage" class="button_sende" src="/images/send.svg" alt="Send message">
         </div>
 
     </div>
@@ -89,4 +90,18 @@
 @code {
 
     [Parameter] public string chatId { get; set; }
+
+    protected override async Task OnParametersSetAsync()
+    {
+        await LoadMessages();
+    }
+
+    public void Enter(KeyboardEventArgs e)
+    {
+        if (e.Code == "Enter" || e.Code == "NumpadEnter")
+        {
+           AddNewMessage();
+        }
+    }
+    
 }
\ No newline at end of file
diff --git a/ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs b/ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs
index 44e32ae..6fbee2d 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs
+++ b/ShoppingAssistantWebClient.Web/Pages/Chat.razor.cs
@@ -9,40 +9,91 @@ namespace ShoppingAssistantWebClient.Web.Pages;
 public partial class Chat : ComponentBase
 {
 
-    [Inject]
-    private ApiClient _apiClient { get; set; }
+        [Inject]
+        private ApiClient _apiClient { get; set; }
 
-
-    protected override async Task OnInitializedAsync()
+        public List<Messages> Messages { get; set; }
+        public bool isLoading = true;
+        private string inputValue = "";
+        protected override async Task OnInitializedAsync()
         {
-            await LoadMenus();
+            await LoadMessages();
         }
 
 
-        private async Task LoadMenus()
+        private async Task LoadMessages()
         {
-            var pageNumber = 1;
+
+
+            isLoading = true;
+            int pageNumber = 1;
+            string wishlistId = chatId;
             var request = new GraphQLRequest
             {
-                Query = @"mutation StartPersonalWishlist {
-                        startPersonalWishlist(dto: { type: product, firstMessageText: hello }) {
-                            id
-                            name
-                            type
-                            createdById
-                        }
-                    }",
+                Query = @"query MessagesPageFromPersonalWishlist($wishlistId: String!, $pageNumber: Int!, $pageSize: Int!) {
+                            messagesPageFromPersonalWishlist( wishlistId: $wishlistId, pageNumber: $pageNumber, pageSize: $pageSize) 
+                            {
+                                items {
+                                    id
+                                    text
+                                    role
+                                    createdById
+                                }
+                            }
+                        }",
 
                 Variables = new
                 {
-                    pageNumber = pageNumber,
-                    pageSize = 12,
+                    wishlistId,
+                    pageNumber,
+                    pageSize = 20
+                }
+            };
+            try{
+            var response = await _apiClient.QueryAsync(request);
+                var responseData = response.Data;
+                var jsonCategoriesResponse = JsonConvert.SerializeObject(responseData.messagesPageFromPersonalWishlist.items);
+                this.Messages = JsonConvert.DeserializeObject<List<Messages>>(jsonCategoriesResponse);
+                Messages.Reverse();
+                isLoading = false;
+
+            }catch{
+
+            }
+            
+
+        }
+        private async Task AddNewMessage()
+        {
+
+            isLoading = true;
+            var pageNumber = 1;
+            var wishlistId = chatId;
+            var text = inputValue;
+            inputValue="";
+            var request = new GraphQLRequest
+            {
+                Query = @"mutation AddMessageToPersonalWishlist($wishlistId: String!, $text: String!) {
+                            addMessageToPersonalWishlist(wishlistId: $wishlistId, dto: { text: $text }) {
+                                id
+                                text
+                                role
+                                createdById
+                            }
+                        }
+                        ",
+
+                Variables = new
+                {
+                    wishlistId,
+                    text
                 }
             };
 
-        var response = await _apiClient.QueryAsync(request);
+            var response = await _apiClient.QueryAsync(request);
+            await LoadMessages();
+        }
 
-    }
 
 
 
diff --git a/ShoppingAssistantWebClient.Web/Pages/Chat.razor.css b/ShoppingAssistantWebClient.Web/Pages/Chat.razor.css
index 33531e7..495038c 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Chat.razor.css
+++ b/ShoppingAssistantWebClient.Web/Pages/Chat.razor.css
@@ -56,6 +56,7 @@
 }
 
 .possible_options {
+  visibility: hidden;
   position: absolute;
   bottom: 5.5em;
   margin-left: 25%;
diff --git a/ShoppingAssistantWebClient.Web/Pages/Index.razor b/ShoppingAssistantWebClient.Web/Pages/Index.razor
index e447132..59320ca 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Index.razor
+++ b/ShoppingAssistantWebClient.Web/Pages/Index.razor
@@ -19,10 +19,10 @@
             <div class="title_two_frame">What you're looking for</div>
 
             <div class="switch">
-                <div class="switch_product" id="choose_product">
+                <div @onclick="Сhoose_product"class="switch_product" id="choose_product">
                     Product
                 </div>
-                <div class="switch_gift" id="choose_gift">
+                <div @onclick="Сhoose_gift" class="switch_gift" id="choose_gift">
                     Gift
                 </div>
             </div>
@@ -52,9 +52,9 @@
 
         </div>
         <div class="chat_input">
-            <input class="input_messages" type="text" id="chatInput"
+            <input @bind="inputValue" class="input_messages" type="text" id="chatInput"
                 placeholder="Describe what you are looking for....">
-            <img class="button_sende" src="/images/send.svg" alt="Send message">
+            <img @onclick="CreateNewChat" class="button_sende" src="/images/send.svg" alt="Send message">
         </div>
 
     </div>
@@ -68,12 +68,15 @@
     var choose_product = document.getElementById("choose_product");
     var switchGi = document.querySelector(".switch_gift");
     var switchProd = document.querySelector(".switch_product");
+    var choose = "Product";
 
     function switchGift() {
         choose_gift.style.backgroundColor = "#0052CC";
         choose_product.style.backgroundColor = "transparent";
         switchGi.style.color = "white";
         switchProd.style.color = "#202124";
+        choose = "Gift";
+
     }
 
     function switchProduct() {
@@ -81,6 +84,8 @@
         choose_gift.style.backgroundColor = "transparent";
         switchProd.style.color = "white";
         switchGi.style.color = "#202124";
+        choose = "Product";
+
     }
 
     document.getElementById('choose_gift').addEventListener('click', switchGift);
@@ -88,3 +93,13 @@
 
     document.getElementById('button_open').addEventListener('click', changetyle);
 </script>
+@code{
+    private string selectedChoice = "Product";
+
+    private void Сhoose_product() {
+        selectedChoice = "Product";
+    }
+        private void Сhoose_gift() {
+        selectedChoice = "Gift";
+    }
+}
diff --git a/ShoppingAssistantWebClient.Web/Pages/Index.razor.cs b/ShoppingAssistantWebClient.Web/Pages/Index.razor.cs
new file mode 100644
index 0000000..601e4a9
--- /dev/null
+++ b/ShoppingAssistantWebClient.Web/Pages/Index.razor.cs
@@ -0,0 +1,57 @@
+using Microsoft.AspNetCore.Components;
+using ShoppingAssistantWebClient.Web.Models;
+using GraphQL;
+using Newtonsoft.Json;
+using ShoppingAssistantWebClient.Web.Network;
+
+
+namespace ShoppingAssistantWebClient.Web.Pages
+{
+    public partial class Index : ComponentBase
+    {
+
+         [Inject]
+        private ApiClient _apiClient { get; set; }
+         [Inject]
+        private NavigationManager Navigation { get; set; }
+        
+        private string inputValue = "";
+        public bool isLoading = true;
+
+
+        private async Task CreateNewChat() {
+
+            if(inputValue!=""){
+                
+            var type = selectedChoice;
+    
+            var firstMessageText= inputValue;
+            var request = new GraphQLRequest
+            {
+                Query = @"mutation StartPersonalWishlist($type: String!, $firstMessageText: String!) {
+                        startPersonalWishlist(dto: { type: $type, firstMessageText: $firstMessageText }) {
+                            id
+                        }
+                    }
+                    ",
+
+                Variables = new
+                {
+                    type,
+                    firstMessageText
+                }
+            };
+
+            var response = await _apiClient.QueryAsync(request);
+            var responseData = response.Data;
+            var chat_id = responseData.startPersonalWishlist.id;
+            var url = $"/chat/{chat_id}";
+            Navigation.NavigateTo(url);
+
+            }
+                
+
+        }
+
+    }
+}
diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
index 270aa40..08dd11c 100644
--- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
+++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
@@ -3,7 +3,6 @@
 
 <div id="leftframe" class="left_frame">
 
-
     <div class="logo">
         <img src="/images/logo.svg" alt="Logo site">
         <span class="logo_name">CARTAID</span>
@@ -39,11 +38,8 @@
                         </section>
                     }
 
-                }else{
-                    <div>loading ...</div>
                 }
 
-                
             </div>
 
         </div>
@@ -58,10 +54,8 @@
 
         </div>
 
-
     </div>
 
-
 </div>
 
 
@@ -85,20 +79,12 @@
             right_frame.style.left = '23.25em';
         }
     }
-
-
-
-
-
-
-
     document.getElementById('button_close').addEventListener('click', changetyle);
 
 </script>
 
 @code {
 
-
     private void RedirectToPage(string itemId) {
             var url = $"/chat/{itemId}";
             Navigation.NavigateTo(url);
@@ -117,4 +103,9 @@
          
     }
 
+    public void UpdateSideMenu()
+    {
+        StateHasChanged();
+    }
+
 }
diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.cs b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.cs
index 69d7f8e..b4ca1e9 100644
--- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.cs
+++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.cs
@@ -11,23 +11,14 @@ namespace ShoppingAssistantWebClient.Web.Shared
 
         [Inject]
         private ApiClient _apiClient { get; set; }
-
-        //public string jwt;
-
         public List<Wishlist> Wishlists { get; set; }
         public bool isLoading = true;
         protected override async Task OnInitializedAsync()
         {
-            //jwt = _apiClient.JwtToken;
-
             await LoadMenus();
         }
-
-
         private async Task LoadMenus()
         {
-
-
             isLoading = true;
             var pageNumber = 1;
             var request = new GraphQLRequest
@@ -53,7 +44,6 @@ namespace ShoppingAssistantWebClient.Web.Shared
             var jsonCategoriesResponse = JsonConvert.SerializeObject(responseData.personalWishlistsPage.items);
             this.Wishlists = JsonConvert.DeserializeObject<List<Wishlist>>(jsonCategoriesResponse);
             isLoading = false;
-
         }
 
         protected async Task DeleteWish(string wishlistId)
@@ -74,7 +64,7 @@ namespace ShoppingAssistantWebClient.Web.Shared
             };
 
             var response = await _apiClient.QueryAsync(request);
-            var responseData = response.Data;
+            await LoadMenus();
         }
 
     }