Merge pull request #20 from tomatophp/develop

add like feature and share buttons
tomatophp · Mar 27, 2024 · 2cedb40 · 2cedb40
2 parents a799b7e + 0e5c16b
commit 2cedb40
Show file tree

Hide file tree

Showing 21 changed files with 448 additions and 8 deletions.
diff --git a/Modules/CircleXO/App/Http/Controllers/CircleXOController.php b/Modules/CircleXO/App/Http/Controllers/CircleXOController.php
@@ -36,8 +36,6 @@ public function verify(Account $account)
         return redirect()->back();
     }
 
-
-
     public function sponsoring($username)
     {
         $account = Account::where('username', $username)->first();
@@ -70,6 +68,9 @@ public function post($username, $post)
                 ->first();
 
             if($post){
+                if(auth('accounts')->user()){
+                    auth('accounts')->user()->view($post);
+                }
                 return view('circle-xo::post', compact('account', 'post'));
             }
             else {
@@ -147,4 +148,50 @@ public function profile($username, Request $request)
             abort(404);
         }
     }
+
+    public function like($username, $post)
+    {
+        $account = Account::where('username', $username)->first();
+        if($account){
+            $post = AccountListing::where('account_id', $account->id)
+                ->where('type', 'post')
+                ->where('id', $post)
+                ->first();
+
+            if($post){
+                auth('accounts')->user()->like($post);
+
+                return back();
+            }
+            else {
+                abort(404);
+            }
+        }
+        else {
+            abort(404);
+        }
+    }
+
+    public function unlike($username, $post)
+    {
+        $account = Account::where('username', $username)->first();
+        if($account){
+            $post = AccountListing::where('account_id', $account->id)
+                ->where('type', 'post')
+                ->where('id', $post)
+                ->first();
+
+            if($post){
+                auth('accounts')->user()->unlike($post);
+
+                return back();
+            }
+            else {
+                abort(404);
+            }
+        }
+        else {
+            abort(404);
+        }
+    }
 }
diff --git a/Modules/CircleXO/App/Http/Controllers/ProfileController.php b/Modules/CircleXO/App/Http/Controllers/ProfileController.php
@@ -61,6 +61,11 @@ public function following(Request $request)
         return view('circle-xo::profile.following');
     }
 
+    public function followers(Request $request)
+    {
+        return view('circle-xo::profile.followers');
+    }
+
     public function messages(Request $request)
     {
         return view('circle-xo::profile.messages', [

diff --git a/Modules/CircleXO/App/Models/AccountListing.php b/Modules/CircleXO/App/Models/AccountListing.php
@@ -6,6 +6,7 @@
 use Illuminate\Database\Eloquent\Model;
 use Multicaret\Acquaintances\Traits\CanBeLiked;
 use Multicaret\Acquaintances\Traits\CanBeRated;
+use Multicaret\Acquaintances\Traits\CanBeViewed;
 use Multicaret\Acquaintances\Traits\CanLike;
 use Multicaret\Acquaintances\Traits\CanRate;
 use Spatie\MediaLibrary\HasMedia;
@@ -14,8 +15,8 @@
 class AccountListing extends Model implements HasMedia
 {
     use InteractsWithMedia;
-    use CanLike, CanBeLiked;
-    use CanRate, CanBeRated;
+    use CanBeLiked;
+    use CanBeViewed;
 
     /**
      * The attributes that are mass assignable.

diff --git a/Modules/CircleXO/App/Providers/CircleXOServiceProvider.php b/Modules/CircleXO/App/Providers/CircleXOServiceProvider.php
@@ -2,6 +2,7 @@
 
 namespace Modules\CircleXO\App\Providers;
 
+use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Blade;
 use Illuminate\Support\ServiceProvider;
 
@@ -56,6 +57,8 @@ public function registerComponents(): void
             \Modules\CircleXO\App\View\Components\ProfileButtons::class,
             \Modules\CircleXO\App\View\Components\ProfileInfo::class,
             \Modules\CircleXO\App\View\Components\ListingType::class,
+            \Modules\CircleXO\App\View\Components\Recap::class,
+            \Modules\CircleXO\App\View\Components\Share::class,
         ]);
     }
 

diff --git a/Modules/CircleXO/App/View/Components/Recap.php b/Modules/CircleXO/App/View/Components/Recap.php
@@ -0,0 +1,51 @@
+<?php
+
+namespace Modules\CircleXO\App\View\Components;
+
+use Illuminate\View\Component;
+use Illuminate\View\View;
+use ProtoneMedia\Splade\Components\Form;
+use ProtoneMedia\Splade\Components\Form\InteractsWithFormElement;
+
+class Recap extends Component
+{
+    use InteractsWithFormElement;
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct(
+        public string $name = '',
+        public string $vModel = '',
+        public string $type = 'text',
+        public string $label = '',
+        public string $validationKey = '',
+        public bool $showErrors = true,
+        public string $prepend = '',
+        public string $append = '',
+        public string $help = '',
+        public bool $alwaysEnablePrepend = false,
+        public bool $alwaysEnableAppend = false,
+        public bool $disabled = false,
+    )
+    {
+        Form::allowAttribute($name);
+    }
+
+    public function isHidden(): bool
+    {
+        return $this->type === 'hidden';
+    }
+
+
+
+    /**
+     * Get the view/contents that represent the component.
+     */
+    public function render(): View|string
+    {
+        return view('circle-xo::components.recap');
+    }
+}
diff --git a/Modules/CircleXO/App/View/Components/Share.php b/Modules/CircleXO/App/View/Components/Share.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace Modules\CircleXO\App\View\Components;
+
+use Illuminate\View\Component;
+use Illuminate\View\View;
+use Modules\CircleXO\App\Models\AccountListing;
+
+class Share extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(
+        public string $title,
+        public ?string $description=null,
+        public ?string $url=null,
+    )
+    {
+        //
+    }
+
+    /**
+     * Get the view/contents that represent the component.
+     */
+    public function render(): View|string
+    {
+        return view('circle-xo::components.share');
+    }
+}
diff --git a/Modules/CircleXO/resources/views/components/profile-buttons.blade.php b/Modules/CircleXO/resources/views/components/profile-buttons.blade.php
@@ -43,5 +43,12 @@
             </x-tomato-admin-tooltip>
         @endif
     @endif
+    <x-circle-xo-share :title="$account->username" :description="$account->bio">
+        <x-tomato-admin-tooltip :text="__('Share')">
+            <span class="bg-success-600 flex flex-col justify-center items-center text-white rounded-md shadow-md font-bold text-sm px-4 py-2 -mt-1">
+                <i class="bx bxs-share text-lg text-white"></i>
+            </span>
+        </x-tomato-admin-tooltip>
+    </x-circle-xo-share>
 </div>
 
diff --git a/Modules/CircleXO/resources/views/components/profile-card.blade.php b/Modules/CircleXO/resources/views/components/profile-card.blade.php
@@ -38,6 +38,12 @@
                 @endif
             @endif
         </div>
-        <h6 class="my-2 text-sm text-zinc-300">Joined {{ $account->created_at->diffForHumans() }}</h6>
+        <h6 class="mt-2 text-sm text-zinc-300">
+            <span>{{  $account->followers()->count() .' ' . __('Followers')}}</span> .
+            <span>{{  $account->followings()->count() .' ' . __('Following') }}</span>
+        </h6>
+        <h6 class="my-2 text-sm text-zinc-300">
+            {{__('Joined')}} {{ $account->created_at->diffForHumans() }}
+        </h6>
     </div>
 </div>
diff --git a/Modules/CircleXO/resources/views/components/profile-info.blade.php b/Modules/CircleXO/resources/views/components/profile-info.blade.php
@@ -40,5 +40,14 @@
             </h1>
         </div>
     @endif
-    <h6 class="my-2 text-sm text-zinc-300">{{__('Joined')}} {{ $account->created_at->diffForHumans() }}</h6>
+    <h6 class="my-2 text-sm text-zinc-300">
+        @if($edit)
+            <x-splade-link :href="route('profile.followers')">{{  $account->followers()->count() .' ' . __('Followers')}}</x-splade-link> .
+            <x-splade-link :href="route('profile.following')">{{  $account->followings()->count() .' ' . __('Following') }}</x-splade-link> .
+        @else
+            <span>{{  $account->followers()->count() .' ' . __('Followers')}}</span> .
+            <span>{{  $account->followings()->count() .' ' . __('Following') }}</span> .
+        @endif
+        {{__('Joined')}} {{ $account->created_at->diffForHumans() }}
+    </h6>
 </div>
diff --git a/Modules/CircleXO/resources/views/components/recap.blade.php b/Modules/CircleXO/resources/views/components/recap.blade.php
@@ -0,0 +1,6 @@
+<Recap
+    {{ $attributes->only(['v-if', 'v-show', 'class', 'v-model', 'v-bind:hasError'])->class(['hidden' => $isHidden()]) }}
+    v-model="{{ $vueModel() }}"
+    siteKey="6LfudzMnAAAAAPyF1Z1wXFBEve9KqZE8ykJEZNsR"
+>
+</Recap>
diff --git a/Modules/CircleXO/resources/views/components/share.blade.php b/Modules/CircleXO/resources/views/components/share.blade.php
@@ -0,0 +1,96 @@
+<x-tomato-admin-dropdown>
+    <x-slot:button>
+        {{ $slot }}
+    </x-slot:button>
+
+    <ShareNetwork
+        network="facebook"
+        url="{{$url ?? url()->current()}}"
+        title="{{$title}}"
+        description="{{$description}}"
+        quote="{{$description}}"
+    >
+        <div class="whitespace-nowrap block w-full px-4 py-2  text-sm leading-5 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 focus:outline-none focus:bg-zinc-100 dark:focus:bg-zinc-800 transition duration-150 ease-in-out">
+            <div class="flex justify-start gap-2 ">
+                <div class="flex flex-col items-center justify-center">
+                    <i class="bx bxl-facebook text-sm"></i>
+                </div>
+                <div class="text-sm ">
+                    {{__('Share On Facebook')}}
+                </div>
+            </div>
+        </div>
+    </ShareNetwork>
+    <ShareNetwork
+        network="twitter"
+        url="{{$url ?? url()->current()}}"
+        title="{{$title}}"
+        description="{{$description}}"
+        quote="{{$description}}"
+    >
+        <div class="whitespace-nowrap block w-full px-4 py-2  text-sm leading-5 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 focus:outline-none focus:bg-zinc-100 dark:focus:bg-zinc-800 transition duration-150 ease-in-out">
+            <div class="flex justify-start gap-2 ">
+                <div class="flex flex-col items-center justify-center">
+                    <i class="bx bxl-twitter text-sm"></i>
+                </div>
+                <div class="text-sm ">
+                    {{__('Share On Twitter')}}
+                </div>
+            </div>
+        </div>
+    </ShareNetwork>
+    <ShareNetwork
+        network="linkedin"
+        url="{{$url ?? url()->current()}}"
+        title="{{$title}}"
+        description="{{$description}}"
+        quote="{{$description}}"
+    >
+        <div class="whitespace-nowrap block w-full px-4 py-2  text-sm leading-5 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 focus:outline-none focus:bg-zinc-100 dark:focus:bg-zinc-800 transition duration-150 ease-in-out">
+            <div class="flex justify-start gap-2 ">
+                <div class="flex flex-col items-center justify-center">
+                    <i class="bx bxl-linkedin text-sm"></i>
+                </div>
+                <div class="text-sm ">
+                    {{__('Share On Linkedin')}}
+                </div>
+            </div>
+        </div>
+    </ShareNetwork>
+    <ShareNetwork
+        network="whatsapp"
+        url="{{$url ?? url()->current()}}"
+        title="{{$title}}"
+        description="{{$description}}"
+        quote="{{$description}}"
+    >
+        <div class="whitespace-nowrap block w-full px-4 py-2  text-sm leading-5 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 focus:outline-none focus:bg-zinc-100 dark:focus:bg-zinc-800 transition duration-150 ease-in-out">
+            <div class="flex justify-start gap-2 ">
+                <div class="flex flex-col items-center justify-center">
+                    <i class="bx bxl-whatsapp text-sm"></i>
+                </div>
+                <div class="text-sm ">
+                    {{__('Share On Whatsapp')}}
+                </div>
+            </div>
+        </div>
+    </ShareNetwork>
+    <ShareNetwork
+        network="telegram"
+        url="{{$url ?? url()->current()}}"
+        title="{{$title}}"
+        description="{{$description}}"
+        quote="{{$description}}"
+    >
+        <div class="whitespace-nowrap block w-full px-4 py-2  text-sm leading-5 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 focus:outline-none focus:bg-zinc-100 dark:focus:bg-zinc-800 transition duration-150 ease-in-out">
+            <div class="flex justify-start gap-2 ">
+                <div class="flex flex-col items-center justify-center">
+                    <i class="bx bxl-telegram text-sm"></i>
+                </div>
+                <div class="text-sm ">
+                    {{__('Share On Telegram')}}
+                </div>
+            </div>
+        </div>
+    </ShareNetwork>
+</x-tomato-admin-dropdown>
diff --git a/Modules/CircleXO/resources/views/post.blade.php b/Modules/CircleXO/resources/views/post.blade.php
@@ -24,4 +24,49 @@
     <div class="mt-8 mx-8 lg:mx-16">
         <x-tomato-markdown-viewer style="background-color: rgb(39 39 42 / var(--tw-bg-opacity)) !important;" :content="$post->body" />
     </div>
+    @if(auth('accounts')->user())
+    <div class="flex justify-between mx-8 lg:mx-16 border border-zinc-700 bg-zinc-900 shadow-sm rounded-lg my-4 px-6 py-4">
+       <div class="flex flex-col justify-center items-center">
+           @if(!auth('accounts')->user()->hasLiked($post))
+               <x-tomato-admin-tooltip :text="__('Like')">
+                   <x-splade-link :href="route('home.posts.like', ['username' => $account->username, 'post' => $post])" method="POST" class="w-full">
+                       <div class="flex justify-start gap-2">
+                           <div class="bg-zinc-700 p-3 rounded-lg text-white flex flex-col justify-center items-center">
+                               <i class="bx bxs-like text-lg"></i>
+                           </div>
+                           <div class="flex flex-col justify-center items-center">
+                               <div>
+                                   <p>{{ $post->likers()->count() }}</p>
+                               </div>
+                           </div>
+                       </div>
+                   </x-splade-link>
+               </x-tomato-admin-tooltip>
+           @else
+               <x-tomato-admin-tooltip :text="__('Dislike')">
+                   <x-splade-link :href="route('home.posts.unlike', ['username' => $account->username, 'post' => $post])" method="POST" class="w-full flex justify-start gap-2">
+                       <div class="flex justify-start gap-2">
+                           <div class=" bg-primary-600 p-3 rounded-lg text-white flex flex-col justify-center items-center">
+                               <i class="bx bxs-like text-lg"></i>
+                           </div>
+                           <div class="flex flex-col justify-center items-center">
+                               <p>{{ $post->likers()->count() }}</p>
+                           </div>
+                       </div>
+                   </x-splade-link>
+               </x-tomato-admin-tooltip>
+           @endif
+       </div>
+
+        <div class="flex flex-col justify-center items-center">
+            <x-circle-xo-share :title="$post->title" :description="$post->description" >
+                <x-tomato-admin-tooltip :text="__('Share')">
+                    <span class="bg-success-600 flex flex-col justify-center items-center text-white rounded-md shadow-md font-bold text-sm p-3">
+                        <i class="bx bxs-share text-lg text-white"></i>
+                    </span>
+                </x-tomato-admin-tooltip>
+            </x-circle-xo-share>
+        </div>
+    </div>
+    @endif
 </x-circle-xo-public-profile-layout>