feat: add create group UI

src/config/settings.go

@@ -25,4 +25,6 @@ var (
 	WhatsappWebhook             string
 	WhatsappSettingMaxFileSize  int64 = 50000000  // 50MB
 	WhatsappSettingMaxVideoSize int64 = 100000000 // 100MB
+	WhatsappTypeUser                  = "@s.whatsapp.net"
+	WhatsappTypeGroup                 = "@g.us"
 )

src/internal/rest/group.go

@@ -1,6 +1,7 @@
 package rest
 
 import (
+	"fmt"
 	domainGroup "github.com/aldinokemal/go-whatsapp-web-multidevice/domains/group"
 	"github.com/aldinokemal/go-whatsapp-web-multidevice/pkg/utils"
 	"github.com/gofiber/fiber/v2"
@@ -62,7 +63,7 @@ func (controller *Group) CreateGroup(c *fiber.Ctx) error {
 	return c.JSON(utils.ResponseData{
 		Status:  200,
 		Code:    "SUCCESS",
-		Message: "Success created group",
+		Message: fmt.Sprintf("Success created group with id %s", groupID),
 		Results: map[string]string{
 			"group_id": groupID,
 		},

src/pkg/whatsapp/whatsapp.go

@@ -55,9 +55,9 @@ type evtMessage struct {
 func SanitizePhone(phone *string) {
 	if phone != nil && len(*phone) > 0 && !strings.Contains(*phone, "@") {
 		if len(*phone) <= 15 {
-			*phone = fmt.Sprintf("%s@s.whatsapp.net", *phone)
+			*phone = fmt.Sprintf("%s%s", *phone, config.WhatsappTypeUser)
 		} else {
-			*phone = fmt.Sprintf("%s@g.us", *phone)
+			*phone = fmt.Sprintf("%s%s", *phone, config.WhatsappTypeGroup)
 		}
 	}
 }

src/services/group.go

@@ -2,6 +2,7 @@ package services
 
 import (
 	"context"
+	"github.com/aldinokemal/go-whatsapp-web-multidevice/config"
 	domainGroup "github.com/aldinokemal/go-whatsapp-web-multidevice/domains/group"
 	pkgError "github.com/aldinokemal/go-whatsapp-web-multidevice/pkg/error"
 	"github.com/aldinokemal/go-whatsapp-web-multidevice/pkg/whatsapp"
@@ -54,9 +55,15 @@ func (service groupService) CreateGroup(ctx context.Context, request domainGroup
 
 	var participantsJID []types.JID
 	for _, participant := range request.Participants {
-		if !whatsapp.IsOnWhatsapp(service.WaCli, participant) {
+		formattedParticipant := participant + config.WhatsappTypeUser
+
+		if !whatsapp.IsOnWhatsapp(service.WaCli, formattedParticipant) {
 			return "", pkgError.ErrUserNotRegistered
 		}
+
+		if participantJID, err := types.ParseJID(formattedParticipant); err == nil {
+			participantsJID = append(participantsJID, participantJID)
+		}
 	}
 
 	groupConfig := whatsmeow.ReqCreateGroup{

src/validations/group_validation.go

@@ -34,6 +34,8 @@ func ValidateLeaveGroup(ctx context.Context, request domainGroup.LeaveGroupReque
 func ValidateCreateGroup(ctx context.Context, request domainGroup.CreateGroupRequest) error {
 	err := validation.ValidateStructWithContext(ctx, &request,
 		validation.Field(&request.Title, validation.Required),
+		validation.Field(&request.Participants, validation.Required),
+		validation.Field(&request.Participants, validation.Each(validation.Required)),
 	)
 
 	if err != nil {

src/views/components/GroupCreate.js

@@ -0,0 +1,114 @@
+export default {
+    name: 'CreateGroup',
+    data() {
+        return {
+            loading: false,
+            title: '',
+            participants: ['', ''],
+        }
+    },
+    methods: {
+        openModal() {
+            $('#modalGroupCreate').modal({
+                onApprove: function () {
+                    return false;
+                }
+            }).modal('show');
+        },
+        handleAddParticipant() {
+            this.participants.push('')
+        },
+        handleDeleteParticipant(index) {
+            this.participants.splice(index, 1)
+        },
+        async handleSubmit() {
+            try {
+                let response = await this.submitApi()
+                showSuccessInfo(response)
+                $('#modalGroupCreate').modal('hide');
+            } catch (err) {
+                showErrorInfo(err)
+            }
+        },
+        async submitApi() {
+            this.loading = true;
+            try {
+                let response = await window.http.post(`/group`, {
+                    title: this.title,
+                    // convert participant become list of string
+                    participants: this.participants.filter(participant => participant !== '').map(participant => `${participant}`)
+                })
+                this.handleReset();
+                this.groups = response.data.results.data;
+                return response.data.message;
+            } catch (error) {
+                if (error.response) {
+                    throw new Error(error.response.data.message);
+                }
+                throw new Error(error.message);
+            } finally {
+                this.loading = false;
+            }
+        },
+        handleReset() {
+            this.title = '';
+            this.participants = ['', ''];
+        },
+    },
+    template: `
+    <div class="green card" @click="openModal" style="cursor: pointer">
+        <div class="content">
+            <div class="header">Create Groups</div>
+            <div class="description">
+                Add more friends to your group
+            </div>
+        </div>
+    </div>
+    
+    <!--  Modal AccountGroup  -->
+    <div class="ui small modal" id="modalGroupCreate">
+        <i class="close icon"></i>
+        <div class="header">
+            
+        </div>
+        <div class="content">
+            <form class="ui form">
+                <div class="field">
+                    <label>Group Name</label>
+                    <input v-model="title" type="text"
+                           placeholder="Group Name..."
+                           aria-label="Group Name">
+                </div>
+                
+                <div class="field">
+                    <label>Participants</label>
+                    <div style="display: flex; flex-direction: column; gap: 5px">
+                        <div class="ui action input" :key="index" v-for="(participant, index) in participants">
+                            <input type="number" placeholder="Phone Int Number (6289...)" v-model="participants[index]"
+                                   aria-label="list participant">
+                            <button class="ui button" @click="handleDeleteParticipant(index)" type="button">
+                                <i class="minus circle icon"></i>
+                            </button>
+                        </div>
+                        <div class="field" style="display: flex; flex-direction: column; gap: 3px">
+                            <small>You do not need to include yourself as participant. it will be automatically included.</small>
+                            <div>
+                                <button class="mini ui primary button" @click="handleAddParticipant" type="button">
+                                    <i class="plus icon"></i> Option
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        </div>
+        <div class="actions">
+            <div class="ui approve positive right labeled icon button" :class="{'loading': this.loading}"
+                 @click="handleSubmit" type="button">
+                Create
+                <i class="send icon"></i>
+            </div>
+        </div>
+    </div>
+    `
+}

src/views/components/AccountGroup.js → src/views/components/GroupList.js

@@ -1,5 +1,5 @@
 export default {
-    name: 'AccountGroup',
+    name: 'ListGroup',
     data() {
         return {
             groups: []
@@ -10,7 +10,7 @@ export default {
             try {
                 this.dtClear()
                 await this.submitApi();
-                $('#modalUserGroup').modal('show');
+                $('#modalGroupList').modal('show');
                 this.dtRebuild()
                 showSuccessInfo("Groups fetched")
             } catch (err) {
@@ -72,15 +72,15 @@ export default {
     template: `
     <div class="green card" @click="openModal" style="cursor: pointer">
         <div class="content">
-            <div class="header">My List Groups</div>
+            <div class="header">List Groups</div>
             <div class="description">
-                Display all groups you joined
+                Display all your groups
             </div>
         </div>
     </div>
     
     <!--  Modal AccountGroup  -->
-    <div class="ui small modal" id="modalUserGroup">
+    <div class="ui small modal" id="modalGroupList">
         <i class="close icon"></i>
         <div class="header">
             My Group List

src/views/index.html

@@ -73,6 +73,15 @@
         <message-update></message-update>
     </div>
 
+    <div class="ui horizontal divider">
+        Group
+    </div>
+
+    <div class="ui four column doubling grid cards">
+        <group-list></group-list>
+        <group-create></group-create>
+    </div>
+
     <div class="ui horizontal divider">
         Account
     </div>
@@ -80,7 +89,6 @@
     <div class="ui four column doubling grid cards">
         <account-avatar></account-avatar>
         <account-user-info></account-user-info>
-        <account-group></account-group>
         <account-privacy></account-privacy>
     </div>
 
@@ -129,9 +137,10 @@
     import MessageUpdate from "./components/MessageUpdate.js";
     import MessageReact from "./components/MessageReact.js";
     import MessageRevoke from "./components/MessageRevoke.js";
+    import GroupList from "./components/GroupList.js";
+    import GroupCreate from "./components/GroupCreate.js";
     import AccountAvatar from "./components/AccountAvatar.js";
     import AccountUserInfo from "./components/AccountUserInfo.js";
-    import AccountGroup from "./components/AccountGroup.js";
     import AccountPrivacy from "./components/AccountPrivacy.js";
 
     const showErrorInfo = (message) => {
@@ -158,7 +167,8 @@
             AppLogin, AppLogout, AppReconnect,
             SendMessage, SendImage, SendFile, SendVideo, SendContact, SendLocation, SendAudio, SendPoll,
             MessageUpdate, MessageReact, MessageRevoke,
-            AccountAvatar, AccountUserInfo, AccountGroup, AccountPrivacy
+            GroupList, GroupCreate,
+            AccountAvatar, AccountUserInfo, AccountPrivacy
         },
         delimiters: ['[[', ']]'],
         data() {