Skip to content

Commit 7ddeefb

Browse files
lanzathlanzath
committed
Block/Unblock Feature
1 parent 6bba9b6 commit 7ddeefb

File tree

7 files changed

+214
-57
lines changed

7 files changed

+214
-57
lines changed

‎app/Events/BlockEvent.php

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<?php
2+
3+
namespace App\Events;
4+
5+
use Illuminate\Broadcasting\InteractsWithSockets;
6+
use Illuminate\Broadcasting\PrivateChannel;
7+
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
8+
use Illuminate\Foundation\Events\Dispatchable;
9+
use Illuminate\Queue\SerializesModels;
10+
11+
class BlockEvent implements ShouldBroadcast
12+
{
13+
use Dispatchable, InteractsWithSockets, SerializesModels;
14+
15+
public int $session_id;
16+
public bool $blocked;
17+
18+
/**
19+
* Create a new event instance.
20+
*
21+
* @return void
22+
*/
23+
public function __construct(int $session_id, bool $blocked)
24+
{
25+
$this->session_id = $session_id;
26+
$this->blocked = $blocked;
27+
$this->dontBroadcastToCurrentUser();
28+
}
29+
30+
/**
31+
* Get the channels the event should broadcast on.
32+
*
33+
* @return \Illuminate\Broadcasting\Channel|array
34+
*/
35+
public function broadcastOn()
36+
{
37+
return new PrivateChannel('Chat.' . $this->session_id);
38+
}
39+
}

‎app/Http/Controllers/BlockController.php

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<?php
2+
3+
namespace App\Http\Controllers;
4+
5+
use App\Models\Session;
6+
use Illuminate\Http\JsonResponse;
7+
use Symfony\Component\HttpFoundation\Response;
8+
use App\Events\BlockEvent;
9+
10+
class BlockController extends Controller
11+
{
12+
/**
13+
* Block user.
14+
*
15+
* @param Session $session
16+
* @return JsonResponse
17+
*/
18+
public function block(Session $session): JsonResponse
19+
{
20+
$session->block();
21+
22+
broadcast(new BlockEvent($session->id, true));
23+
24+
return response()->json([], Response::HTTP_NO_CONTENT);
25+
}
26+
27+
/**
28+
* Unblock user.
29+
*
30+
* @param Session $session
31+
* @return JsonResponse
32+
*/
33+
public function unblock(Session $session): JsonResponse
34+
{
35+
$session->unblock();
36+
37+
broadcast(new BlockEvent($session->id, false));
38+
39+
return response()->json([], Response::HTTP_NO_CONTENT);
40+
}
41+
}

‎app/Http/Resources/SessionResource.php

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ public function toArray($request)
2323
->where('type', 'sender')
2424
->where('user_id', '!=', auth()->id())
2525
->count(),
26+
'block' => !!$this->block,
27+
'blocked_by' => $this->blocked_by
2628
];
2729
}
2830
}

‎public/js/app.js

Lines changed: 75 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2023,15 +2023,25 @@ __webpack_require__.r(__webpack_exports__);
20232023
//
20242024
//
20252025
//
2026+
//
2027+
//
2028+
//
20262029
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
20272030
props: ['friend'],
20282031
data: function data() {
20292032
return {
20302033
chats: [],
2031-
blocked: false,
20322034
message: null
20332035
};
20342036
},
2037+
computed: {
2038+
session: function session() {
2039+
return this.friend.session;
2040+
},
2041+
canUnblock: function canUnblock() {
2042+
return this.session.blocked_by == authId;
2043+
}
2044+
},
20352045
methods: {
20362046
send: function send() {
20372047
var _this = this;
@@ -2065,14 +2075,28 @@ __webpack_require__.r(__webpack_exports__);
20652075
return _this2.chats = [];
20662076
});
20672077
},
2068-
toggleBlock: function toggleBlock() {
2069-
this.blocked = !this.blocked;
2078+
block: function block() {
2079+
var _this3 = this;
2080+
2081+
// Getting session from computed
2082+
this.session.block = true;
2083+
axios.post("/session/".concat(this.friend.session.id, "/block")).then(function (response) {
2084+
return _this3.session.blocked_by = authId;
2085+
});
2086+
},
2087+
unblock: function unblock() {
2088+
var _this4 = this;
2089+
2090+
this.session.block = false;
2091+
axios.post("/session/".concat(this.friend.session.id, "/unblock")).then(function (response) {
2092+
return _this4.session.blocked_by = null;
2093+
});
20702094
},
20712095
getAllMessages: function getAllMessages() {
2072-
var _this3 = this;
2096+
var _this5 = this;
20732097

20742098
axios.post("/session/".concat(this.friend.session.id, "/chats")).then(function (response) {
2075-
return _this3.chats = response.data;
2099+
return _this5.chats = response.data;
20762100
});
20772101
},
20782102
// post request to back-end to fill read_at field.
@@ -2081,25 +2105,29 @@ __webpack_require__.r(__webpack_exports__);
20812105
}
20822106
},
20832107
created: function created() {
2084-
var _this4 = this;
2108+
var _this6 = this;
20852109

20862110
this.read();
20872111
this.getAllMessages(); // Listens to every private chat event.
20882112

20892113
Echo["private"]("Chat.".concat(this.friend.session.id)).listen('PrivateChatEvent', function (event) {
2090-
_this4.friend.session.open ? _this4.read() : '';
2114+
_this6.friend.session.open ? _this6.read() : '';
20912115

2092-
_this4.chats.push({
2116+
_this6.chats.push({
20932117
message: event.content,
20942118
type: 'received',
20952119
sent_at: 'Just now'
20962120
});
20972121
}); // Listens to every Message Read Event.
20982122

20992123
Echo["private"]("Chat.".concat(this.friend.session.id)).listen('MsgReadEvent', function (event) {
2100-
_this4.chats.forEach(function (chat, index) {
2101-
_this4.chats[index].read_at = chat.id === event.chat.id ? chat.read_at = event.chat.read_at : '';
2124+
_this6.chats.forEach(function (chat, index) {
2125+
_this6.chats[index].read_at = chat.id === event.chat.id ? chat.read_at = event.chat.read_at : '';
21022126
});
2127+
}); // Listens to every block/unblock event.
2128+
2129+
Echo["private"]("Chat.".concat(this.friend.session.id)).listen('BlockEvent', function (event) {
2130+
return _this6.session.block = event.blocked;
21032131
});
21042132
}
21052133
});
@@ -44211,9 +44239,9 @@ var render = function() {
4421144239
var _c = _vm._self._c || _h
4421244240
return _c("div", { staticClass: "card card-default chat-box" }, [
4421344241
_c("div", { staticClass: "card-header" }, [
44214-
_c("b", { class: { "text-danger": _vm.blocked } }, [
44242+
_c("b", { class: { "text-danger": _vm.session.block } }, [
4421544243
_vm._v("\n " + _vm._s(_vm.friend.name) + "\n "),
44216-
_vm.blocked ? _c("span", [_vm._v("(blocked)")]) : _vm._e()
44244+
_vm.session.block ? _c("span", [_vm._v("(blocked)")]) : _vm._e()
4421744245
]),
4421844246
_vm._v(" "),
4421944247
_c("i", {
@@ -44243,26 +44271,39 @@ var render = function() {
4424344271
attrs: { "aria-labelledby": "dropdownMenuButton" }
4424444272
},
4424544273
[
44246-
_c(
44247-
"a",
44248-
{
44249-
staticClass: "dropdown-item",
44250-
attrs: { href: "#" },
44251-
on: {
44252-
click: function($event) {
44253-
$event.preventDefault()
44254-
return _vm.toggleBlock($event)
44255-
}
44256-
}
44257-
},
44258-
[
44259-
_vm._v(
44260-
"\n " +
44261-
_vm._s(_vm.blocked ? "Unblock" : "Block") +
44262-
"\n "
44274+
_vm.session.block && _vm.canUnblock
44275+
? _c(
44276+
"a",
44277+
{
44278+
staticClass: "dropdown-item",
44279+
attrs: { href: "#" },
44280+
on: {
44281+
click: function($event) {
44282+
$event.preventDefault()
44283+
return _vm.unblock($event)
44284+
}
44285+
}
44286+
},
44287+
[_vm._v("\n Unblock\n ")]
44288+
)
44289+
: _vm._e(),
44290+
_vm._v(" "),
44291+
!_vm.session.block
44292+
? _c(
44293+
"a",
44294+
{
44295+
staticClass: "dropdown-item",
44296+
attrs: { href: "#" },
44297+
on: {
44298+
click: function($event) {
44299+
$event.preventDefault()
44300+
return _vm.block($event)
44301+
}
44302+
}
44303+
},
44304+
[_vm._v("\n Block\n ")]
4426344305
)
44264-
]
44265-
),
44306+
: _vm._e(),
4426644307
_vm._v(" "),
4426744308
_c(
4426844309
"a",
@@ -44338,10 +44379,10 @@ var render = function() {
4433844379
staticClass: "form-control",
4433944380
attrs: {
4434044381
type: "text",
44341-
placeholder: _vm.blocked
44342-
? "You've bocked " + _vm.friend.name + " :("
44382+
placeholder: _vm.session.block
44383+
? "Blocked session :("
4434344384
: "Write your message",
44344-
disabled: _vm.blocked
44385+
disabled: _vm.session.block
4434544386
},
4434644387
domProps: { value: _vm.message },
4434744388
on: {

‎resources/js/components/MessageComponent.vue

Lines changed: 48 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
<template>
22
<div class="card card-default chat-box">
33
<div class="card-header">
4-
<b :class="{'text-danger':blocked}">
4+
<b :class="{'text-danger':session.block}">
55
{{ friend.name }}
6-
<span v-if="blocked">(blocked)</span>
6+
<span v-if="session.block">(blocked)</span>
77
</b>
88
<i class="fas fa-times float-right" @click.prevent="close"></i>
99

1010
<div class="dropdown float-right">
1111
<i class="fas fa-ellipsis-v mr-4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
1212
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
13-
<a class="dropdown-item" href="#" @click.prevent="toggleBlock">
14-
{{ blocked ? 'Unblock' : 'Block' }}
13+
<a class="dropdown-item" href="#" v-if="session.block && canUnblock" @click.prevent="unblock">
14+
Unblock
15+
</a>
16+
<a class="dropdown-item" href="#" v-if="!session.block" @click.prevent="block">
17+
Block
1518
</a>
1619
<a class="dropdown-item" href="#" @click.prevent="clear">Clear chat</a>
1720
</div>
@@ -30,8 +33,8 @@
3033
v-model="message"
3134
type="text"
3235
class="form-control"
33-
:placeholder="blocked ? `You\'ve bocked ${friend.name} :(` : 'Write your message'"
34-
:disabled="blocked"
36+
:placeholder="session.block ? `Blocked session :(` : 'Write your message'"
37+
:disabled="session.block"
3538
/>
3639
</div>
3740
</form>
@@ -44,11 +47,18 @@ export default {
4447
data() {
4548
return {
4649
chats: [],
47-
blocked: false,
4850
message: null,
4951
}
5052
},
53+
computed: {
54+
session() {
55+
return this.friend.session;
56+
},
5157
58+
canUnblock() {
59+
return this.session.blocked_by == authId;
60+
}
61+
},
5262
methods: {
5363
send() {
5464
if (this.message) {
@@ -80,8 +90,19 @@ export default {
8090
.then(response => (this.chats = []));
8191
},
8292
83-
toggleBlock() {
84-
this.blocked = !this.blocked;
93+
block() {
94+
// Getting session from computed
95+
this.session.block = true;
96+
axios
97+
.post(`/session/${this.friend.session.id}/block`)
98+
.then(response => this.session.blocked_by = authId);
99+
},
100+
101+
unblock() {
102+
this.session.block = false;
103+
axios
104+
.post(`/session/${this.friend.session.id}/unblock`)
105+
.then(response => this.session.blocked_by = null);
85106
},
86107
87108
getAllMessages() {
@@ -95,30 +116,34 @@ export default {
95116
axios.post(`/session/${this.friend.session.id}/read`);
96117
}
97118
},
98-
99119
created() {
100120
this.read();
101121
102122
this.getAllMessages();
103123
104124
// Listens to every private chat event.
105125
Echo
106-
.private(`Chat.${this.friend.session.id}`)
107-
.listen('PrivateChatEvent', event => {
108-
this.friend.session.open ? this.read() : '';
109-
this.chats.push({ message: event.content, type: 'received', sent_at: 'Just now' });
110-
});
126+
.private(`Chat.${this.friend.session.id}`)
127+
.listen('PrivateChatEvent', event => {
128+
this.friend.session.open ? this.read() : '';
129+
this.chats.push({ message: event.content, type: 'received', sent_at: 'Just now' });
130+
});
111131
112132
// Listens to every Message Read Event.
113133
Echo
114-
.private(`Chat.${this.friend.session.id}`)
115-
.listen('MsgReadEvent', event => {
116-
this.chats.forEach(
117-
(chat, index) => {
118-
this.chats[index].read_at = chat.id === event.chat.id ? chat.read_at = event.chat.read_at : ''
119-
}
120-
)
121-
});
134+
.private(`Chat.${this.friend.session.id}`)
135+
.listen('MsgReadEvent', event => {
136+
this.chats.forEach(
137+
(chat, index) => {
138+
this.chats[index].read_at = chat.id === event.chat.id ? chat.read_at = event.chat.read_at : ''
139+
}
140+
)
141+
});
142+
143+
// Listens to every block/unblock event.
144+
Echo
145+
.private(`Chat.${this.friend.session.id}`)
146+
.listen('BlockEvent', event => this.session.block = event.blocked);
122147
}
123148
};
124149
</script>

0 commit comments

Comments
 (0)