(quality) filter machines from the API

app/frontend/src/javascript/api/machine.ts

@@ -5,7 +5,7 @@ import ApiLib from '../lib/api';
 
 export default class MachineAPI {
   static async index (filters?: MachineIndexFilter): Promise<Array<Machine>> {
-    const res: AxiosResponse<Array<Machine>> = await apiClient.get(`/api/machines${ApiLib.filtersToQuery(filters)}`);
+    const res: AxiosResponse<Array<Machine>> = await apiClient.get(`/api/machines${ApiLib.filtersToQuery(filters, false)}`);
     return res?.data;
   }
 

app/frontend/src/javascript/components/machines/machines-filters.tsx

@@ -15,7 +15,7 @@ interface MachinesFiltersProps {
 export const MachinesFilters: React.FC<MachinesFiltersProps> = ({ onFilterChangedBy, machineCategories }) => {
   const { t } = useTranslation('public');
 
-  const defaultValue = { value: true, label: t('app.public.machines_filters.status_enabled') };
+  const defaultValue = { value: false, label: t('app.public.machines_filters.status_enabled') };
   const categoryDefaultValue = { value: null, label: t('app.public.machines_filters.all_machines') };
 
   // Styles the React-select component
@@ -37,7 +37,7 @@ export const MachinesFilters: React.FC<MachinesFiltersProps> = ({ onFilterChange
   const buildBooleanOptions = (): Array<SelectOption<boolean>> => {
     return [
       defaultValue,
-      { value: false, label: t('app.public.machines_filters.status_disabled') },
+      { value: true, label: t('app.public.machines_filters.status_disabled') },
       { value: null, label: t('app.public.machines_filters.status_all') }
     ];
   };
@@ -56,7 +56,7 @@ export const MachinesFilters: React.FC<MachinesFiltersProps> = ({ onFilterChange
    * Callback triggered when the user selects a machine status in the dropdown list
    */
   const handleStatusSelected = (option: SelectOption<boolean>): void => {
-    onFilterChangedBy('status', option.value);
+    onFilterChangedBy('disabled', option.value);
   };
 
   /**

app/frontend/src/javascript/components/machines/machines-list.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import * as React from 'react';
-import { Machine, MachineListFilter } from '../../models/machine';
+import { Machine, MachineIndexFilter } from '../../models/machine';
 import { IApplication } from '../../models/application';
 import { react2angular } from 'react2angular';
 import { Loader } from '../base/loader';
@@ -30,56 +30,30 @@ interface MachinesListProps {
 export const MachinesList: React.FC<MachinesListProps> = ({ onError, onSuccess, onShowMachine, onReserveMachine, onLoginRequested, onEnrollRequested, user, canProposePacks }) => {
   // shown machines
   const [machines, setMachines] = useState<Array<Machine>>(null);
-  // we keep the full list of machines, for filtering
-  const [allMachines, setAllMachines] = useState<Array<Machine>>(null);
   // shown machine categories
   const [machineCategories, setMachineCategories] = useState<Array<MachineCategory>>([]);
   // machine list filter
-  const [filter, setFilter] = useState<MachineListFilter>({
-    status: true,
+  const [filters, setFilters] = useState<MachineIndexFilter>({
+    disabled: false,
     category: null
   });
 
   // retrieve the full list of machines on component mount
   useEffect(() => {
-    MachineAPI.index()
-      .then(data => setAllMachines(data))
+    MachineAPI.index(filters)
+      .then(data => setMachines(data))
       .catch(e => onError(e));
     MachineCategoryAPI.index()
       .then(data => setMachineCategories(data))
       .catch(e => onError(e));
   }, []);
 
-  // filter the machines shown when the full list was retrieved
+  // refetch the machines when the filters change
   useEffect(() => {
-    handleFilter();
-  }, [allMachines]);
-
-  // filter the machines shown when the filter was changed
-  useEffect(() => {
-    handleFilter();
-  }, [filter]);
-
-  /**
-   * Callback triggered when the user changes the filter.
-   * filter the machines shown when the filter was changed.
-   */
-  const handleFilter = (): void => {
-    let machinesFiltered = [];
-    if (allMachines) {
-      if (filter.status === null) {
-        machinesFiltered = allMachines;
-      } else {
-        // enabled machines may have the m.disabled property null (for never disabled machines)
-        // or false (for re-enabled machines)
-        machinesFiltered = allMachines.filter(m => !!m.disabled === !filter.status);
-      }
-      if (filter.category !== null) {
-        machinesFiltered = machinesFiltered.filter(m => m.machine_category_id === filter.category);
-      }
-    }
-    setMachines(machinesFiltered);
-  };
+    MachineAPI.index(filters)
+      .then(data => setMachines(data))
+      .catch(e => onError(e));
+  }, [filters]);
 
   /**
    * Callback triggered when the user changes the filter.
@@ -87,8 +61,8 @@ export const MachinesList: React.FC<MachinesListProps> = ({ onError, onSuccess,
    * @param value, status and category value
    */
   const handleFilterChangedBy = (type: string, value: number | boolean | void) => {
-    setFilter({
-      ...filter,
+    setFilters({
+      ...filters,
       [type]: value
     });
   };

app/frontend/src/javascript/models/machine.ts

@@ -4,12 +4,8 @@ import { FileType } from './file';
 import { AdvancedAccounting } from './advanced-accounting';
 
 export interface MachineIndexFilter extends ApiFilter {
-  disabled: boolean,
-}
-
-export interface MachineListFilter {
-  status?: boolean,
-  category?: number,
+  disabled?: boolean,
+  category?: number
 }
 
 export interface Machine {

app/models/machine.rb

@@ -40,7 +40,7 @@ class Machine < ApplicationRecord
   has_many :cart_item_machine_reservations, class_name: 'CartItem::MachineReservation', dependent: :destroy, inverse_of: :reservable,
                                             foreign_type: 'reservable_type', foreign_key: 'reservable_id'
 
-  belongs_to :category
+  belongs_to :machine_category
 
   after_create :create_statistic_subtype
   after_create :create_machine_prices

app/services/machine_service.rb

@@ -2,21 +2,39 @@
 
 # Provides methods for Machines
 class MachineService
-  def self.list(filters)
-    sort_by = Setting.get('machines_sort_by') || 'default'
-    machines = if sort_by == 'default'
-                 Machine.includes(:machine_image, :plans)
-               else
-                 Machine.includes(:machine_image, :plans).order(sort_by)
-               end
-    # do not include soft destroyed
-    machines = machines.where(deleted_at: nil)
+  class << self
+    # @param filters [ActionController::Parameters]
+    def list(filters)
+      sort_by = Setting.get('machines_sort_by') || 'default'
+      machines = if sort_by == 'default'
+                   Machine.includes(:machine_image, :plans)
+                 else
+                   Machine.includes(:machine_image, :plans).order(sort_by)
+                 end
+      # do not include soft destroyed
+      machines = machines.where(deleted_at: nil)
 
-    if filters[:disabled].present?
-      state = filters[:disabled] == 'false' ? [nil, false] : true
-      machines = machines.where(disabled: state)
+      machines = filter_by_disabled(machines, filters)
+      filter_by_category(machines, filters)
     end
 
-    machines
+    private
+
+    # @param machines [ActiveRecord::Relation<Machine>]
+    # @param filters [ActionController::Parameters]
+    def filter_by_disabled(machines, filters)
+      return machines if filters[:disabled].blank?
+
+      state = filters[:disabled] == 'false' ? [nil, false] : true
+      machines.where(disabled: state)
+    end
+
+    # @param machines [ActiveRecord::Relation<Machine>]
+    # @param filters [ActionController::Parameters]
+    def filter_by_category(machines, filters)
+      return machines if filters[:category].blank?
+
+      machines.where(machine_category_id: filters[:category])
+    end
   end
 end