Twitter app ب laravel & react js الجزء الثاني

imadbelasri Reactjs
RS

فهاد الجزء الثاني من Twitter app ب laravel & react js غادي نكملوا ل projet ونزيدو الجزء الخاص بالمستخدم ولي كيمكنو من متابعة مستخدمين آخرين أو مستخدمين آخرين يتابعوه والعكس أي يلغي المتابعة ديالهم ونفس الشيء بالنسبة ليهم.


نظرة سريعة بالفيديو


1- تعديل الملف User.php

فل model User.php غادي نديرو عليه تعديلات أول حاجة كنزيد لعلاقة مع les posts أي tweets كنقول بلي ممكن تكون عندو tweet أو لا أكثر.

منبعد كنزيد fonction following لي كنقول بها بلي المستخدم ممكن يتابع مستخدم أو لا أكثر من مستخدم.

وعندي ل fonction followers لي كتدير العكس وكتعني ان المستخدم ممكن يكون عندو متابع او أكثر.

وعندي getAvatar لي فقط كتمكن من عرض الصورة ديال المستخدم يلا كانت متوفرة مكنتش كنعرض صورة عادية من الأنترنيت كيف شفنا فالفيديو.

أما getRouteKeyName فهي كتمكني من تغيير طريقة البحث عن مستخدم عوض البحث عليه بل id ديالو فهنا كنحدد البحث بل username لي هو ل pseudo.

أما ل fonction isFollowing فكنتاكد بها بلي المستخدم متابع مستخدم آخر و canFollow كتحقق بلي المستخدم ممكن يتابع مستخدم آخر وبلي مغاديش يتابع راسو.

ول fonction canUnfollow كتحقق بلي المستخدم متابع المستخدم لي غادي يلغي المتابعة ديالو.

الكود ديال الملف User.php هو :

                                                    
                                                        //
<?php

namespace App;

use Illuminate\Notifications\Notifiable;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable
{
    use Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'username', 'email', 'password',
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];

    protected $appends = ['avatar'];

    public function posts(){
        return $this->hasMany('App\Post');
    }
    public function following(){
        return $this->belongsToMany('App\User','follows','user_id','follower_id');
    }
    public function followers(){
        return $this->belongsToMany('App\User','follows','follower_id','user_id');
    }
    public function getAvatar(){
        $email = $this->email;
        $default = "https://www.autourdelacom.fr/wp-content/uploads/2018/03/default-user-image.png";
        $size = 40;
        return "https://www.gravatar.com/avatar/" . md5( strtolower( trim( $email ) ) ) . "?d=" . urlencode( $default ) . "&s=" . $size;
    }
    public function getAvatarAttribute(){
        return $this->getAvatar();
    }
    public function getRouteKeyName(){
        return 'username';
    } 
    //check if user already followed
    public function isNotTheUser(User $user){
        return $this->id !== $user->id;
    }
    public function isFollowing(User $user){
        return (bool) $this->following()->where('follower_id',$user->id)->count();
    }
    public function canFollow(User $user){
        if(!$this->isNotTheUser($user)){
            return false;
        }
        return !$this->isFollowing($user);
    }
   
    public function canUnfollow(User $user){
        return $this->isFollowing($user);
    }
}
                                                    
                                                

2- إضافة ل CONTROLLER usersController

فغادي تزيد controller سميه UsersController فيه  des fonctions لي فل index كنسترجع مستخدم وكنرسلوا للملف index ديال المستخدمين ولي غادي نزيدوه من بعد.

ثم عندي ل fonction follow لي كتمكن المستخدم من متابعة مستخدم آخر بعد التاكد بانه ممتابعش داك المستخدم من قبل وعندي ايضا ل fonction unfollow لي كتمكن من إلغاء متابعة مستخدم لمستخدم آخر.

الكود ديال الملف UsersController.php هو : 

                                                        
                                                            //
<?php

namespace App\Http\Controllers;
use App\User;
use Illuminate\Http\Request;

class UsersController extends Controller
{
    //
    public function index(User $user){
        return view('users.index',compact('user'));
    }
    public function follow(Request $request,User $user){
        if($request->user()->canFollow($user)){
            $request->user()->following()->attach($user->id);
        }
        return redirect()->back();
    }
    public function unfollow(Request $request,User $user){
        if($request->user()->canUnfollow($user)){
            $request->user()->following()->detach($user->id);
        }
        return redirect()->back();
    }
}
                                                        
                                                    

3- إضافة ل model post.php

فغادي تزيد model جديد سميه Post.php لي فيه عندي العلاقة ما بين tweet والمستخدم فهنا كنقول بلي كل tweet خاصة بمستخدم.

الكود ديال الملف Post.php هو : 

                                                        
                                                            //
<?php

namespace App;
use Carbon;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    //
    protected $fillable = ['body'];

    public function user(){
        return $this->belongsTo('App\User');
    }
}
                                                        
                                                    

4- إضافة الملف الخاص بعرض مستخدم

ف dossier views زيد dossier جديد سميه users فيه غادي تزيد ملف سميه index.blade.php لي غادي يمكن من عرض بروفيل المستخدم فانا هنا عرضت فقط الإسم ممكن تزيد لي بغيتي.

منبعد كنتحقق بلي المستخدم ماشي هو صاحب البروفيل يلا مكانش كنعرض زر إضافة المتابعة  يلا كان ممتابعش هاد المستخدم أو إلغاء المتابعة ديال المستخدم في حالة مكان متابعو من قبل.

الكود لي زدنا فالملف index.blade.php هو :

                                                        
                                                            //
@extends('layouts.app')

@section('content')
<div class="container">
    {{$user->username}}
    <br>
    <hr>
    @if(Auth::user()->isNotTheUser($user))
        @if(Auth::user()->isFollowing($user))
            <a href="{{route('user.unfollow',$user)}}">désabonner</a>
        @else
            <a href="{{route('user.follow',$user)}}">s'abonner</a>
        @endif
    @endif
</div>
@endsection