Api Client implementation. Route endpoints for tags and users.

laravel-portugal · Sep 19, 2020 · 8fed86b · 8fed86b
1 parent f8961fa
commit 8fed86b
Show file tree

Hide file tree

Showing 11 changed files with 201 additions and 159 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,3 +16,12 @@ Todos:
 - Backend -> api
 - Testes Dusk
 
+Filtrar por categoria/tag
+Filtar por User (handle)
+Pesquisa
+Link precisa de campo `title`.
+Imagem do Link
+ - Meta info do link
+ - Fallback para imagem de snapshot
+Implementar extensão de browser para partilhar
+
diff --git a/app/ClientInterface.php b/app/ClientInterface.php
@@ -0,0 +1,8 @@
+<?php
+
+namespace App;
+
+interface ClientInterface
+{
+    public function getRecentLinks();
+}
diff --git a/app/FakeClient.php b/app/FakeClient.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace App;
+
+class FakeClient implements ClientInterface
+{
+    public function getRecentLinks()
+    {
+        return collect([
+            [
+                'id'           => 1,
+                'title'        => 'Boost your conversion rate',
+                'description'  => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.',
+                'author_name'  => 'Roel Aufderhar',
+                'author_email' => '[email protected]',
+                'cover_image'  => 'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80',
+                'created_at'   => '2020-09-19 16:49:31.229524',
+            ],
+            [
+                'id'           => 2,
+                'title'        => 'How to use search engine optimization to drive sales',
+                'description'  => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.',
+                'author_name'  => 'Brenna Goyette',
+                'author_email' => '[email protected]',
+                'cover_image'  => 'https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80',
+                'created_at'   => '2020-09-19 16:49:31.229524',
+            ],
+            [
+                'id'           => 3,
+                'title'        => 'Improve your customer experience',
+                'description'  => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.',
+                'author_name'  => 'Daniela Metz',
+                'author_email' => '[email protected]',
+                'cover_image'  => 'https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80',
+                'created_at'   => '2020-09-19 16:49:31.229524',
+            ],
+        ]);
+    }
+}
diff --git a/app/Http/Livewire/RecentLinks.php b/app/Http/Livewire/RecentLinks.php
@@ -2,42 +2,22 @@
 
 namespace App\Http\Livewire;
 
+use App\ClientInterface;
 use Livewire\Component;
 
 class RecentLinks extends Component
 {
-    public string $title = 'From the blog';
-    public string $description = 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa libero labore natus atque, ducimus sed.';
+    public string $title = 'Links recentes.';
+    public string $description = 'Todos juntos criamos diariamente um base de conhecimento.';
+    public array $links;
+    private ClientInterface $client;
 
-    public array $links = [
-        [
-            'id'           => 1,
-            'title'        => 'Boost your conversion rate',
-            'description'  => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.',
-            'author_name'  => 'Roel Aufderhar',
-            'author_email' => '[email protected]',
-            'cover_image'  => 'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80',
-            'created_at'   => '2020-09-19 16:49:31.229524',
-        ],
-        [
-            'id'           => 2,
-            'title'        => 'How to use search engine optimization to drive sales',
-            'description'  => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.',
-            'author_name'  => 'Brenna Goyette',
-            'author_email' => '[email protected]',
-            'cover_image'  => 'https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80',
-            'created_at'   => '2020-09-19 16:49:31.229524',
-        ],
-        [
-            'id'           => 3,
-            'title'        => 'Improve your customer experience',
-            'description'  => 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius, ut atque fuga culpa, similique sequi cum eos quis dolorum.',
-            'author_name'  => 'Daniela Metz',
-            'author_email' => '[email protected]',
-            'cover_image'  => 'https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80',
-            'created_at'   => '2020-09-19 16:49:31.229524',
-        ],
-    ];
+    public function __construct()
+    {
+        parent::__construct();
+        $this->client = resolve(ClientInterface::class);
+        $this->links = $this->client->getRecentLinks()->all();
+    }
 
     public function render()
     {

diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php
@@ -2,6 +2,8 @@
 
 namespace App\Providers;
 
+use App\ClientInterface;
+use App\FakeClient;
 use Illuminate\Support\ServiceProvider;
 
 class AppServiceProvider extends ServiceProvider
@@ -13,7 +15,12 @@ class AppServiceProvider extends ServiceProvider
      */
     public function register()
     {
-        //
+        $this->app->bind(ClientInterface::class, function($app) {
+            if ($this->app->environment('local')) {
+                return new FakeClient();
+            }
+            throw new \DomainException('Implement real Api Client');
+        });
     }
 
     /**

diff --git a/app/View/Components/NavbarMenu.php b/app/View/Components/NavbarMenu.php
@@ -8,7 +8,6 @@ class NavbarMenu extends Component
 {
     public $links = [
         'Welcome' => '/',
-        'Login' => '/login',
         'Submit link' => '/submit-link',
     ];
 

diff --git a/composer.json b/composer.json
@@ -8,7 +8,7 @@
     ],
     "license": "MIT",
     "require": {
-        "php": "^7.3",
+        "php": "^7.4",
         "fideloper/proxy": "^4.2",
         "fruitcake/laravel-cors": "^2.0",
         "guzzlehttp/guzzle": "^7.0.1",

diff --git a/resources/views/components/hero.blade.php b/resources/views/components/hero.blade.php
@@ -0,0 +1,113 @@
+<div class="relative bg-gray-50 overflow-hidden">
+    <div class="hidden sm:block sm:absolute sm:inset-y-0 sm:h-full sm:w-full">
+        <div class="relative h-full max-w-screen-xl mx-auto">
+            <svg class="absolute right-full transform translate-y-1/4 translate-x-1/4 lg:translate-x-1/2" width="404" height="784" fill="none" viewBox="0 0 404 784">
+                <defs>
+                    <pattern id="f210dbf6-a58d-4871-961e-36d5016a0f49" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+                        <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor"/>
+                    </pattern>
+                </defs>
+                <rect width="404" height="784" fill="url(#f210dbf6-a58d-4871-961e-36d5016a0f49)"/>
+            </svg>
+            <svg class="absolute left-full transform -translate-y-3/4 -translate-x-1/4 md:-translate-y-1/2 lg:-translate-x-1/2" width="404" height="784" fill="none" viewBox="0 0 404 784">
+                <defs>
+                    <pattern id="5d0dd344-b041-4d26-bec4-8d33ea57ec9b" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+                        <rect x="0" y="0" width="4" height="4" class="text-gray-200" fill="currentColor"/>
+                    </pattern>
+                </defs>
+                <rect width="404" height="784" fill="url(#5d0dd344-b041-4d26-bec4-8d33ea57ec9b)"/>
+            </svg>
+        </div>
+    </div>
+
+    <div class="relative pt-6 pb-12 sm:pb-16 md:pb-20 lg:pb-28 xl:pb-32">
+        <div class="max-w-screen-xl mx-auto px-4 sm:px-6">
+            <nav class="relative flex items-center justify-between sm:h-10 md:justify-center">
+                <div class="flex items-center flex-1 md:absolute md:inset-y-0 md:left-0">
+                    <div class="flex items-center justify-between w-full md:w-auto">
+                        <a href="/" aria-label="Home">
+                            <img class="h-8 w-auto sm:h-10" src="https://tailwindui.com/img/logos/workflow-mark-on-white.svg" alt="Logo">
+                        </a>
+                        <div class="-mr-2 flex items-center md:hidden">
+                            <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" id="main-menu" aria-label="Main menu" aria-haspopup="true">
+                                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <x-navbar-menu></x-navbar-menu>
+                <div class="hidden md:absolute md:flex md:items-center md:justify-end md:inset-y-0 md:right-0">
+          <span class="inline-flex rounded-md shadow">
+            <a href="/login" class="inline-flex items-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-indigo-600 bg-white hover:text-indigo-500 focus:outline-none focus:border-indigo-300 focus:shadow-outline-indigo active:bg-gray-50 active:text-indigo-700 transition duration-150 ease-in-out">
+              Log in
+            </a>
+          </span>
+                </div>
+            </nav>
+        </div>
+
+        <!--
+          Mobile menu, show/hide based on menu open state.
+
+          Entering: "duration-150 ease-out"
+            From: "opacity-0 scale-95"
+            To: "opacity-100 scale-100"
+          Leaving: "duration-100 ease-in"
+            From: "opacity-100 scale-100"
+            To: "opacity-0 scale-95"
+        -->
+        <div class="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
+            <div class="rounded-lg shadow-md">
+                <div class="rounded-lg bg-white shadow-xs overflow-hidden" role="menu" aria-orientation="vertical" aria-labelledby="main-menu">
+                    <div class="px-5 pt-4 flex items-center justify-between">
+                        <div>
+                            <img class="h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-on-white.svg" alt="">
+                        </div>
+                        <div class="-mr-2">
+                            <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out" aria-label="Close menu">
+                                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="px-2 pt-2 pb-3 hidden">
+                        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Product</a>
+                        <a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Features</a>
+                        <a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Marketplace</a>
+                        <a href="#" class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-50 focus:outline-none focus:text-gray-900 focus:bg-gray-50 transition duration-150 ease-in-out" role="menuitem">Company</a>
+                    </div>
+                    <div>
+                        <a href="#" class="block w-full px-5 py-3 text-center font-medium text-indigo-600 bg-gray-50 hover:bg-gray-100 hover:text-indigo-700 focus:outline-none focus:bg-gray-100 focus:text-indigo-700 transition duration-150 ease-in-out" role="menuitem">
+                            Log in
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <main class="mt-10 mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 xl:mt-28">
+            <div class="text-center">
+                <h2 class="text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl">
+                    Laravel
+                    <br class="xl:hidden">
+                    <span class="text-indigo-600">
+                            Portugal
+                        </span>
+                </h2>
+                <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
+                    Partilha a tua "dica" com a comunidade. A tua informação é importante para todos. Constrói a comunidade LaravelPT enviando as tuas dicas mais inovadoras.
+                </p>
+                <div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
+                    <div class="rounded-md shadow">
+                        <a href="/submit-link" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10">
+                            Submete um link
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+</div>
diff --git a/resources/views/livewire/link.blade.php b/resources/views/livewire/link.blade.php
@@ -5,7 +5,7 @@
     <div class="flex-1 bg-white p-6 flex flex-col justify-between">
         <div class="flex-1">
             <p class="text-sm leading-5 font-medium text-indigo-600">
-                <a href="#" class="hover:underline">
+                <a href="{{ route('tag.links', [ 'tag' => 'blog']) }}" class="hover:underline">
                     Blog
                 </a>
             </p>
@@ -28,7 +28,7 @@
             </div>
             <div class="ml-3">
                 <p class="text-sm leading-5 font-medium text-gray-900">
-                    <a href="#" class="hover:underline">
+                    <a href="{{ route('user.links', [ 'username' => 'my_username']) }}" class="hover:underline">
                         {{ $link['author_name']}}
                     </a>
                 </p>