Merge pull request #31 from DerGoogler/1.6.4

1.6.4
DerGoogler · Sep 17, 2023 · 479cc9a · 479cc9a
2 parents 580cbe0 + bff5707
commit 479cc9a
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 42 deletions.
diff --git a/Android/app/build.gradle b/Android/app/build.gradle
@@ -14,8 +14,8 @@ android {
         applicationId 'com.dergoogler.mmrl'
         minSdk 26
         targetSdk 33
-        versionName '1.6.3'
-        versionCode 163
+        versionName '1.6.4'
+        versionCode 164
         externalNativeBuild {
             cmake {
                 cppFlags "-llog"

diff --git a/Website/package.json b/Website/package.json
@@ -3,8 +3,8 @@
   "description": "",
   "config": {
     "application_id": "com.dergoogler.mmrl",
-    "version_name": "1.6.3",
-    "version_code": 163
+    "version_name": "1.6.4",
+    "version_code": 164
   },
   "main": "index.tsx",
   "keywords": [],

diff --git a/Website/src/activitys/DAPITestActivity.tsx b/Website/src/activitys/DAPITestActivity.tsx
@@ -27,8 +27,8 @@ import { Page } from "@Components/onsenui/Page";
 import { os } from "@Native/Os";
 import { useActivity } from "@Hooks/useActivity";
 import { useStrings } from "@Hooks/useStrings";
-import DescriptonActivity from "./DescriptonActivity";
 import { Markup } from "@Components/Markdown";
+import FetchTextActivity from "./FetchTextActivity";
 
 interface CustomCommand extends Command {
   icon: React.ElementType;
@@ -140,11 +140,11 @@ const DAPITestActivity = () => {
 
   const handlePreview = () => {
     context.pushPage({
-      component: DescriptonActivity,
+      component: FetchTextActivity,
       key: "dapi-preview",
       extra: {
         title: "Preview",
-        desc: description,
+        data: description,
       },
     });
   };

diff --git a/Website/src/activitys/FetchTextActivity.tsx b/Website/src/activitys/FetchTextActivity.tsx
@@ -12,6 +12,7 @@ import { MissingInternet } from "@Components/MissingInternet";
 
 type FetchTextActivityExtra = {
   title: string;
+  data: string;
   url: string;
 };
 
@@ -30,7 +31,7 @@ function FetchTextActivity() {
 
   const initialState: State<string> = {
     error: undefined,
-    data: undefined,
+    data: extra.data || undefined,
   };
 
   // Keep state logic separated

diff --git a/Website/src/activitys/fragments/ExploreModuleFragment.tsx b/Website/src/activitys/fragments/ExploreModuleFragment.tsx
@@ -3,7 +3,19 @@ import { Searchbar } from "@Components/Searchbar";
 import React from "react";
 import { useActivity } from "@Hooks/useActivity";
 import { useRepos } from "@Hooks/useRepos";
-import { Box, Pagination, Stack, Typography } from "@mui/material";
+import Stack from "@mui/material/Stack";
+import Pagination from "@mui/material/Pagination";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import InputLabel from "@mui/material/InputLabel";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import MenuItem from "@mui/material/MenuItem";
+import FormControl from "@mui/material/FormControl";
+import Select, { SelectChangeEvent } from "@mui/material/Select";
 import { useStrings } from "@Hooks/useStrings";
 import { usePagination } from "@Hooks/usePagination";
 import RepoActivity from "@Activitys/RepoActivity";
@@ -30,13 +42,39 @@ const ExploreModuleFragment = (props: ExploreModuleProps) => {
   const { isNetworkAvailable } = useNetwork();
   const [search, setSearch] = React.useState("");
 
-  const applyFilter = props.applyFilter(modules, search);
+  const [open, setOpen] = React.useState(false);
+  const [exploreFilter, setExploreFilter] = React.useState<number | string>("none");
+
+  const filterSystem = () => {
+    const applyFilter = props.applyFilter(modules, search);
+
+    switch (exploreFilter) {
+      case "none":
+        return applyFilter;
+      case "date_oldest":
+        return applyFilter.sort(function (a, b) {
+          var da = new Date(a.last_update).getTime();
+          var db = new Date(b.last_update).getTime();
+
+          return da - db;
+        });
+      case "date_newest":
+        return applyFilter.sort(function (a, b) {
+          var da = new Date(a.last_update).getTime();
+          var db = new Date(b.last_update).getTime();
+
+          return db - da;
+        });
+      default:
+        return applyFilter;
+    }
+  };
 
   const [page, setPage] = React.useState(1);
 
   const PER_PAGE = 20;
-  const count = Math.ceil(applyFilter.length / PER_PAGE);
-  const _DATA = usePagination(applyFilter, PER_PAGE);
+  const count = Math.ceil(filterSystem().length / PER_PAGE);
+  const _DATA = usePagination(filterSystem(), PER_PAGE);
 
   if (!isNetworkAvailable) {
     return (
@@ -95,20 +133,20 @@ const ExploreModuleFragment = (props: ExploreModuleProps) => {
     );
   }
 
-  // if (modulesLoading) {
-  //   return (
-  //     <ProgressCircular
-  //       indeterminate
-  //       style={{
-  //         position: "absolute",
-  //         left: "50%",
-  //         top: "50%",
-  //         WebkitTransform: "translate(-50%, -50%)",
-  //         transform: "translate(-50%, -50%)",
-  //       }}
-  //     />
-  //   );
-  // } else {
+  const handleChange = (event: SelectChangeEvent<typeof exploreFilter>) => {
+    setExploreFilter(event.target.value);
+  };
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = (event: React.SyntheticEvent<unknown>, reason?: string) => {
+    if (reason !== "backdropClick") {
+      setOpen(false);
+    }
+  };
+
   return (
     <Page
       renderToolbar={props.renderToolbar}
@@ -133,17 +171,58 @@ const ExploreModuleFragment = (props: ExploreModuleProps) => {
       }}
     >
       <Page.RelativeContent>
-        <Searchbar placeholder={strings.search_modules} onChange={(e) => setSearch(e.target.value)} />
+        <Searchbar onFilterClick={handleClickOpen} placeholder={strings.search_modules} onChange={(e) => setSearch(e.target.value)} />
 
         <Stack sx={{ mt: 1 }} direction="column" justifyContent="flex-start" alignItems="center" spacing={1}>
           {_DATA.currentData().map((module, index) => (
             <ExploreModule index={index} key={module.id + index} moduleProps={module} />
           ))}
         </Stack>
       </Page.RelativeContent>
+
+      <Dialog disableEscapeKeyDown open={open} onClose={handleClose}>
+        <DialogTitle>Apply a filter</DialogTitle>
+        <DialogContent>
+          <Box component="form" sx={{ display: "flex", flexWrap: "wrap" }}>
+            <FormControl sx={{ m: 1, minWidth: 120 }}>
+              <InputLabel id="demo-dialog-select-label">Filter</InputLabel>
+              <Select
+                labelId="demo-dialog-select-label"
+                id="demo-dialog-select"
+                value={exploreFilter}
+                onChange={handleChange}
+                input={<OutlinedInput label="Filter" />}
+              >
+                <MenuItem value="none">
+                  <em>No filter</em>
+                </MenuItem>
+                <MenuItem value="date_oldest">By date (oldest)</MenuItem>
+                <MenuItem value="date_newest">By date (newest)</MenuItem>
+              </Select>
+            </FormControl>
+          </Box>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            sx={{
+              color: scheme[500],
+            }}
+            onClick={handleClose}
+          >
+            Cancel
+          </Button>
+          <Button
+            sx={{
+              color: scheme[500],
+            }}
+            onClick={handleClose}
+          >
+            Apply
+          </Button>
+        </DialogActions>
+      </Dialog>
     </Page>
   );
-  // }
 };
 
 export default ExploreModuleFragment;
diff --git a/Website/src/components/Searchbar.tsx b/Website/src/components/Searchbar.tsx
@@ -5,20 +5,17 @@ import useShadeColor from "../hooks/useShadeColor";
 import Paper from "@mui/material/Paper";
 import InputBase from "@mui/material/InputBase";
 import IconButton from "@mui/material/IconButton";
-import SearchIcon from "@mui/icons-material/Search";
 import { useTheme } from "@Hooks/useTheme";
 import { useSettings } from "@Hooks/useSettings";
+import FilterListIcon from "@mui/icons-material/FilterList";
 
 type SearchbarProps = {
+  onFilterClick?: React.MouseEventHandler<HTMLButtonElement>;
   onChange: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
   placeholder: string;
 };
 
-export const Searchbar = ({ placeholder, onChange }: SearchbarProps) => {
-  const { scheme } = useTheme();
-  const shade = useShadeColor();
-  const { settings } = useSettings();
-
+export const Searchbar = ({ placeholder, onChange, onFilterClick }: SearchbarProps) => {
   return (
     <Paper
       component="form"
@@ -30,14 +27,8 @@ export const Searchbar = ({ placeholder, onChange }: SearchbarProps) => {
         width: "100%",
       }}
     >
-      <IconButton
-        // onClick={() => {
-        //   onSearch(value);
-        // }}
-        sx={{ p: "10px" }}
-        aria-label="menu"
-      >
-        <SearchIcon />
+      <IconButton onClick={onFilterClick} sx={{ p: "10px" }} aria-label="menu">
+        <FilterListIcon />
       </IconButton>
       <FormControl fullWidth>
         <InputBase