resources/assets/js/hooks/webResourceHooks/indexCrudReducer.ts - Code Metrics - Inspection of "Starting a more complicated hook for crud operatio..." - GCTC-NTGC/TalentCloud - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/data-request-hooks ( 13824f )

by Tristan

created 2020-11-24 22:24 UTC

resources/assets/js/hooks/webResourceHooks/indexCrudReducer.ts A

↳ Parent: Project

Complexity

Total Complexity	28
Complexity/F	2.33

Size

Lines of Code	416
Function Count	12

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
wmc	28
eloc	327
mnd	16
bc	16
fnc	12
dl	0
loc	416
bpm	1.3333
cpm	2.3333
noi	0
c	0
b	0
f	0
rs	10

12 Functions

Rating	Name	Size	Complexity
A	indexCrudReducer.ts ➔ mergeUpdateFulfill	17	3
A	indexCrudReducer.ts ➔ mergeCreatePayload	19	2
C	indexCrudReducer.ts ➔ reducer	100	6
A	indexCrudReducer.ts ➔ mergeUpdateReject	16	3
A	indexCrudReducer.ts ➔ mergeUpdateStart	19	2
A	indexCrudReducer.ts ➔ mergeItem	23	2
A	indexCrudReducer.ts ➔ decrement	7	2
A	indexCrudReducer.ts ➔ mergeDeleteFulfill	5	1
A	indexCrudReducer.ts ➔ initializeState	20	1
A	indexCrudReducer.ts ➔ mergeDeleteStart	15	2
A	indexCrudReducer.ts ➔ mergeDeleteReject	15	3
A	indexCrudReducer.ts ➔ mergeIndexPayload	10	1

import { FetchError } from "../../helpers/httpRequests";
import {
  deleteProperty,
  filterObjectProps,
  getId,
  hasKey,
  mapToObjectTrans,
} from "../../helpers/queries";
import { ResourceStatus } from "./types";

export enum ActionTypes {
  indexStart = "indexStart",
  indexFulfill = "indexFulfill",
  indexReject = "indexReject",

  createStart = "createStart",
  createFulfill = "createFulfill",
  createReject = "createReject",

  updateStart = "updateStart",
  updateFulfill = "updateFulfill",
  updateReject = "updateReject",

  deleteStart = "deleteStart",
  deleteFulfill = "deleteFulfill",
  deleteReject = "deleteReject",
}

export type IndexStartAction = { type: ActionTypes.indexStart };
export type IndexFulfillAction<T> = {
  type: ActionTypes.indexFulfill;
  payload: T[];
};
export type IndexRejectAction = {
  type: ActionTypes.indexReject;
  payload: Error | FetchError;
};

export type CreateStartAction<T> = {
  type: ActionTypes.createStart;
  meta: { item: T };
};
export type CreateFulfillAction<T> = {
  type: ActionTypes.createFulfill;
  payload: T;
  meta: { item: T };
};
export type CreateRejectAction<T> = {
  type: ActionTypes.createReject;
  payload: Error | FetchError;
  meta: { item: T };
};

export type UpdateStartAction<T> = {
  type: ActionTypes.updateStart;
  meta: { id: number; item: T };
};
export type UpdateFulfillAction<T> = {
  type: ActionTypes.updateFulfill;
  payload: T;
  meta: { id: number; item: T };
};
export type UpdateRejectAction<T> = {
  type: ActionTypes.updateReject;
  payload: Error | FetchError;
  meta: { id: number; item: T };
};

export type DeleteStartAction = {
  type: ActionTypes.deleteStart;
  meta: { id: number };
};
export type DeleteFulfillAction = {
  type: ActionTypes.deleteFulfill;
  meta: { id: number };
};
export type DeleteRejectAction = {
  type: ActionTypes.deleteReject;
  payload: Error | FetchError;
  meta: { id: number };
};
export type AsyncAction<T> =
  | IndexStartAction
  | IndexFulfillAction<T>
  | IndexRejectAction
  | CreateStartAction<T>
  | CreateFulfillAction<T>
  | CreateRejectAction<T>
  | UpdateStartAction<T>
  | UpdateFulfillAction<T>
  | UpdateRejectAction<T>
  | DeleteStartAction
  | DeleteFulfillAction
  | DeleteRejectAction;

export interface ResourceState<T> {
  indexMeta: {
    status: ResourceStatus;
    pendingCount: number;
    error: Error | FetchError | undefined;
  };
  createMeta: {
    status: ResourceStatus;
    pendingCount: number;
    error: Error | FetchError | undefined; // Only stores the most recent error;
  };
  values: {
    [id: string]: {
      value: T;
      error: Error | FetchError | undefined;
      status: ResourceStatus;
      pendingCount: number;
    };
  };
}

export function initializeState<T extends { id: number }>(
  items: T[],
): ResourceState<T> {
  return {
    indexMeta: {
      status: "initial",
      pendingCount: 0,
      error: undefined,
    },
    createMeta: {
      status: "initial",
      pendingCount: 0,
      error: undefined,
    },
    values: mapToObjectTrans(items, getId, (item) => ({
      value: item,
      error: undefined,
      status: "initial",
      pendingCount: 0,
    })),
  };
}

type StateValues<T> = ResourceState<T>["values"];

/**
 * Decrement the number if it above zero, else return 0.
 * @param num
 */
function decrement(num: number): number {
  return num <= 0 ? 0 : num - 1;
}

function mergeItem<T extends { id: number }>(
  values: StateValues<T>,
  item: T,
): StateValues<T> {
  if (hasKey(values, item.id)) {
    // We leave the status and count as is, in case an update or delete is in progress for this item.
    return {
      ...values,
      [item.id]: {
        ...values[item.id],
        value: item,
        error: undefined,
      },
    };
  }
  return {
    ...values,
    [item.id]: {
      value: item,
      error: undefined,
      status: "fulfilled",
      pendingCount: 0,
    },
  };
}
function mergeIndexPayload<T extends { id: number }>(
  values: StateValues<T>,
  payload: T[],
): StateValues<T> {
  // Update or create a values entry for each item in the payload.
  const newValues = payload.reduce(mergeItem, values);
  // Delete any values entries that don't exist in the new payload.
  const payloadIds = payload.map(getId);
  return filterObjectProps(newValues, (item) =>
    payloadIds.includes(item.value.id),
  );
}

function mergeCreatePayload<T extends { id: number }>(
  values: StateValues<T>,
  payload: T,
): StateValues<T> {
  if (hasKey(values, payload.id)) {
    // Something has gone wrong if an existing item has the same id as the newly created one.
    // TODO: But should we throw the error, or just update the value and pretend everything's ok?
    throw new Error(
      "Cannot create new item as an existing item shares the same id. Try refreshing the whole index.",
    );
  }
  return {
    ...values,
    [payload.id]: {
      value: payload,
      error: undefined,
      status: "fulfilled",
      pendingCount: 0,
    },
  };
}

function mergeUpdateStart<T extends { id: number }>(
  values: StateValues<T>,
  action: UpdateStartAction<T>,
): StateValues<T> {
  if (!hasKey(values, action.meta.id)) {
    throw new Error(
      "Cannot update an item that doesn't exist yet. Maybe you tried to update an item after deleting it?",
    );
  }
  return {
    ...values,
    [action.meta.id]: {
      // TODO: if we wanted to do an optimistic update, we could save action.payload.item here.
      // But we would need some way to reverse it if it failed.
      ...values[action.meta.id],
      status: "pending",
      pendingCount: values[action.meta.id].pendingCount + 1,
      error: undefined,
    },
  };
}
function mergeUpdateFulfill<T extends { id: number }>(
  values: StateValues<T>,
  action: UpdateFulfillAction<T>,
): StateValues<T> {
  if (!hasKey(values, action.meta.id)) {
    throw new Error(
      "Cannot update an item that doesn't exist yet. Maybe you tried to update an item after deleting it?",
    );
  }
  return {
    ...values,
    [action.meta.id]: {
      value: action.payload,
      status:
        values[action.meta.id].pendingCount === 1 ? "fulfilled" : "pending",
      pendingCount: decrement(values[action.meta.id].pendingCount),
      error: undefined,
    },
  };
}
function mergeUpdateReject<T extends { id: number }>(
  values: StateValues<T>,
  action: UpdateRejectAction<T>,
): StateValues<T> {
  if (!hasKey(values, action.meta.id)) {
    // In this case, the request has already errored, so don't throw an error.
    // Simply leave the state as is.
    return values;
  }
  return {
    ...values,
    [action.meta.id]: {
      ...values[action.meta.id],
      status: values[action.meta.id].pendingCount === 1 ? "error" : "pending",
      pendingCount: decrement(values[action.meta.id].pendingCount),
      error: action.payload,
    },
  };
}
function mergeDeleteStart<T extends { id: number }>(
  values: StateValues<T>,
  action: DeleteStartAction,
): StateValues<T> {
  if (!hasKey(values, action.meta.id)) {
    // If the item already doesn't exist, nothing needs to be done.
    return values;
  }
  return {
    ...values,
    [action.meta.id]: {
      ...values[action.meta.id],
      status: "pending",
      pendingCount: values[action.meta.id].pendingCount + 1,
      error: undefined,
    },
  };
}
function mergeDeleteFulfill<T extends { id: number }>(
  values: StateValues<T>,
  action: DeleteFulfillAction,
): StateValues<T> {
  return deleteProperty(values, action.meta.id);
}
function mergeDeleteReject<T extends { id: number }>(
  values: StateValues<T>,
  action: DeleteRejectAction,
): StateValues<T> {
  if (!hasKey(values, action.meta.id)) {
    // If the item already doesn't exist, nothing needs to be done, despite the error.
    return values;
  }
  return {
    ...values,
    [action.meta.id]: {
      ...values[action.meta.id],
      status: values[action.meta.id].pendingCount === 1 ? "error" : "pending",
      pendingCount: decrement(values[action.meta.id].pendingCount),
      error: action.payload,
    },
  };
}

export function reducer<T extends { id: number }>(
  state: ResourceState<T>,
  action: AsyncAction<T>,
): ResourceState<T> {
  switch (action.type) {
    case ActionTypes.indexStart:
      return {
        ...state,
        indexMeta: {
          ...state.indexMeta,
          status: "pending",
          pendingCount: state.indexMeta.pendingCount + 1,
          error: undefined,
        },
      };
    case ActionTypes.indexFulfill:
      return {
        ...state,
        indexMeta: {
          ...state.indexMeta,
          status: state.indexMeta.pendingCount === 1 ? "fulfilled" : "pending",
          pendingCount: decrement(state.indexMeta.pendingCount),
          error: undefined,
        },
        values: mergeIndexPayload(state.values, action.payload),
      };
    case ActionTypes.indexReject:
      return {
        ...state,
        indexMeta: {
          ...state.indexMeta,
          status: state.indexMeta.pendingCount === 1 ? "rejected" : "pending",
          pendingCount: decrement(state.indexMeta.pendingCount),
          error: action.payload,
        },
      };
    case ActionTypes.createStart:
      // TODO: We could add an optimistic update here.
      return {
        ...state,
        createMeta: {
          ...state.createMeta,
          status: "pending",
          pendingCount: state.createMeta.pendingCount + 1,
          error: undefined,
        },
      };
    case ActionTypes.createFulfill:
      return {
        ...state,
        createMeta: {
          status: state.createMeta.pendingCount === 1 ? "fulfilled" : "pending",
          pendingCount: decrement(state.createMeta.pendingCount),
          error: undefined,
        },
        values: mergeCreatePayload(state.values, action.payload),
      };
    case ActionTypes.createReject:
      return {
        ...state,
        createMeta: {
          status: state.createMeta.pendingCount === 1 ? "rejected" : "pending",
          pendingCount: decrement(state.createMeta.pendingCount),
          error: action.payload,
        },
      };
    case ActionTypes.updateStart:
      return {
        ...state,
        values: mergeUpdateStart(state.values, action),
      };
    case ActionTypes.updateFulfill:
      return {
        ...state,
        values: mergeUpdateFulfill(state.values, action),
      };
    case ActionTypes.updateReject:
      return {
        ...state,
        values: mergeUpdateReject(state.values, action),
      };
    case ActionTypes.deleteStart:
      return {
        ...state,
        values: mergeDeleteStart(state.values, action),
      };
    case ActionTypes.deleteFulfill:
      return {
        ...state,
        values: mergeDeleteFulfill(state.values, action),
      };
    case ActionTypes.deleteReject:
      return {
        ...state,
        values: mergeDeleteReject(state.values, action),
      };

    default:
      return state;
  }
}

export default reducer;


1			import { FetchError } from "../../helpers/httpRequests";
2			import {
3			deleteProperty,
4			filterObjectProps,
5			getId,
6			hasKey,
7			mapToObjectTrans,
8			} from "../../helpers/queries";
9			import { ResourceStatus } from "./types";
10
11			export enum ActionTypes {
12			indexStart = "indexStart",
13			indexFulfill = "indexFulfill",
14			indexReject = "indexReject",
15
16			createStart = "createStart",
17			createFulfill = "createFulfill",
18			createReject = "createReject",
19
20			updateStart = "updateStart",
21			updateFulfill = "updateFulfill",
22			updateReject = "updateReject",
23
24			deleteStart = "deleteStart",
25			deleteFulfill = "deleteFulfill",
26			deleteReject = "deleteReject",
27			}
28
29			export type IndexStartAction = { type: ActionTypes.indexStart };
30			export type IndexFulfillAction<T> = {
31			type: ActionTypes.indexFulfill;
32			payload: T[];
33			};
34			export type IndexRejectAction = {
35			type: ActionTypes.indexReject;
36			payload: Error \| FetchError;
37			};
38
39			export type CreateStartAction<T> = {
40			type: ActionTypes.createStart;
41			meta: { item: T };
42			};
43			export type CreateFulfillAction<T> = {
44			type: ActionTypes.createFulfill;
45			payload: T;
46			meta: { item: T };
47			};
48			export type CreateRejectAction<T> = {
49			type: ActionTypes.createReject;
50			payload: Error \| FetchError;
51			meta: { item: T };
52			};
53
54			export type UpdateStartAction<T> = {
55			type: ActionTypes.updateStart;
56			meta: { id: number; item: T };
57			};
58			export type UpdateFulfillAction<T> = {
59			type: ActionTypes.updateFulfill;
60			payload: T;
61			meta: { id: number; item: T };
62			};
63			export type UpdateRejectAction<T> = {
64			type: ActionTypes.updateReject;
65			payload: Error \| FetchError;
66			meta: { id: number; item: T };
67			};
68
69			export type DeleteStartAction = {
70			type: ActionTypes.deleteStart;
71			meta: { id: number };
72			};
73			export type DeleteFulfillAction = {
74			type: ActionTypes.deleteFulfill;
75			meta: { id: number };
76			};
77			export type DeleteRejectAction = {
78			type: ActionTypes.deleteReject;
79			payload: Error \| FetchError;
80			meta: { id: number };
81			};
82			export type AsyncAction<T> =
83			\| IndexStartAction
84			\| IndexFulfillAction<T>
85			\| IndexRejectAction
86			\| CreateStartAction<T>
87			\| CreateFulfillAction<T>
88			\| CreateRejectAction<T>
89			\| UpdateStartAction<T>
90			\| UpdateFulfillAction<T>
91			\| UpdateRejectAction<T>
92			\| DeleteStartAction
93			\| DeleteFulfillAction
94			\| DeleteRejectAction;
95
96			export interface ResourceState<T> {
97			indexMeta: {
98			status: ResourceStatus;
99			pendingCount: number;
100			error: Error \| FetchError \| undefined;
101			};
102			createMeta: {
103			status: ResourceStatus;
104			pendingCount: number;
105			error: Error \| FetchError \| undefined; // Only stores the most recent error;
106			};
107			values: {
108			[id: string]: {
109			value: T;
110			error: Error \| FetchError \| undefined;
111			status: ResourceStatus;
112			pendingCount: number;
113			};
114			};
115			}
116
117			export function initializeState<T extends { id: number }>(
118			items: T[],
119			): ResourceState<T> {
120			return {
121			indexMeta: {
122			status: "initial",
123			pendingCount: 0,
124			error: undefined,
125			},
126			createMeta: {
127			status: "initial",
128			pendingCount: 0,
129			error: undefined,
130			},
131			values: mapToObjectTrans(items, getId, (item) => ({
132			value: item,
133			error: undefined,
134			status: "initial",
135			pendingCount: 0,
136			})),
137			};
138			}
139
140			type StateValues<T> = ResourceState<T>["values"];
141
142			/**
143			* Decrement the number if it above zero, else return 0.
144			* @param num
145			*/
146			function decrement(num: number): number {
147			return num <= 0 ? 0 : num - 1;
148			}
149
150			function mergeItem<T extends { id: number }>(
151			values: StateValues<T>,
152			item: T,
153			): StateValues<T> {
154			if (hasKey(values, item.id)) {
155			// We leave the status and count as is, in case an update or delete is in progress for this item.
156			return {
157			...values,
158			[item.id]: {
159			...values[item.id],
160			value: item,
161			error: undefined,
162			},
163			};
164			}
165			return {
166			...values,
167			[item.id]: {
168			value: item,
169			error: undefined,
170			status: "fulfilled",
171			pendingCount: 0,
172			},
173			};
174			}
175			function mergeIndexPayload<T extends { id: number }>(
176			values: StateValues<T>,
177			payload: T[],
178			): StateValues<T> {
179			// Update or create a values entry for each item in the payload.
180			const newValues = payload.reduce(mergeItem, values);
181			// Delete any values entries that don't exist in the new payload.
182			const payloadIds = payload.map(getId);
183			return filterObjectProps(newValues, (item) =>
184			payloadIds.includes(item.value.id),
185			);
186			}
187
188			function mergeCreatePayload<T extends { id: number }>(
189			values: StateValues<T>,
190			payload: T,
191			): StateValues<T> {
192			if (hasKey(values, payload.id)) {
193			// Something has gone wrong if an existing item has the same id as the newly created one.
194			// TODO: But should we throw the error, or just update the value and pretend everything's ok?
195			throw new Error(
196			"Cannot create new item as an existing item shares the same id. Try refreshing the whole index.",
197			);
198			}
199			return {
200			...values,
201			[payload.id]: {
202			value: payload,
203			error: undefined,
204			status: "fulfilled",
205			pendingCount: 0,
206			},
207			};
208			}
209
210			function mergeUpdateStart<T extends { id: number }>(
211			values: StateValues<T>,
212			action: UpdateStartAction<T>,
213			): StateValues<T> {
214			if (!hasKey(values, action.meta.id)) {
215			throw new Error(
216			"Cannot update an item that doesn't exist yet. Maybe you tried to update an item after deleting it?",
217			);
218			}
219			return {
220			...values,
221			[action.meta.id]: {
222			// TODO: if we wanted to do an optimistic update, we could save action.payload.item here.
223			// But we would need some way to reverse it if it failed.
224			...values[action.meta.id],
225			status: "pending",
226			pendingCount: values[action.meta.id].pendingCount + 1,
227			error: undefined,
228			},
229			};
230			}
231			function mergeUpdateFulfill<T extends { id: number }>(
232			values: StateValues<T>,
233			action: UpdateFulfillAction<T>,
234			): StateValues<T> {
235			if (!hasKey(values, action.meta.id)) {
236			throw new Error(
237			"Cannot update an item that doesn't exist yet. Maybe you tried to update an item after deleting it?",
238			);
239			}
240			return {
241			...values,
242			[action.meta.id]: {
243			value: action.payload,
244			status:
245			values[action.meta.id].pendingCount === 1 ? "fulfilled" : "pending",
246			pendingCount: decrement(values[action.meta.id].pendingCount),
247			error: undefined,
248			},
249			};
250			}
251			function mergeUpdateReject<T extends { id: number }>(
252			values: StateValues<T>,
253			action: UpdateRejectAction<T>,
254			): StateValues<T> {
255			if (!hasKey(values, action.meta.id)) {
256			// In this case, the request has already errored, so don't throw an error.
257			// Simply leave the state as is.
258			return values;
259			}
260			return {
261			...values,
262			[action.meta.id]: {
263			...values[action.meta.id],
264			status: values[action.meta.id].pendingCount === 1 ? "error" : "pending",
265			pendingCount: decrement(values[action.meta.id].pendingCount),
266			error: action.payload,
267			},
268			};
269			}
270			function mergeDeleteStart<T extends { id: number }>(
271			values: StateValues<T>,
272			action: DeleteStartAction,
273			): StateValues<T> {
274			if (!hasKey(values, action.meta.id)) {
275			// If the item already doesn't exist, nothing needs to be done.
276			return values;
277			}
278			return {
279			...values,
280			[action.meta.id]: {
281			...values[action.meta.id],
282			status: "pending",
283			pendingCount: values[action.meta.id].pendingCount + 1,
284			error: undefined,
285			},
286			};
287			}
288			function mergeDeleteFulfill<T extends { id: number }>(
289			values: StateValues<T>,
290			action: DeleteFulfillAction,
291			): StateValues<T> {
292			return deleteProperty(values, action.meta.id);
293			}
294			function mergeDeleteReject<T extends { id: number }>(
295			values: StateValues<T>,
296			action: DeleteRejectAction,
297			): StateValues<T> {
298			if (!hasKey(values, action.meta.id)) {
299			// If the item already doesn't exist, nothing needs to be done, despite the error.
300			return values;
301			}
302			return {
303			...values,
304			[action.meta.id]: {
305			...values[action.meta.id],
306			status: values[action.meta.id].pendingCount === 1 ? "error" : "pending",
307			pendingCount: decrement(values[action.meta.id].pendingCount),
308			error: action.payload,
309			},
310			};
311			}
312
313			export function reducer<T extends { id: number }>(
314			state: ResourceState<T>,
315			action: AsyncAction<T>,
316			): ResourceState<T> {
317			switch (action.type) {
318			case ActionTypes.indexStart:
319			return {
320			...state,
321			indexMeta: {
322			...state.indexMeta,
323			status: "pending",
324			pendingCount: state.indexMeta.pendingCount + 1,
325			error: undefined,
326			},
327			};
328			case ActionTypes.indexFulfill:
329			return {
330			...state,
331			indexMeta: {
332			...state.indexMeta,
333			status: state.indexMeta.pendingCount === 1 ? "fulfilled" : "pending",
334			pendingCount: decrement(state.indexMeta.pendingCount),
335			error: undefined,
336			},
337			values: mergeIndexPayload(state.values, action.payload),
338			};
339			case ActionTypes.indexReject:
340			return {
341			...state,
342			indexMeta: {
343			...state.indexMeta,
344			status: state.indexMeta.pendingCount === 1 ? "rejected" : "pending",
345			pendingCount: decrement(state.indexMeta.pendingCount),
346			error: action.payload,
347			},
348			};
349			case ActionTypes.createStart:
350			// TODO: We could add an optimistic update here.
351			return {
352			...state,
353			createMeta: {
354			...state.createMeta,
355			status: "pending",
356			pendingCount: state.createMeta.pendingCount + 1,
357			error: undefined,
358			},
359			};
360			case ActionTypes.createFulfill:
361			return {
362			...state,
363			createMeta: {
364			status: state.createMeta.pendingCount === 1 ? "fulfilled" : "pending",
365			pendingCount: decrement(state.createMeta.pendingCount),
366			error: undefined,
367			},
368			values: mergeCreatePayload(state.values, action.payload),
369			};
370			case ActionTypes.createReject:
371			return {
372			...state,
373			createMeta: {
374			status: state.createMeta.pendingCount === 1 ? "rejected" : "pending",
375			pendingCount: decrement(state.createMeta.pendingCount),
376			error: action.payload,
377			},
378			};
379			case ActionTypes.updateStart:
380			return {
381			...state,
382			values: mergeUpdateStart(state.values, action),
383			};
384			case ActionTypes.updateFulfill:
385			return {
386			...state,
387			values: mergeUpdateFulfill(state.values, action),
388			};
389			case ActionTypes.updateReject:
390			return {
391			...state,
392			values: mergeUpdateReject(state.values, action),
393			};
394			case ActionTypes.deleteStart:
395			return {
396			...state,
397			values: mergeDeleteStart(state.values, action),
398			};
399			case ActionTypes.deleteFulfill:
400			return {
401			...state,
402			values: mergeDeleteFulfill(state.values, action),
403			};
404			case ActionTypes.deleteReject:
405			return {
406			...state,
407			values: mergeDeleteReject(state.values, action),
408			};
409
410			default:
411			return state;
412			}
413			}
414
415			export default reducer;
416

GCTC-NTGC / TalentCloud

Push — feature/data-request-hooks ( 13824f )

resources/assets/js/hooks/webResourceHooks/indexCrudReducer.ts A

Complexity

Size

Duplication

Importance

12 Functions

Duplication Side-by-Side

Filter issues like