Random sort & Storing sort values per category

src/components/Checkbox/Checkbox.tsx

@@ -73,7 +73,13 @@ export const SortItem = ({ label, status, onPress, theme }: SortItemProps) => (
   >
     {status ? (
       <MaterialCommunityIcons
-        name={status === 'asc' ? 'arrow-up' : 'arrow-down'}
+        name={
+          status === 'random'
+            ? 'reload'
+            : status === 'asc'
+            ? 'arrow-up'
+            : 'arrow-down'
+        }
         color={theme.primary}
         size={21}
         style={styles.icon}

src/database/db.ts

@@ -1,5 +1,6 @@
 import * as SQLite from 'expo-sqlite';
 import {
+  addSortContentsToTable,
   createCategoriesTableQuery,
   createCategoryDefaultQuery,
   createCategoryTriggerQuery,
@@ -32,6 +33,7 @@ export const createTables = () => {
 
   db.transaction(tx => {
     tx.executeSql(createRepositoryTableQuery);
+    addSortContentsToTable(tx);
   });
 };
 

src/database/queries/CategoryQueries.ts

@@ -4,6 +4,7 @@ import { showToast } from '@utils/showToast';
 import { txnErrorCallback } from '../utils/helpers';
 import { getString } from '@strings/translations';
 import { db } from '@database/db';
+import { LibrarySortOrder } from '@screens/library/constants/constants';
 
 const getCategoriesQuery = `
   SELECT * FROM Category ORDER BY sort
@@ -98,6 +99,22 @@ export const updateCategory = (
     ),
   );
 
+const updateCategorySortContentsQuery =
+  'UPDATE Category SET sortContents = ? WHERE id = ?';
+
+export const updateCategorySortContents = (
+  categoryId: number,
+  sortContents: LibrarySortOrder,
+): void =>
+  db.transaction(tx =>
+    tx.executeSql(
+      updateCategorySortContentsQuery,
+      [sortContents, categoryId],
+      noop,
+      txnErrorCallback,
+    ),
+  );
+
 const isCategoryNameDuplicateQuery = `
   SELECT COUNT(*) as isDuplicate FROM Category WHERE name = ?
 	`;
@@ -160,11 +177,10 @@ export const _restoreCategory = (category: BackupCategory) => {
     ]);
   });
   db.transaction(tx => {
-    tx.executeSql('INSERT INTO Category (id, name, sort) VALUES (?, ?, ?)', [
-      category.id,
-      category.name,
-      category.sort,
-    ]);
+    tx.executeSql(
+      'INSERT INTO Category (id, name, sort, sortContents) VALUES (?, ?, ?)',
+      [category.id, category.name, category.sort, category.sortContents],
+    );
     for (const novelId of category.novelIds) {
       tx.executeSql(
         'INSERT INTO NovelCategory (categoryId, novelId) VALUES (?, ?)',

src/database/queries/LibraryQueries.ts

@@ -85,10 +85,8 @@ const getLibraryWithCategoryQuery = `
 export const getLibraryWithCategory = ({
   filter,
   searchText,
-  sortOrder,
   downloadedOnlyMode,
 }: {
-  sortOrder?: string;
   filter?: string;
   searchText?: string;
   downloadedOnlyMode?: boolean;
@@ -108,10 +106,6 @@ export const getLibraryWithCategory = ({
     preparedArgument.push(`%${searchText}%`);
   }
 
-  if (sortOrder) {
-    query += ` ORDER BY ${sortOrder} `;
-  }
-
   return new Promise(resolve =>
     db.transaction(tx => {
       tx.executeSql(

src/database/tables/CategoryTable.ts

@@ -1,10 +1,13 @@
 import { getString } from '@strings/translations';
+import { SQLTransaction } from 'expo-sqlite';
+import { txnErrorCallback } from '@database/utils/helpers';
 
 export const createCategoriesTableQuery = `
   CREATE TABLE IF NOT EXISTS Category (
     id INTEGER PRIMARY KEY AUTOINCREMENT, 
     name TEXT NOT NULL UNIQUE,
-    sort INTEGER
+    sort INTEGER,
+    sortContents TEXT
   );
 `;
 
@@ -21,3 +24,19 @@ INSERT INTO Category (id, name, sort) VALUES
   (1, "${getString('categories.default')}", 1),
   (2, "${getString('categories.local')}", 2)
 `;
+
+export const addSortContentsToTable = (tx: SQLTransaction) => {
+  tx.executeSql(
+    'PRAGMA table_info("Category");',
+    [],
+    (tx2, resultSet) => {
+      const hasSortContents = !!resultSet.rows._array.find(
+        v => v.name === 'sortContents',
+      );
+      if (!hasSortContents) {
+        tx.executeSql('ALTER TABLE Category ADD COLUMN sortContents TEXT;');
+      }
+    },
+    txnErrorCallback,
+  );
+};

src/database/types/index.ts

@@ -1,4 +1,5 @@
 import { NovelStatus } from '@plugins/types';
+import { LibrarySortOrder } from '@screens/library/constants/constants';
 export interface NovelInfo {
   id: number;
   path: string;
@@ -65,6 +66,7 @@ export interface Category {
   id: number;
   name: string;
   sort: number;
+  sortContents: LibrarySortOrder;
 }
 
 export interface NovelCategory {

src/hooks/persisted/useSettings.ts

@@ -1,7 +1,6 @@
 import {
   DisplayModes,
   LibraryFilter,
-  LibrarySortOrder,
 } from '@screens/library/constants/constants';
 import { useMMKVObject } from 'react-native-mmkv';
 import { Voice } from 'expo-speech';
@@ -61,7 +60,7 @@ export interface BrowseSettings {
 }
 
 export interface LibrarySettings {
-  sortOrder?: LibrarySortOrder;
+  sortOrderId?: number; //increases when sorts are modified so they get updated
   filter?: LibraryFilter;
   showDownloadBadges?: boolean;
   showUnreadBadges?: boolean;

src/screens/history/HistoryScreen.tsx

@@ -15,9 +15,8 @@ import { History } from '@database/types';
 import { getString } from '@strings/translations';
 import ClearHistoryDialog from './components/ClearHistoryDialog';
 import HistorySkeletonLoading from './components/HistorySkeletonLoading';
-import { HistoryScreenProps } from '@navigators/types';
 
-const HistoryScreen = ({ navigation }: HistoryScreenProps) => {
+const HistoryScreen = () => {
   const theme = useTheme();
   const {
     isLoading,

src/screens/library/LibraryScreen.tsx

@@ -324,7 +324,10 @@ const LibraryScreen = ({ navigation }: LibraryScreenProps) => {
           refetchLibrary();
         }}
       />
-      <LibraryBottomSheet bottomSheetRef={bottomSheetRef} />
+      <LibraryBottomSheet
+        bottomSheetRef={bottomSheetRef}
+        category={library[index]}
+      />
       <Portal>
         <Actionbar
           active={selectedNovelIds.length > 0}

src/screens/library/components/LibraryBottomSheet/LibraryBottomSheet.tsx

@@ -1,6 +1,6 @@
 import React, { Ref, useMemo, useState } from 'react';
 import { StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import { SceneMap, TabBar, TabView } from 'react-native-tab-view';
+import { TabBar, TabView } from 'react-native-tab-view';
 import color from 'color';
 
 import { useLibrarySettings, useTheme } from '@hooks/persisted';
@@ -17,11 +17,15 @@ import {
 import { FlashList } from '@shopify/flash-list';
 import { RadioButton } from '@components/RadioButton/RadioButton';
 import { overlay } from 'react-native-paper';
-import { BottomSheetView, BottomSheetModal } from '@gorhom/bottom-sheet';
+import { BottomSheetModal, BottomSheetView } from '@gorhom/bottom-sheet';
 import BottomSheet from '@components/BottomSheet/BottomSheet';
+import { updateCategorySortContents } from '@database/queries/CategoryQueries';
+import { Category } from '@database/types';
+import { sortTable } from '@screens/library/hooks/useLibrary';
 
 interface LibraryBottomSheetProps {
   bottomSheetRef: Ref<BottomSheetModal> | null;
+  category: Category;
 }
 
 const FirstRoute = () => {
@@ -58,10 +62,17 @@ const FirstRoute = () => {
   );
 };
 
-const SecondRoute = () => {
+const SecondRoute = ({ category }: { category: Category }) => {
   const theme = useTheme();
-  const { sortOrder = LibrarySortOrder.DateAdded_DESC, setLibrarySettings } =
-    useLibrarySettings();
+  const { sortOrderId = 0, setLibrarySettings } = useLibrarySettings();
+
+  const [sortOrder, setSortOrder] = useState(
+    category?.sortContents || LibrarySortOrder.DateAdded_DESC,
+  );
+
+  if (!category) {
+    return <></>;
+  }
 
   return (
     <View style={{ flex: 1 }}>
@@ -75,16 +86,25 @@ const SecondRoute = () => {
             theme={theme}
             status={
               sortOrder === item.ASC
-                ? 'asc'
+                ? item.isRandom
+                  ? 'random'
+                  : 'asc'
                 : sortOrder === item.DESC
                 ? 'desc'
                 : undefined
             }
-            onPress={() =>
+            onPress={() => {
+              const newSortOrder =
+                sortOrder === item.ASC ? item.DESC : item.ASC;
+              setSortOrder(newSortOrder);
+              sortTable.delete(category.id); //delete random sort data for category
+
+              updateCategorySortContents(category.id, newSortOrder);
+
               setLibrarySettings({
-                sortOrder: sortOrder === item.ASC ? item.DESC : item.ASC,
-              })
-            }
+                sortOrderId: sortOrderId + 1,
+              });
+            }}
           />
         )}
       />
@@ -159,6 +179,7 @@ const ThirdRoute = () => {
 
 const LibraryBottomSheet: React.FC<LibraryBottomSheetProps> = ({
   bottomSheetRef,
+  category,
 }) => {
   const theme = useTheme();
 
@@ -196,11 +217,18 @@ const LibraryBottomSheet: React.FC<LibraryBottomSheetProps> = ({
     [],
   );
 
-  const renderScene = SceneMap({
-    first: FirstRoute,
-    second: SecondRoute,
-    third: ThirdRoute,
-  });
+  const renderScene = ({ route }: { route: { key: string } }) => {
+    switch (route.key) {
+      case 'first':
+        return <FirstRoute />;
+      case 'second':
+        return <SecondRoute category={category} />;
+      case 'third':
+        return <ThirdRoute />;
+      default:
+        return null;
+    }
+  };
 
   return (
     <BottomSheet bottomSheetRef={bottomSheetRef} snapPoints={[520]}>

src/screens/library/constants/constants.ts

@@ -41,6 +41,7 @@ export enum LibrarySortOrder {
   LastRead_DESC = 'lastReadAt DESC',
   LastUpdated_ASC = 'lastUpdatedAt ASC',
   LastUpdated_DESC = 'lastUpdatedAt DESC',
+  RANDOM = 'RANDOM',
 }
 
 export const librarySortOrderList = [
@@ -74,6 +75,12 @@ export const librarySortOrderList = [
     ASC: LibrarySortOrder.DateAdded_ASC,
     DESC: LibrarySortOrder.DateAdded_DESC,
   },
+  {
+    label: getString('libraryScreen.bottomSheet.sortOrders.random'),
+    ASC: LibrarySortOrder.RANDOM,
+    DESC: LibrarySortOrder.RANDOM,
+    isRandom: true,
+  },
 ];
 
 export enum DisplayModes {