DEV Community: mohamed benhida

TIP - Import Vuejs Modules at once.

mohamed benhida — Fri, 16 Mar 2018 21:48:47 +0000

Hey in this Post We will see how can we add multiple Vuejs modules at once.

We all needed to import modules each time we create one on our modules folder like this (is from a real world project).

store/index.js

    import Vue from "vue";
    import Vuex from "vuex";

    import auth from "./modules/auth";
    import rows from "./modules/rows";
    import rooms from "./modules/rooms";
    import students from "./modules/students";

    Vue.use(Vuex);

    export default new Vuex.Store({
      modules: {
        auth,
        rows,
        rooms,
        students
      }
    });

Like you see in the example above we have a 10 extra lines in our code. 5 lines to import the modules and 5 others to declare them on modules object.

Let's see now how can we reduce this 10 lines to 1 line So to do that we need to create an index.js file on modules folder that can listen to all the .js files inside modules folder and import them one by one.

modules/index.js

    import camelCase from "lodash/camelCase";
    const requireModule = require.context(".", false, /\.js$/); //extract js files inside modules folder
    const modules = {};

    requireModule.keys().forEach(fileName => {
      if (fileName === "./index.js") return; //reject the index.js file

      const moduleName = camelCase(fileName.replace(/(\.\/|\.js)/g, "")); //

      modules[moduleName] = requireModule(fileName).default;
    });
    export default modules;

modules/auth.js

    import auth from "../api/auth";

    const state = {
      isLoggedIn: !!localStorage.getItem("token"),
    };

    const getters = {
      isLoggedIn: state => {
        return state.isLoggedIn;
      }
    };

    const actions = {
      async loginUser({ commit }, data) {
        return await auth.login(data, data => {
          localStorage.setItem("token", data.access_token);
          commit("loginUser");
        });
      },
      async registerUser({ commit }, data) {
        await auth.register(data, data => {
          localStorage.setItem("token", data.access_token);
          commit("loginUser");
          return data;
        });
      },
      async logoutUser({ commit }) {
        return await auth.logout(data => {
          localStorage.removeItem("token");
          commit("logoutUser");
        });
      }
    };

    const mutations = {
      loginUser: state => {
        state.isLoggedIn = true;
      },
      logoutUser: state => {
        state.isLoggedIn = false;
      }
    };
    export default {
      state,
      actions,
      mutations,
      getters
    };

Now we go back to our store/index.js and just import "./modules" equivalent to "./modules/index.js"

store/index.js

    import Vue from "vue";
    import Vuex from "vuex";

    import modules from "./modules";

    Vue.use(Vuex);

    export default new Vuex.Store({
      modules // Equivalent to => modules : modules(imported)
    });

You can see now how our store/index.js is clean.

For more informations check chris vfritz repo.

The Magic Laravel Helper tap()

mohamed benhida — Thu, 01 Mar 2018 21:12:03 +0000

Hello,

In this post we will talk about how tap() helper works and where can we used in our projects.

First of all, let's talk about what tap() exactly do behind the scenes.

<?php
function tap($value, $callback = null)
    {
        if (is_null($callback)) {
            return new HigherOrderTapProxy($value);
        }

        $callback($value);

        return $value;
    }

After using tap() you must know that the very first thing we pass it is always what is going to be returned to us.

Let's work with an example so we can more see the differences. for now let's say the $callback is not null and our tap() helper is like that.

<?php
function tap($value, $callback)
    {
        $callback($value);

        return $value;
    }

Our example is that we want to update an user and in the same return the edited $user.

<?php
public function update(Request $request,User $user)
{
   $user = $user->update($param);//return boolean
}

We all know that update() returns boolean but we want it to return our edited $user so we can pass it to our json response for example.Here come the rule of tap()

<?php
public function update(Request $request,User $user)
  {
     $user = tap($user,function($user) use($request){
         $user->update($request->all());
        }); //returns Edited User
  }

We passed $user and a closure that accept $user and runs update() method.

the $callback($value); will be triggered and it will returns the $value at the end in our case it returns $user model.

But this is not helpfull it looks disgusting because we need to passe $request to closure and adding extra two lines.

so here comes the rule of a nulled $callback that will return a new HigherOrderTapProxy($value); that helps us solve the problem above.

Let's understand together what HigherOrderTapProxy($value) really does.

<?php

namespace Illuminate\Support;

class HigherOrderTapProxy
{

    public $target;

    public function __construct($target)
    {
        $this->target = $target; //target in our case is $user model
    }

    //when we call a method it will trigger this function
    public function __call($method, $parameters) 
    {
        $this->target->{$method}(...$parameters); //$user->update($parameters)

        return $this->target; //return $user;
    }
}

Like we see HigherOrderTapProxy class accept $value and each time we call a method inside this class it will trigger the __call() function then the method will apply to the $value passed then it will return it.

like you see in the comments above. now if you really understand how HigherOrderTapProxy works you can just do this and it will works.

<?php
public function update(Request $request,User $user)
 {
   $user = tap($user)->update($request->all());//return edited $user
 }

and here we have the same value with a code on one line.

I hope your enjoyed reading this article.

Reference And Copying Objects & Arrays in Javascript

mohamed benhida — Sat, 03 Feb 2018 23:48:54 +0000

We all faced that error when we want to copy an array or an object to a new variable we end up changing the original variable when we update the new one.

Arrays

So in this example we have an array variable

let array = ["John","Doe","Alex"]

we create a new variable array1 that takes the value of array

let array1 = array

console.log(array1)
//["John", "Doe", "Alex"]

Now if we modified the array1[2] for example

array1[2] = "David"

console.log(array1)
//["John", "Doe", "David"]

console.log(array)
//["John", "Doe", "David"]

We notice that if we change the array1 our original array get changed too.

So to prevent that we have a mutiple methods :

-> We could use ES6

let array = ["John","Doe","Alex"]

let array1 = [...array]

array1[2] = "David"

console.log(array1)
//["John","Doe","David"]

console.log(array)
//["John","Doe","Alex"]

-> array.slice()

let array2 = array.slice()

console.log(array2)
//["John","Doe","David"]

console.log(array)
//["John","Doe","Alex"]

-> [].concat(array)

let array3 = [].concat(array)

console.log(array3)
//["John","Doe","David"]

console.log(array)
//["John","Doe","Alex"]

Now you know how can you deal with arrays let see about objets.

Objetcs

let object = { name:"John",age:23 }

let object1 = object

console.log(object1)

//{name: "John", age: 23}
object1.age = 23

console.log(object1)
//{name: "John", age: 23}

console.log(object)
//{name: "John", age: 23}

We found the same error as the arrays if we change the new var it changes the original one too.

So let's find out how can we fix this with objects.

We could use Object.assign({},object) we pass our existing object to an empty one.

let object = { name:"John",age:23 }

let object2 = Object.assign({},object)

console.log(object2)

//{name: "John", age: 23}

object2.age = 12

console.log(object2)
//{name: "John", age: 12}

console.log(object)
//{name: "John", age: 23}

But is not all working fine if we add a second object inside the first one we will have the same error like this

let object = {person : { name:"John",age:23 } }

let object3 = Object.assign({},object)

console.log(object3)

//{person : { name:"John",age:23 } }

object3.person.name = "Doe"

console.log(object3)
//{person : { name:"Doe",age:23 } }

console.log(object)
//{person : { name:"Doe",age:23 } }

So we need to make a better is solution we convert the object to string then we parse it again using JSON.parse(JSON.stringify(object))

let object = { person : { name : "John" , age : 23 }}

let object4 = JSON.parse(JSON.stringify(object))

console.log(object4)
//{person : { name:"John",age:23 } }

object4.person.name = "Doe"

console.log(object4)
//{person : { name:"Doe",age:23 } }

console.log(object)
//{person : { name:"John",age:23 } }

I hope you enjoyed reading this post. Thanks For Reading

AutoComplete Searching With Javascript

mohamed benhida — Thu, 18 Jan 2018 20:38:03 +0000

Hey,

In this post we will talk about autosearching with using only javascript no frameworks, we will need to fetch the data from the server so we will use Laravel for this.

Our example is we want to search for contacts.

so we need to create a Contact Model php artisan make:model Contact -m

then go to database/factories/ModelFactory.php

$factory->define(App\Contact::class, function (Faker\Generator $faker)
{
    return [
        'name'    => $faker->name,
        'email'   => $faker->unique()->safeEmail,
        'company' => $faker->sentence,
        'state'   => $faker->state,
    ];
});

after we create our migration table and we migrate using this command php artisan migrate

we can now create our fake data in our console with php artisan tinker

then we create 50 fake contacts using this command factory(App\Contact::class,50)->create();

we create a link for this data

routes/web.php

Route::get('/contacts', function ()
{
    return App\Contact::all();
});

now we create our view

autosearching.blade.php

<html>
<head>
    <title>AutoSearch</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"
          integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
</head>
<body class="bg-light">
<div class="container" style="margin-top : 10%">
    <div class="row justify-content-center">
        <div class="col-4">
            <div class="bg-white">
                <div class="input-group mb-3">
                    <input type="text" placeholder="Searching ..." class="form-control input-search">
                </div>
                <div class="search">

                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

const input = document.querySelector('.input-search');

input.addEventListener('click',EnableArray);
input.addEventListener('keyup',EnableArray);

First of all with our javascript code we need to extract data from the contacts link

we use the new fetch method that return promise like axios if you ever use it. you can learn more about fetch here

const api = '/contacts';
const contacts = [];

fetch(api)
   .then(response => response.json())
   .then(blob => contacts.push(...blob));

then we need a method that can filter the contacts and get the one that resembles of the value we tape

we work with regex for the 'gi' -g is for global and -i like upercase and lowercase are the same.

the value that we search is the name and the email

function Searching(word) {
        return contacts.filter(contact => {
            const regex = new RegExp(word,'gi')
            return contact.name.match(regex) || contact.email.match(regex);
        });
    }

Now we add some events to our input we need the click event and also the keyup change event.

const input = document.querySelector('.input-search');
input.addEventListener('click',EnableArray);
input.addEventListener('keyup',EnableArray);

Finally the EnableArray that will inner the html on our empty div

function EnableArray() {
        const matches = Searching(this.value);
        const html = matches.map(match => {
            return ` <p class="p-2 d-flex flex-column border-bottom">
                        <span><small>${match.name}</small><small class="float-right">From ${match.state}</small></span>
                        <span><small>${match.email}</small></span>
                        <span><small>${match.company}</small></span>
                        </p>
                        <hr>
                    `;
        }).join('');
        search.innerHTML = html;
    }

autosearching.blade.php

If you dont want to follow all the steps there is the the full html file you can copy it directly

<html>
<head>
    <title>AutoSearch</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css"
          integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
</head>
<body class="bg-light">
<div class="container" style="margin-top : 10%">
    <div class="row justify-content-center">
        <div class="col-4">
            <div class="bg-white">
                <div class="input-group mb-3">
                    <input type="text" placeholder="Searching ..." class="form-control input-search">
                </div>
                <div class="search">

                </div>
            </div>
        </div>
    </div>
</div>
<script>
    const api = '/contacts';
    const input = document.querySelector('.input-search');
    const search = document.querySelector('.search');
    const container = document.querySelector('.container');
    const contacts = [];

    fetch(api)
        .then(response => response.json())
        .then(blob => contacts.push(...blob));

    function Searching(word) {
        return contacts.filter(contact => {
            const regex = new RegExp(word,'gi')
            return contact.name.match(regex) || contact.email.match(regex);
        });
    }

    function EnableArray() {
        const matches = Searching(this.value);
        const html = matches.map(match => {
            return ` <p class="p-2 d-flex flex-column border-bottom">
                        <span><small>${match.name}</small><small class="float-right">From ${match.state}</small></span>
                        <span><small>${match.email}</small></span>
                        <span><small>${match.company}</small></span>
                        </p>
                        <hr>
                    `;
        }).join('');
        search.innerHTML = html;
    }

    input.addEventListener('click',EnableArray);
    input.addEventListener('keyup',EnableArray);

    container.addEventListener('click',function() {
        search.innerHTML = ''
    });
</script>
</body>
</html>