feat(ui): store sort order and page size of userlist in localstorage (#1262)

src/components/Settings/SettingsLogs/index.tsx

@@ -77,13 +77,13 @@ const SettingsLogs: React.FC = () => {
   const { data: appData } = useSWR('/api/v1/status/appdata');
 
   useEffect(() => {
-    const displayString = window.localStorage.getItem('logs-display-settings');
+    const filterString = window.localStorage.getItem('logs-display-settings');
 
-    if (displayString) {
+    if (filterString) {
-      const displaySettings = JSON.parse(displayString);
+      const filterSettings = JSON.parse(filterString);
 
-      setCurrentFilter(displaySettings.currentFilter);
+      setCurrentFilter(filterSettings.currentFilter);
-      setCurrentPageSize(displaySettings.currentPageSize);
+      setCurrentPageSize(filterSettings.currentPageSize);
     }
   }, []);
 

src/components/UserList/index.tsx

@@ -2,7 +2,7 @@ import axios from 'axios';
 import { Field, Form, Formik } from 'formik';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
@@ -110,6 +110,27 @@ const UserList: React.FC = () => {
   const [selectedUsers, setSelectedUsers] = useState<number[]>([]);
   const { user: currentUser } = useUser();
 
+  useEffect(() => {
+    const filterString = window.localStorage.getItem('ul-filter-settings');
+
+    if (filterString) {
+      const filterSettings = JSON.parse(filterString);
+
+      setCurrentSort(filterSettings.currentSort);
+      setCurrentPageSize(filterSettings.currentPageSize);
+    }
+  }, []);
+
+  useEffect(() => {
+    window.localStorage.setItem(
+      'ul-filter-settings',
+      JSON.stringify({
+        currentSort,
+        currentPageSize,
+      })
+    );
+  }, [currentSort, currentPageSize]);
+
   const isUserPermsEditable = (userId: number) =>
     userId !== 1 && userId !== currentUser?.id;
   const isAllUsersSelected = () => {