From f343dd38a3dd9cb7b6d403018933718fdb2a0863 Mon Sep 17 00:00:00 2001 From: myckhel Date: Sat, 6 Nov 2021 00:10:59 +0100 Subject: [PATCH 01/37] renamed `ChatEventMaker` to `IChatEventMaker` --- app/Models/User.php | 4 ++-- composer.lock | 12 +++++------- packages/laravel-chat-system | 2 +- 3 files changed, 8 insertions(+), 10 deletions(-) diff --git a/app/Models/User.php b/app/Models/User.php index d37a7d0..fa6c25b 100644 --- a/app/Models/User.php +++ b/app/Models/User.php @@ -9,10 +9,10 @@ use Laravel\Sanctum\HasApiTokens; use Myckhel\ChatSystem\Traits\Message\HasMessage; use Myckhel\ChatSystem\Traits\ChatEvent\CanMakeChatEvent; -use Myckhel\ChatSystem\Contracts\ChatEventMaker; +use Myckhel\ChatSystem\Contracts\IChatEventMaker; -class User extends Authenticatable implements ChatEventMaker +class User extends Authenticatable implements IChatEventMaker { use HasFactory, Notifiable, HasApiTokens, HasMessage, CanMakeChatEvent; diff --git a/composer.lock b/composer.lock index 02c3be2..a8fa789 100644 --- a/composer.lock +++ b/composer.lock @@ -2258,18 +2258,19 @@ "dist": { "type": "path", "url": "packages/laravel-chat-system", - "reference": "7348afdd7e8c5e6cfeaf237a741eae16f34abaf1" + "reference": "7e45d8cba32b1a1291d7c4284d25b98f21273da0" }, "require": { "illuminate/support": "~7|~8", - "nesbot/carbon": "^2.36.0", + "nesbot/carbon": "^2.50", "php": "^8.0" }, "require-dev": { "fakerphp/faker": "^1.12", "orchestra/testbench": "~5|~6", + "pestphp/pest": "^1.11", "php": "^8", - "phpunit/phpunit": "~9.0" + "spatie/pest-plugin-test-time": "^1.0" }, "type": "library", "extra": { @@ -2294,10 +2295,7 @@ }, "scripts": { "test": [ - "vendor/bin/phpunit" - ], - "post-autoload-dump": [ - "@php vendor/bin/testbench package:discover --ansi" + "./vendor/bin/pest" ] }, "license": [ diff --git a/packages/laravel-chat-system b/packages/laravel-chat-system index 733170a..c034a0a 160000 --- a/packages/laravel-chat-system +++ b/packages/laravel-chat-system @@ -1 +1 @@ -Subproject commit 733170ab7e6f2b07047614993805a2e98ca44932 +Subproject commit c034a0a5cfc9f8bd18855adaf8846b306479ab1c From 87640980246010ce5e8fd8d01e8422a032e87e97 Mon Sep 17 00:00:00 2001 From: myckhel Date: Sat, 6 Nov 2021 00:59:15 +0100 Subject: [PATCH 02/37] renamed `delivery` to `delivered` --- packages/laravel-chat-system | 2 +- resources/js/func/hooks.js | 48 ++++++++++++++++++------------------ 2 files changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/laravel-chat-system b/packages/laravel-chat-system index c034a0a..e4de807 160000 --- a/packages/laravel-chat-system +++ b/packages/laravel-chat-system @@ -1 +1 @@ -Subproject commit c034a0a5cfc9f8bd18855adaf8846b306479ab1c +Subproject commit e4de80779e7025c644bc7f2cfd6fd641a488f5b5 diff --git a/resources/js/func/hooks.js b/resources/js/func/hooks.js index cf8b973..886d939 100644 --- a/resources/js/func/hooks.js +++ b/resources/js/func/hooks.js @@ -1,17 +1,17 @@ -import { useMemo } from 'react' -import { usePage } from '@inertiajs/inertia-react' -import { useSelector } from 'react-redux' -import { get } from 'lodash' -import { createSelector } from 'reselect' -import isEqual from 'react-fast-compare' -import moment from 'moment' +import { useMemo } from "react"; +import { usePage } from "@inertiajs/inertia-react"; +import { useSelector } from "react-redux"; +import { get } from "lodash"; +import { createSelector } from "reselect"; +import isEqual from "react-fast-compare"; +import moment from "moment"; -export const useProps = () => usePage().props +export const useProps = () => usePage().props; export const useRoute = () => { - const { url } = usePage() - return { url, params: new URLSearchParams(window.location.search) } -} + const { url } = usePage(); + return { url, params: new URLSearchParams(window.location.search) }; +}; export const useRootMemoSelector = ( selectorOrName, @@ -26,37 +26,37 @@ export const useRootMemoSelector = ( select ), eq - ) + ); -const sel = (state) => state -const isString = (val) => typeof val === 'string' +const sel = (state) => state; +const isString = (val) => typeof val === "string"; export const useConversationEventType = (id) => { const chat_events = useRootMemoSelector( `msg.conversations.${id}`, - ({ read, delivery, created_at } = {}) => ({ read, delivery, created_at }) - ) + ({ read, delivered, created_at } = {}) => ({ read, delivered, created_at }) + ); - return useEventType(chat_events) -} + return useEventType(chat_events); +}; -export const useEventType = ({ read, delivery, created_at }) => +export const useEventType = ({ read, delivered, created_at }) => useMemo(() => { if (read) { if ( !created_at || (created_at && moment(read.created_at).isAfter(created_at)) ) { - return 'read' + return "read"; } } - if (delivery) { + if (delivered) { if ( !created_at || - (created_at && moment(delivery.created_at).isAfter(created_at)) + (created_at && moment(delivered.created_at).isAfter(created_at)) ) { - return 'deliver' + return "deliver"; } } - }, [read, delivery, created_at]) + }, [read, delivered, created_at]); From ca6a84995151171c3182cadc80172f1159b97a2e Mon Sep 17 00:00:00 2001 From: myckhel Date: Sat, 13 Nov 2021 14:52:55 +0100 Subject: [PATCH 03/37] changed chat bottom ui - added scroll to bottom chat --- packages/laravel-chat-system | 2 +- resources/js/Pages/Chat.jsx | 73 +++++++++++++++++++------------ resources/js/icons/attachment.svg | 14 +++++- resources/js/icons/camera.svg | 19 ++++++++ resources/js/icons/index.js | 30 ++++++++----- resources/js/icons/mic.svg | 13 ++++++ resources/js/icons/send.svg | 14 ++---- resources/js/icons/smiley.svg | 13 ++++++ 8 files changed, 124 insertions(+), 54 deletions(-) create mode 100644 resources/js/icons/camera.svg create mode 100644 resources/js/icons/mic.svg create mode 100644 resources/js/icons/smiley.svg diff --git a/packages/laravel-chat-system b/packages/laravel-chat-system index e4de807..39e8711 160000 --- a/packages/laravel-chat-system +++ b/packages/laravel-chat-system @@ -1 +1 @@ -Subproject commit e4de80779e7025c644bc7f2cfd6fd641a488f5b5 +Subproject commit 39e87111f0e7b267fd3b9f4c0f4da88c2f75115b diff --git a/resources/js/Pages/Chat.jsx b/resources/js/Pages/Chat.jsx index 99bba26..8c7f483 100644 --- a/resources/js/Pages/Chat.jsx +++ b/resources/js/Pages/Chat.jsx @@ -1,18 +1,7 @@ import { useEffect, useCallback, useMemo } from "react"; -import Navbar from "../Layout/Navbar.jsx"; // import Sidebar from "../Layout/Sidebar.jsx"; -import { - Button, - Label, - Textarea, - Dropdown, - DropdownItem, - Badge, - Avatar, - Card, - CardBody, -} from "@windmill/react-ui"; -import { SearchIcon, MenuDotX, Send, DoubleCheck, Attachment } from "../icons"; +import { Button, Dropdown, DropdownItem, Badge } from "@windmill/react-ui"; +import { MenuDotX, Send, Attachment, Mic, Camera, Smiley } from "../icons"; import Layout from "../Layout/Dashboard.jsx"; import { useRef } from "react"; import { useDispatch } from "react-redux"; @@ -119,12 +108,21 @@ const Messages = fastMemo(({ conversationId }) => { }, [conversationId]); const setData = useCallback((data) => data.map(({ id }) => id), []); + const onSuccess = useCallback((data) => dispatch(addMsgs(data)), []); + const queryParams = useMemo( () => ({ pageSize: 15, conversation_id: conversationId }), [conversationId] ); + const scrollToBottom = () => { + const el = document.getElementById("messages"); + el.scrollTop = el.scrollHeight; + }; + + useEffect(() => scrollToBottom(), []); + return (
{/* Header */} @@ -136,6 +134,7 @@ const Messages = fastMemo(({ conversationId }) => {
{/* conversation */}
{ />
{/* input */} -
- {!1 && ( - - )} -