Krdytkyu

I was given an opportunity to join a WordPress contractor/freelancer website and was asked to build a plugin that would list the wordpress users in the database, allow you to filter them based on their role, allow you sort them based on the display_name and the username, and have pagination.

But the response I got from them was quite blunt, with no pointers in what would have made the code better etc. I get that they have to have the best of the best, but I have been building websites for 15 years and programming for many more.

I don't comment my code. Any comments would go in git comments, methods and variables would be named in a way that it is obvious what is going on e.g. getUsers, renderScripts.

Anyway, they knocked me back and I want to be proactive by learning from this, hopefully making me a better developer in the future.

So as this is a code review site... could someone help point out why I would get a response as harsh as "pretty bad overall"? It could be I transferred my .net programming style into PHP which isn't the done thing?

//codeitwise.php

<?php

   /*

   Plugin Name: Code It Wise Test

   Plugin URI: 

   description: This is my test plugin for a certain website.

   Version: 0.1

   Author: Me

   Author URI:

   License: GPL2

   */



require(__DIR__ . 'codeitwise-admin-page.php');

class CodeItWise {



    function __construct() {        

        add_action( 'admin_menu', array( 'CodeItWise', 'codeitwise__adminMenuActions' ) );

    }



    public static function codeitwise__adminMenuActions() {

        add_menu_page( 'Code It Wise - Codeable Test', 'Code It Wise', 'manage_options', 'ciw-admin-page.php', 'CodeItWise__Admin::renderAdminPage', 'dashicons-admin-generic', 6  );       

    }

}



$ciw = new CodeItWise();



?>

//codeitwise-admin-page.php

<?php

    class CodeItWise__Admin {



        function __construct() {        

            add_action( 'admin_enqueue_scripts', 'CodeItWise__Admin::renderScripts' );

            add_action( 'wp_ajax_get_users', 'CodeItWise__Admin::getUsers' );

        }



        public static function renderAdminPage ()

        {?>

            <div class="wrap">

                <h2>Code It Wise - Codeable Test</h2>

            </div>

            <?php 

                global $wp_roles;

                $all_roles = $wp_roles->get_names();

            ?>

            <div class="tablenav top">

                <div class="alignleft">

                    <label class="screen-reader-text">Filter role</label>

                    <select name="role" js-filter-role>

                        <option value="">Roles</option>

                        <?php                       

                            foreach($all_roles as $role) 

                            {

                                echo '<option value="' . $role. '">' . $role . '</option>';

                            }

                        ?>                                              

                    </select>

                </div>

            </div>          

            <div class="wrap" js-users-container>

                <!-- the table will be loaded in here -->

            </div>

            <div class="wrap" js-pagination-container>



            </div>

            <?php

            include(__DIR__ . "handlebar-templates.html");

        }



        public static function renderScripts() {

            wp_enqueue_script('codeitwise__handlebars', plugin_dir_url(__FILE__) . '/scripts/handlebars-v4.0.10.min.js');

            wp_enqueue_script('codeitwise__core', plugin_dir_url(__FILE__) . '/scripts/codeitwise.js');

        }       



        public static function getUsers() {



            $role = $_POST['role'];

            $page = $_POST['page'];

            $orderby = $_POST['orderby'];

            $order = $_POST['order'];



            if(!isset($page)) {

                $page = 1;

            }



            $page_size = 10;

            $columns = array(

                'display_name',

                'user_login'                

            );

            $meta_key = array(



            );



            $args = array(

                'role'          => $role,

                'offset'        => (($page - 1) * $page_size),

                'number'        => $page_size,              

                'fields'        => $columns,

                'orderby'       => $orderby,

                'order'         => $order

             ); 



            $counted = count_users();           

            $count = ($role === "" ? $counted["total_users"] : $counted["avail_roles"][strtolower($role)]);

            if($count === null) $count = 0;

            $response= array(

                'users'             => get_users($args),

                'total_count'       => $count,

                'role'              => $role, 

                'page'              => $page,

                'page_size'         => $page_size,

                'orderby'           => $orderby,

                'order'             => $order

            );

            wp_send_json_success( $response );



        }       

    }



    $ciw_admin = new CodeItWise__Admin();

?>

// scripts.js

(function () {

    const captains = console;

    const $ = jQuery;

    const defaultOrder = "display_name";



    let role = "";    

    let column = defaultOrder;

    let direction = "DESC";



    Handlebars.registerHelper('if_even', function (index) {

        if ((index % 2) == 0) {

            return "";

        } else {

            return new Handlebars.SafeString("class='alternate'");

        }

    });

    Handlebars.registerHelper("inc", function (value, by, options) {

        return parseInt(value) + by;

    });

    Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {



        switch (operator) {

            case '==':

                return (v1 == v2) ? options.fn(this) : options.inverse(this);

            case '===':                

                return (v1 === v2) ? options.fn(this) : options.inverse(this);

            case '!=':

                return (v1 != v2) ? options.fn(this) : options.inverse(this);

            case '!==':

                return (v1 !== v2) ? options.fn(this) : options.inverse(this);

            case '<':

                return (v1 < v2) ? options.fn(this) : options.inverse(this);

            case '<=':

                return (v1 <= v2) ? options.fn(this) : options.inverse(this);

            case '>':

                return (v1 > v2) ? options.fn(this) : options.inverse(this);

            case '>=':

                return (v1 >= v2) ? options.fn(this) : options.inverse(this);

            case '&&':

                return (v1 && v2) ? options.fn(this) : options.inverse(this);

            case '||':

                return (v1 || v2) ? options.fn(this) : options.inverse(this);

            default:

                return options.inverse(this);

        }

    });

    Handlebars.registerHelper('colOrder', function (orderby, order, column, options) {

        if(orderby === column) {

            if(order == "desc")

            {

                return "asc";

            }

        }

        return "desc";

    });



    $(function () {



        BuildTable(role, 1, defaultOrder, "ASC");

        $("[js-filter-role]").on("change", function () {

            role = $(this).val();

            BuildTable(role, 1, defaultOrder, "ASC");

        });



        $('body').on('click', '[data-trigger-page]', function (e) {

            e.preventDefault();

            BuildTable(role, $(this).data("trigger-page"), column, direction);

        });



        $('body').on('click', '[js-sortable]', function(e) {

            e.preventDefault();



            column = $(this).data("column");

            direction = $(this).data("direction");            

            BuildTable(role, 1, column, direction);



        });



    });



    function BuildTable(role, page, orderby, order) {

        let data = { action: 'get_users', page, role, orderby, order };

        let url = '/wp-admin/admin-ajax.php';



        $.post(url, data, 'json')

            .done(function (response) {

                let source = $("[js-users]").html();

                let template = Handlebars.compile(source);

                let html = template({ users: response.data.users, order: response.data.order, orderby: response.data.orderby });

                let container = $("[js-users-container]");



                container.empty();

                container.append(html);

                if(response.data.total_count > 0)

                {

                    source = $("[js-pagination]").html();

                    template = Handlebars.compile(source);

                    html = template({ total_count: response.data.total_count, current_page: page, page_count: Math.ceil(response.data.total_count / response.data.page_size) });

                    container = $("[js-pagination-container]");

                    container.empty();

                    container.append(html);                                        

                }

                else {

                    $("[js-pagination-container]").empty();

                }



            })

            .fail(function (xhr, status, error) {

                // error handling

                alert(error);

            });

    }





})();

// handlebar-templates.html

<script type="text/x-handlebars-template" js-users>



    <table class="wp-list-table widefat fixed" cellspacing="0">

        <thead>

            <tr>                

                <th class="manage-column sortable {{colOrder orderby order 'display_name'}}" scope="col" js-sortable data-column="display_name" data-direction="{{colOrder orderby order 'display_name'}}">

                    <a href="#">

                        <span>Name</span>

                        <span class="sorting-indicator"></span>

                    </a>

                </th>

                <th class="manage-column sortable {{colOrder orderby order 'username'}}" scope="col" js-sortable data-column="username" data-direction="{{colOrder orderby order 'username'}}">

                    <a href="#">

                        <span>Username</span>

                        <span class="sorting-indicator"></span> 

                    </a>

                </th>

            </tr>

        </thead>

        {{#each users }}

            <tr {{if_even @index}}>

                <td>                    

                    {{display_name}}

                </td>

                <td>

                    {{user_login}}

                </td>

            </tr>

        {{else}}

            <tr>

                <td colspan="2">                    

                    No users to display.

                </td>

            </tr>

        {{/each}}

    </table>

</script>



<script type="text/x-handlebars-template" js-pagination>

    <div class="tablenav top">

        <div class="tablenav-pages">

            <span class="displaying-num">{{total_count}} items</span>

            <span class="pagination-links">

            {{#ifCond current_page '===' 1}}                

                <span class="tablenav-pages-navspan" aria-hidden="true">«</span>

                <span class="tablenav-pages-navspan" aria-hidden="true">‹</span>

            {{/ifCond}}

            {{#ifCond current_page '>' 1}}

                <a class="prev-page" data-trigger-page="1" href="#"><span class="screen-reader-text">Next page</span><span aria-hidden="true">«</span></a>

                <a class="first-page" data-trigger-page="{{inc current_page -1}}" href="#"><span class="screen-reader-text">Last page</span><span aria-hidden="true">‹</span></a>

            {{/ifCond}}



                <span class="current-page">{{current_page}}</span> of <span class="page-count">{{page_count}}</span>



            {{#ifCond current_page '==' page_count}}

                <span class="tablenav-pages-navspan" aria-hidden="true">›</span>

                <span class="tablenav-pages-navspan" aria-hidden="true">»</span>

            {{/ifCond}}

            {{#ifCond current_page '<' page_count}}

                <a class="next-page" data-trigger-page="{{inc current_page 1}}" href="#"><span class="screen-reader-text">Next page</span><span aria-hidden="true">›</span></a>

                <a class="last-page" data-trigger-page="{{page_count}}" href="#"><span class="screen-reader-text">Last page</span><span aria-hidden="true">»</span></a>

            {{/ifCond}}

            </span>

        </div>

    </div>

</script>