More pagination

converter settings json

PackageSources/js-bundle/src/contexts/DataContext.tsx

@@ -3,10 +3,9 @@ import { COMMANDS, DATA, LIST, LOAD } from '../constants';
 
 interface IDataContext {
   list?: IList[];
-  dirCount?: number;
   file?: string;
   isLoading?: boolean;
-  refresh?: (path?: string, offset?: number) => void;
+  refresh?: (path?: string) => void;
   load?: (path: string) => void;
 }
 
@@ -21,10 +20,10 @@ export interface IList {
 export const DataContext = createContext<IDataContext>({});
 
 export const useData = () => {
-  const { list, dirCount, file, isLoading, refresh, load } = useContext(DataContext);
+  const { list, file, isLoading, refresh, load } = useContext(DataContext);
 
-  if (list !== undefined && dirCount !== undefined && file !== undefined && isLoading !== undefined && refresh && load)
-    return { list, dirCount, file, isLoading, refresh, load };
+  if (list !== undefined && file !== undefined && isLoading !== undefined && refresh && load)
+    return { list, file, isLoading, refresh, load };
   else throw new Error("Couldn't find context. Is your component inside a DataProvider?");
 };
 
@@ -34,7 +33,6 @@ interface IDataContextProps {
 
 const DataContextProvider: FC<PropsWithChildren<IDataContextProps>> = ({ dataListener, children }) => {
   const [list, setList] = useState<IList[]>([]);
-  const [dirCount, setDirCount] = useState(0);
   const [file, setFile] = useState('');
   const [isLoading, setIsLoading] = useState(true);
 
@@ -51,8 +49,7 @@ const DataContextProvider: FC<PropsWithChildren<IDataContextProps>> = ({ dataLis
       const json = JSON.parse(args);
       switch (json.id) {
         case LIST:
-          setDirCount(json.count);
-          setList(json.data);
+          setList((json.data as IList[]).sort((a, b) => a.name.localeCompare(b.name)));
           window.dispatchEvent(new Event('resize'));
           break;
         case LOAD:
@@ -66,9 +63,9 @@ const DataContextProvider: FC<PropsWithChildren<IDataContextProps>> = ({ dataLis
     setIsLoading(false);
   }, []);
 
-  const refresh = (path = '', offset = 0) => {
+  const refresh = (path = '') => {
     setIsLoading(true);
-    dataListener.call('COMM_BUS_WASM_CALLBACK', COMMANDS, JSON.stringify({ cmd: LIST, path, offset }));
+    dataListener.call('COMM_BUS_WASM_CALLBACK', COMMANDS, JSON.stringify({ cmd: LIST, path }));
   };
 
   const load = (path: string) => {
@@ -76,9 +73,7 @@ const DataContextProvider: FC<PropsWithChildren<IDataContextProps>> = ({ dataLis
     dataListener.call('COMM_BUS_WASM_CALLBACK', COMMANDS, JSON.stringify({ cmd: LOAD, file: path }));
   };
 
-  return (
-    <DataContext.Provider value={{ list, dirCount, file, isLoading, refresh, load }}>{children}</DataContext.Provider>
-  );
+  return <DataContext.Provider value={{ list, file, isLoading, refresh, load }}>{children}</DataContext.Provider>;
 };
 
 export default DataContextProvider;

PackageSources/js-bundle/src/pages/ListPage/ListPage.tsx

@@ -17,13 +17,13 @@ const getPages = (dirCount: number) => {
 
 const ListPage: FC = () => {
   const { navigate, getProps } = useRouter();
-  const { list, dirCount, isLoading, refresh } = useData();
+  const { list, isLoading, refresh } = useData();
   const { path: _path } = getProps() as { path: string };
 
   const guid = useRef(v4());
 
   const [path, setPath] = useState(_path ?? '/');
-  const [offset, setOffset] = useState([0]);
+  const [offset, setOffset] = useState(_path ? new Array(_path.split('/').length).fill(0) : [0]);
   const [pageJump, setPageJump] = useState('1');
 
   return (
@@ -39,10 +39,10 @@ const ListPage: FC = () => {
                     let newPath = prev.split('/').slice(0, -2).join('/') + '/';
                     if (newPath === '/') newPath = '/';
                     setOffset((prev) => {
-                      const _offset = prev.pop();
-                      refresh(newPath, _offset);
+                      prev.pop();
                       return [...prev];
                     });
+                    refresh(newPath);
                     return newPath;
                   });
                 }}
@@ -76,9 +76,8 @@ const ListPage: FC = () => {
               try {
                 let page = Number.parseInt(pageJump);
                 if (isNaN(page)) page = offset.slice(-1)[0];
-                page = Math.max(1, Math.min(getPages(dirCount) + 1, page));
+                page = Math.max(1, Math.min(getPages(list.length) + 1, page));
                 if ((page - 1) * MAX_LIST !== offset.slice(-1)[0]) {
-                  refresh(path, (page - 1) * MAX_LIST);
                   setOffset((prev) => {
                     prev.pop();
                     return [...prev, (page - 1) * MAX_LIST];
@@ -100,7 +99,6 @@ const ListPage: FC = () => {
                 const curOffset = offset.slice(-1)[0];
                 const newOffset = curOffset - MAX_LIST >= 0 ? curOffset - MAX_LIST : 0;
                 if (newOffset !== curOffset) {
-                  refresh(path, newOffset);
                   prev.pop();
                   return [...prev, newOffset];
                 } else return prev;
@@ -110,15 +108,14 @@ const ListPage: FC = () => {
             <NavigateBeforeIcon htmlColor="white" fontSize="large" />
           </Button>
           <Typography variant="h5">
-            {offset.slice(-1)[0] / MAX_LIST + 1}/{getPages(dirCount) + 1}
+            {offset.slice(-1)[0] / MAX_LIST + 1}/{getPages(list.length) + 1}
           </Typography>
           <Button
             onClick={() => {
               setOffset((prev) => {
                 const curOffset = offset.slice(-1)[0];
-                const newOffset = curOffset + MAX_LIST < dirCount ? curOffset + MAX_LIST : curOffset;
+                const newOffset = curOffset + MAX_LIST < list.length ? curOffset + MAX_LIST : curOffset;
                 if (newOffset !== curOffset) {
-                  refresh(path, newOffset);
                   prev.pop();
                   return [...prev, newOffset];
                 } else return prev;
@@ -146,13 +143,14 @@ const ListPage: FC = () => {
         </Backdrop>
       ) : (
         <Stack spacing={2}>
-          {list.map((entry) => (
+          {list.slice(offset.slice(-1)[0], offset.slice(-1)[0] + MAX_LIST).map((entry) => (
             <Grid
               key={entry.name}
               bgcolor="primary.main"
               onClick={() => {
                 if (entry.type === 'directory') {
                   setPath(`${path}${entry.name}/`);
+                  setOffset((prev) => [...prev, 0]);
                   refresh(`${path}${entry.name}/`);
                 }
                 if (entry.type === 'file') navigate('/file', { path, entry });

PackageSources/js-bundle/src/pages/PDFPage/PDFPage.tsx

@@ -30,7 +30,7 @@ const PDFPage: FC = () => {
               Back
             </Typography>
           </Button>
-          <Typography variant="h5" marginLeft={2} component="div" sx={{ flexGrow: 1 }}>
+          <Typography variant="h5" fontWeight="bold" component="div" sx={{ flexGrow: 1 }}>
             {entry.name}
           </Typography>
           <TextField