chore: updating composer and npm packages

As the other email notification, the Laravel upgrade were not correctly
implemented leading to an unchanged getFromJson to get for the language.

app/Events/RefreshPage.php

@@ -0,0 +1,53 @@
+<?php
+
+namespace App\Events;
+
+use \App\Item;
+
+use Illuminate\Broadcasting\Channel;
+use Illuminate\Broadcasting\InteractsWithSockets;
+use Illuminate\Broadcasting\PresenceChannel;
+use Illuminate\Broadcasting\PrivateChannel;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
+use Illuminate\Foundation\Events\Dispatchable;
+use Illuminate\Queue\SerializesModels;
+
+class RefreshPage implements ShouldBroadcastNow
+{
+    use Dispatchable, InteractsWithSockets, SerializesModels;
+
+    /**
+     * Item
+     *
+     * @var Item
+     */
+    public $item;
+
+
+    /**
+     * Create a new event instance.
+     *
+     * @return void
+     */
+    public function __construct(Item $item)
+    {
+        $this->item = $item;
+    }
+
+    /**
+     * Get the channels the event should broadcast on.
+     *
+     * @return \Illuminate\Broadcasting\Channel|array
+     */
+    public function broadcastOn()
+    {
+        return ['touchedItem'];
+    }
+
+    public function broadcastAs()
+    {
+        return 'RefreshPage';
+    }
+
+}

app/Events/ReturnItem.php

@@ -5,12 +5,20 @@ namespace App\Events;
 use \App\Item;
 use Illuminate\Broadcasting\InteractsWithSockets;
 use Illuminate\Broadcasting\PrivateChannel;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
 use Illuminate\Foundation\Events\Dispatchable;
 use Illuminate\Queue\SerializesModels;
 
 class ReturnItem
 {
     use Dispatchable, InteractsWithSockets, SerializesModels;
+
+
+    /**
+     * Item
+     *
+     * @var Item
+     */
     public $item;
 
     /**
@@ -32,6 +40,11 @@ class ReturnItem
      */
     public function broadcastOn()
     {
-        return new PrivateChannel('channel-name');
+        return new PrivateChannel('touchedItem');
+    }
+
+    public function broadcastAs()
+    {
+        return 'ReturnItem';
     }
 }

app/Http/Controllers/TakeController.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Events\RefreshPage;
 use App\Events\ReturnItem;
 use App\Item;
 use App\User;
@@ -32,6 +33,7 @@ class TakeController extends Controller
             );
         }
 
+        RefreshPage::dispatch($item);
         return redirect('home');
     }
 
@@ -55,7 +57,8 @@ class TakeController extends Controller
             );
         }
 
-        event(new ReturnItem($item));
+        RefreshPage::dispatch($item);
+        ReturnItem::dispatch($item);
         return redirect('home');
     }
 }

app/Http/Kernel.php

@@ -51,7 +51,7 @@ class Kernel extends HttpKernel
      *
      * @var array
      */
-    protected $routeMiddleware = [
+    protected $middlewareAliases = [
         'auth' => \App\Http\Middleware\Authenticate::class,
         'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
         'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class,

app/Http/Middleware/TrustProxies.php

@@ -2,7 +2,7 @@
 
 namespace App\Http\Middleware;
 
-use Fideloper\Proxy\TrustProxies as Middleware;
+use Illuminate\Http\Middleware\TrustProxies as Middleware;
 use Illuminate\Http\Request;
 
 class TrustProxies extends Middleware
@@ -19,5 +19,10 @@ class TrustProxies extends Middleware
      *
      * @var int
      */
-    protected $headers = Request::HEADER_X_FORWARDED_ALL;
+    protected $headers =
+        Request::HEADER_X_FORWARDED_FOR |
+        Request::HEADER_X_FORWARDED_HOST |
+        Request::HEADER_X_FORWARDED_PORT |
+        Request::HEADER_X_FORWARDED_PROTO |
+        Request::HEADER_X_FORWARDED_AWS_ELB;
 }

app/Mail/ItemAvailable.php

@@ -32,7 +32,7 @@ class ItemAvailable extends Mailable
     public function build()
     {
         return $this->subject(
-            \Lang::getFromJson(
+            \Lang::get(
                 ':itemname is available!',
                 ['itemname' => $this->item->name]
             )

app/Providers/AuthServiceProvider.php

@@ -22,7 +22,6 @@ class AuthServiceProvider extends ServiceProvider
      */
     public function boot()
     {
-        $this->registerPolicies();
 
         //
     }

composer.json

@@ -5,23 +5,24 @@
     "license": "MIT",
     "type": "project",
     "require": {
-        "php": "^7.3.0",
-        "fideloper/proxy": "^4.0",
-        "laravel/framework": "^8.0",
+        "php": "^8.0.2",
+        "inertiajs/inertia-laravel": "^0.6.11",
+        "laravel/framework": "^10.0",
+        "laravel/ui": "^4.0",
         "laravel/helpers": "^1.4",
-        "laravel/tinker": "^2.0",
-        "laravel/ui": "^3.0"
+        "laravel/tinker": "^2.4.1",
+        "pusher/pusher-php-server": "^7.2"
     },
     "require-dev": {
         "beyondcode/laravel-dump-server": "^1.0",
         "filp/whoops": "^2.0",
         "fzaninotto/faker": "^1.4",
         "mockery/mockery": "^1.0",
-        "nunomaduro/collision": "^5.0",
-        "nunomaduro/larastan": "^0.7.4",
-        "nunomaduro/phpinsights": "^1.14",
-        "phpstan/phpstan": "^0.12.85",
-        "phpunit/phpunit": "^9.0"
+        "nunomaduro/collision": "^7.0",
+        "nunomaduro/larastan": "^2.9.5",
+        "nunomaduro/phpinsights": "*",
+        "phpstan/phpstan": "^1.10.66",
+        "phpunit/phpunit": "^10.0"
     },
     "autoload": {
         "classmap": [
@@ -58,8 +59,11 @@
     "config": {
         "preferred-install": "dist",
         "sort-packages": true,
-        "optimize-autoloader": true
+        "optimize-autoloader": true,
+        "allow-plugins": {
+            "dealerdirect/phpcodesniffer-composer-installer": true
+        }
     },
-    "minimum-stability": "dev",
+    "minimum-stability": "stable",
     "prefer-stable": true
 }

config/app.php

@@ -156,7 +156,7 @@ return [
          */
         App\Providers\AppServiceProvider::class,
         App\Providers\AuthServiceProvider::class,
-        // App\Providers\BroadcastServiceProvider::class,
+        App\Providers\BroadcastServiceProvider::class,
         App\Providers\EventServiceProvider::class,
         App\Providers\RouteServiceProvider::class,
 

database/migrations/2022_11_13_183613_create_jobs_table.php

@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('jobs', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->string('queue')->index();
+            $table->longText('payload');
+            $table->unsignedTinyInteger('attempts');
+            $table->unsignedInteger('reserved_at')->nullable();
+            $table->unsignedInteger('available_at');
+            $table->unsignedInteger('created_at');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('jobs');
+    }
+};

package.json

@@ -1,26 +1,26 @@
 {
     "private": true,
     "scripts": {
-        "dev": "npm run development",
-        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch": "npm run development -- --watch",
-        "watch-poll": "npm run watch -- --watch-poll",
-        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+        "dev": "vite",
+        "build": "vite build"
     },
     "devDependencies": {
-        "axios": "^0.21",
+        "axios": "^1.1.3",
         "bootstrap": "^4.6.0",
         "cross-env": "^5.2.1",
         "jquery": "^3.5.1",
-        "laravel-mix": "^6.0.18",
+        "laravel-echo": "^1.14.1",
+        "laravel-vite-plugin": "^0.7.0",
         "lodash": "^4.17.21",
         "popper.js": "^1.16.1",
+        "postcss": "^8.4.19",
+        "pusher-js": "^7.4.1",
         "resolve-url-loader": "^3.1.3",
-        "sass": "^1.32.12",
+        "sass": "^1.56.1",
         "sass-loader": "^8.0.2",
-        "vue": "^2.6.12",
-        "vue-template-compiler": "^2.6.12"
+        "vite": "^3.2.3"
+    },
+    "dependencies": {
+        "moment": "^2.29.4"
     }
 }

public/build/assets/pusher.a7756fcc.js

@@ -0,0 +1 @@
+import"https://js.pusher.com/7.2/pusher.min.js";var n=new Pusher("93b3e504421787295454",{cluster:"us2"}),o=n.subscribe("touchedItem");o.bind("RefreshPage",function(e){window.location.reload(),console.log(JSON.stringify(e))});

public/build/manifest.json

@@ -0,0 +1,12 @@
+{
+  "resources/js/app.js": {
+    "file": "assets/app.4993c47e.js",
+    "src": "resources/js/app.js",
+    "isEntry": true
+  },
+  "resources/js/pusher.js": {
+    "file": "assets/pusher.a7756fcc.js",
+    "src": "resources/js/pusher.js",
+    "isEntry": true
+  }
+}

public/mix-manifest.json

@@ -1,4 +1 @@
-{
-    "/js/app.js": "/js/app.js",
-    "/css/app.css": "/css/app.css"
-}
+{}

resources/js/app.js

@@ -5,9 +5,10 @@
  * building robust, powerful web applications using Vue and Laravel.
  */
 
-require('./bootstrap');
+import './bootstrap';
+import moment from "moment";
 
-window.Vue = require('vue');
+// window.Vue = require('vue');
 
 /**
  * Next, we will create a fresh Vue application instance and attach it to
@@ -15,8 +16,59 @@ window.Vue = require('vue');
  * or customize the JavaScript scaffolding to fit your unique needs.
  */
 
-Vue.component('example-component', require('./components/ExampleComponent.vue'));
+// Vue.component('example-component', require('./components/ExampleComponent.vue'));
 
-const app = new Vue({
-    el: '#app'
+// const app = new Vue({
+//     el: '#app'
+// });
+
+function updateTime() {
+    var dates = document.getElementsByClassName("takenItemDate");
+    for (let i = 0; i < dates.length; i++) {
+        let time = dates.item(i).innerText;
+        let fromNow = moment(time).fromNow();
+        let id = "itemPassedTime_" + dates.item(i).id;
+        document.getElementById(id).innerText = fromNow;
+    }
+}
+updateTime();
+setInterval(updateTime, 1 * 60 * 1000);
+
+
+function setFaviconNumber(number) {
+    var canvas = document.createElement('canvas'),
+        ctx,
+        img = document.createElement('img'),
+        link = document.getElementById('favicon').cloneNode(true);
+
+    if (canvas.getContext) {
+      canvas.height = canvas.width = 48; // set the size
+      ctx = canvas.getContext('2d');
+      img.onload = function () { // once the image has loaded
+        ctx.drawImage(this, 0, 0);
+        ctx.font = 'bold 35px "helvetica", sans-serif';
+        ctx.fillStyle = '#ffff66';
+        ctx.fillText(number, 3, 25);
+        link.href = canvas.toDataURL('image/png');
+        document.body.appendChild(link);
+      };
+      img.src = 'favicon.png';
+    }
+};
+
+usedItems = document.getElementById("usedItems").innerText;
+setFaviconNumber(usedItems);
+
+/**
+ * Source:
+ * https://www.designcise.com/web/tutorial/how-to-detect-if-the-browser-tab-is-active-or-not-using-javascript
+ */
+document.addEventListener('visibilitychange', function (event) {
+    if (document.hidden) {
+        console.log('not visible');
+    } else {
+        updateTime();
+    }
 });
+
+

resources/js/bootstrap.js

@@ -1,18 +1,5 @@
-
-window._ = require('lodash');
-window.Popper = require('popper.js').default;
-
-/**
- * We'll load jQuery and the Bootstrap jQuery plugin which provides support
- * for JavaScript based Bootstrap features such as modals and tabs. This
- * code may be modified to fit the specific needs of your application.
- */
-
-try {
-    window.$ = window.jQuery = require('jquery');
-
-    require('bootstrap');
-} catch (e) {}
+import _ from 'lodash';
+window._ = _;
 
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
@@ -20,37 +7,28 @@ try {
  * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
 
-window.axios = require('axios');
+import axios from 'axios';
+window.axios = axios;
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
-/**
- * Next we will register the CSRF Token as a common header with Axios so that
- * all outgoing HTTP requests automatically have it attached. This is just
- * a simple convenience so we don't have to attach every token manually.
- */
-
-let token = document.head.querySelector('meta[name="csrf-token"]');
-
-if (token) {
-    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
-} else {
-    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
-}
-
 /**
  * Echo exposes an expressive API for subscribing to channels and listening
  * for events that are broadcast by Laravel. Echo and event broadcasting
  * allows your team to easily build robust real-time web applications.
  */
 
-// import Echo from 'laravel-echo'
+import Echo from 'laravel-echo';
 
-// window.Pusher = require('pusher-js');
+import Pusher from 'pusher-js';
+window.Pusher = Pusher;
 
-// window.Echo = new Echo({
-//     broadcaster: 'pusher',
-//     key: process.env.MIX_PUSHER_APP_KEY,
-//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
-//     encrypted: true
-// });
+window.Echo = new Echo({
+    broadcaster: 'pusher',
+    key: import.meta.env.VITE_PUSHER_APP_KEY,
+    wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
+    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
+    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
+    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
+    enabledTransports: ['ws', 'wss'],
+});

resources/js/components/ExampleComponent.vue

@@ -1,23 +0,0 @@
-<template>
-    <div class="container">
-        <div class="row justify-content-center">
-            <div class="col-md-8">
-                <div class="card card-default">
-                    <div class="card-header">Example Component</div>
-
-                    <div class="card-body">
-                        I'm an example component.
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        mounted() {
-            console.log('Component mounted.')
-        }
-    }
-</script>

resources/js/pusher.js

@@ -0,0 +1,10 @@
+import 'https://js.pusher.com/7.2/pusher.min.js';
+    var pusher = new Pusher('93b3e504421787295454', {
+      cluster: 'us2'
+    });
+
+    var channel = pusher.subscribe('touchedItem');
+    channel.bind('RefreshPage', function(data) {
+        window.location.reload();
+        console.log(JSON.stringify(data));
+    });

resources/views/home.blade.php

@@ -2,15 +2,7 @@
 
 @section('content')
 
-<script type="text/javascript">    
-    setInterval(
-        function() {
-                if (!document.hasFocus() ) {
-                    window.location.reload(true);
-                }
-        },
-        2*60000); //NOTE: period is passed in milliseconds
-</script>
+@vite('resources/js/pusher.js')
 
 <div class="container">
     <div class="row justify-content-center">
@@ -53,4 +45,4 @@
         </div>
     </div>
 </div>
-@endsection
+@endsection

resources/views/home/usedItem.blade.php

@@ -1,6 +1,7 @@
 @if ($item->used_by == \Auth::id())
 <form action="/take" method="POST" class="form-inline">
-    <em class="pr-sm-2 ml-auto">{{\Carbon\Carbon::parse($item->updated_at)->diffForHumans()}}</em>
+    <em id="itemPassedTime_{{$item->id}}" class="pr-sm-2 ml-auto">{{\Carbon\Carbon::parse($item->updated_at)->diffForHumans()}}</em>
+    <div hidden class="takenItemDate" id="{{$item->id}}">{{\Carbon\Carbon::parse($item->updated_at)->format('Y-m-d\TH:i:s.uP')}}</div>
     <div class="w-100 d-xm-block d-sm-none"></div>
     {{ csrf_field() }}
     @method('DELETE')
@@ -16,8 +17,9 @@
         @if ($item->waiting_user_id && $item->waiting_user_id != \Auth::id())
         <strong>> {{str_limit($users[$item->waiting_user_id], 15, '...')}}</strong>
         @endif
-        <small>({{$item->updated_at->diffForHumans()}})</small>
+        <small id="itemPassedTime_{{$item->id}}">({{$item->updated_at->diffForHumans()}})</small>
     </em>
+    <div hidden class="takenItemDate" id="{{$item->id}}">{{$item->updated_at->format('Y-m-d\TH:i:s.uP')}}</div>
     <div class="w-100 d-xm-block d-sm-none"></div>
     {{ csrf_field() }}
     <input type="hidden" name="item" value="{{$item->id}}">
@@ -28,4 +30,4 @@
     <button type="submit" class="btn btn-sm btn-outline-secondary ml-auto">@lang('home.alert_me')</button>
     @endif
 </form>
-@endif
+@endif

resources/views/layouts/app.blade.php

@@ -11,7 +11,7 @@
     <title>{{ config('app.name', 'Laravel') }} {{ isset($usedItems) && $usedItems > 0 ? "(${usedItems})" : '' }}</title>
 
     <!-- Scripts -->
-    <script src="{{ asset('js/app.js') }}" defer></script>
+    @vite('resources/js/app.js')
 
     <!-- Fonts -->
     <link rel="dns-prefetch" href="https://fonts.gstatic.com">
@@ -19,9 +19,12 @@
 
     <!-- Styles -->
     <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+
+    <link id="favicon" rel="icon" type="image/png" href="favicon.png" /> 
 </head>
 
 <body>
+    <div hidden id="usedItems">{{ isset($usedItems) && $usedItems > 0 ? $usedItems : '' }}</div>
     <div id="app">
         <nav class="navbar navbar-expand-md navbar-light navbar-laravel">
             <div class="container">
@@ -88,4 +91,4 @@
     </div>
 </body>
 
-</html>
+</html>

resources/views/welcome.blade.php

@@ -5,6 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <title>Share It</title>
+        <link id="favicon" rel="icon" type="image/png" href="favicon.png" /> 
 
         <!-- Fonts -->
         <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">

routes/channels.php

@@ -14,3 +14,8 @@
 Broadcast::channel('App.User.{id}', function ($user, $id) {
     return (int) $user->id === (int) $id;
 });
+
+Broadcast::channel('touchedItem', function ($user) {
+    return true;
+    /* return $user->id === Item::findOrNew($itemId)->users->find($user->id)->id; */
+});

ssh_homestead.sh

@@ -1 +1,2 @@
-ssh homestead -t "cd code/Bruno\ Fontes/shareit; bash --login"
+echo "Homestead password is: vagrant"
+ssh homestead -t "cd shareit; bash --login"

start_vagrant.sh

@@ -1,4 +1,7 @@
 #!/bin/zsh
-builtin cd ~/development/laravelHomestead && /usr/bin/vagrant up && builtin cd -
-~/Apps/firefox/firefox-bin http://shareit.test
-~/Apps/firefox/firefox-bin https://mailtrap.io/inboxes/455614/messages
+export VAGRANT_CWD=/home/bruno/development/Homestead/
+vagrant up
+eval $DEV_BROWSER http://shareit.test \
+https://mailtrap.io/inboxes/455614/messages \
+https://dashboard.pusher.com/apps/1505830/console \
+&

updateCompserNPM.sh

@@ -1 +1 @@
-ssh homestead -t 'cd code/Bruno\ Fontes/shareit; echo; echo -n "Press enter to update Composer..."; read; composer update; echo; echo -n "Press enter to update NPM..."; read; npm update; echo; echo -n "Press enter to exit..."; read'
+ssh homestead -t 'cd shareit; /usr/local/bin/composer update; npm update; echo; echo -n "Press enter to exit..."; read'

vite.config.js

@@ -0,0 +1,28 @@
+import { defineConfig } from 'vite';
+import laravel from 'laravel-vite-plugin';
+// import react from '@vitejs/plugin-react';
+// import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+    plugins: [
+        laravel([
+            // 'resources/css/app.css',
+            'resources/js/app.js',
+            'resources/js/pusher.js',
+        ]),
+        // react(),
+        // vue({
+        //     template: {
+        //         transformAssetUrls: {
+        //             base: null,
+        //             includeAbsolute: false,
+        //         },
+        //     },
+        // }),
+    ],
+    resolve: {
+        alias: {
+            '@': '/resources/js'
+        }
+    }
+});

webpack.mix.js

@@ -1,15 +0,0 @@
-const mix = require('laravel-mix');
-
-/*
- |--------------------------------------------------------------------------
- | Mix Asset Management
- |--------------------------------------------------------------------------
- |
- | Mix provides a clean, fluent API for defining some Webpack build steps
- | for your Laravel application. By default, we are compiling the Sass
- | file for the application as well as bundling up all the JS files.
- |
- */
-
-mix.js('resources/js/app.js', 'public/js')
-   .sass('resources/sass/app.scss', 'public/css');