Add network checkts and small bug fixes

DerGoogler · Sep 16, 2023 · f6854de · f6854de
1 parent 1684eea
commit f6854de
Show file tree

Hide file tree

Showing 11 changed files with 218 additions and 110 deletions.
diff --git a/Website/src/activitys/FetchTextActivity.tsx b/Website/src/activitys/FetchTextActivity.tsx
@@ -4,8 +4,11 @@ import { useActivity } from "@Hooks/useActivity";
 import React from "react";
 import { Toolbar } from "@Components/onsenui/Toolbar";
 import { Page } from "@Components/onsenui/Page";
-import { useStrings } from "@Hooks/useStrings";
-import { useTheme } from "@Hooks/useTheme";
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import Icon from "@Components/Icon";
+import { useNetwork } from "@Hooks/useNetwork";
+import { MissingInternet } from "@Components/MissingInternet";
 
 type FetchTextActivityExtra = {
   title: string;
@@ -22,8 +25,7 @@ type Action<T> = { type: "loading" } | { type: "fetched"; payload: T } | { type:
 
 function FetchTextActivity() {
   const { context, extra } = useActivity<FetchTextActivityExtra>();
-  const { strings } = useStrings();
-  const { theme } = useTheme();
+  const { isNetworkAvailable } = useNetwork();
   const { title, url } = extra;
 
   const initialState: State<string> = {
@@ -54,7 +56,7 @@ function FetchTextActivity() {
 
   React.useEffect(() => {
     // Do nothing if the url is not given
-    if (!url) return;
+    if (!url || !isNetworkAvailable) return;
 
     cancelRequest.current = false;
 
@@ -107,34 +109,35 @@ function FetchTextActivity() {
     );
   };
 
+  if (!isNetworkAvailable) {
+    return (
+      <Page renderToolbar={renderToolbar}>
+        <MissingInternet />
+      </Page>
+    );
+  }
+
+  if (!state.data) {
+    return (
+      <Page renderToolbar={renderToolbar}>
+        <ProgressCircular
+          indeterminate
+          style={{
+            position: "absolute",
+            left: "50%",
+            top: "50%",
+            WebkitTransform: "translate(-50%, -50%)",
+            transform: "translate(-50%, -50%)",
+          }}
+        />
+      </Page>
+    );
+  }
+
   return (
     <Page renderToolbar={renderToolbar}>
-      <Page.RelativeContent zeroMargin>
-        {!state.data ? (
-          <ProgressCircular
-            indeterminate
-            style={{
-              position: "absolute",
-              left: "50%",
-              top: "50%",
-              WebkitTransform: "translate(-50%, -50%)",
-              transform: "translate(-50%, -50%)",
-            }}
-          />
-        ) : (
-          <>
-            <Markup
-              sx={{
-                p: {
-                  xs: 1,
-                  sm: 1,
-                  md: 0,
-                },
-              }}
-              children={state.data}
-            />
-          </>
-        )}
+      <Page.RelativeContent>
+        <Markup children={state.data} />
       </Page.RelativeContent>
     </Page>
   );

diff --git a/Website/src/activitys/MainActivity.tsx b/Website/src/activitys/MainActivity.tsx
@@ -111,7 +111,7 @@ const MainActivity = (): JSX.Element => {
     const route = {
       component: props.component,
       props: {
-        key: props.component.name || props.key,
+        key: props.key || props.component.name,
       },
     };
 

diff --git a/Website/src/activitys/MainApplication.tsx b/Website/src/activitys/MainApplication.tsx
@@ -8,10 +8,12 @@ import { Page } from "@Components/onsenui/Page";
 import { useStrings } from "@Hooks/useStrings";
 import { Tabbar, TabbarRenderTab } from "@Components/onsenui/Tabbar";
 import { useRepos } from "@Hooks/useRepos";
+import React from "react";
 
 const MainApplication = () => {
   const { strings } = useStrings();
   const { context } = useActivity();
+  const [index, setIndex] = React.useState(0);
 
   const filteredModules = (modules: Module[], search: string) =>
     modules.filter(
@@ -57,7 +59,19 @@ const MainApplication = () => {
 
   return (
     <Page modifier="noshadow" renderToolbar={renderToolbar}>
-      <Tabbar modifier="noshadow" hideTabs={!os.isAndroid} swipeable={false} position={"top"} renderTabs={renderTabs} />
+      <Tabbar
+        modifier="noshadow"
+        hideTabs={!os.isAndroid}
+        swipeable={false}
+        position={"top"}
+        index={index}
+        onPreChange={(event) => {
+          if (event.index != index) {
+            setIndex(event.index);
+          }
+        }}
+        renderTabs={renderTabs}
+      />
     </Page>
   );
 };

diff --git a/Website/src/activitys/RepoActivity/index.tsx b/Website/src/activitys/RepoActivity/index.tsx
@@ -22,12 +22,12 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { os } from "@Native/Os";
 import { useStrings } from "@Hooks/useStrings";
 import { Page } from "@Components/onsenui/Page";
-import { For } from "@Components/For";
 import { RecommendedRepo } from "./components/RecommendedRepo";
 import { LocalRepository } from "./components/LocalRepository";
+import { useNetwork } from "@Hooks/useNetwork";
 
 const RepoActivity = () => {
-  const MAX_REPO_LENGTH: number = 5;
+  const { isNetworkAvailable } = useNetwork();
   const { context } = useActivity();
   const { strings } = useStrings();
 
@@ -38,7 +38,11 @@ const RepoActivity = () => {
   const [open, setOpen] = React.useState(false);
 
   const handleClickOpen = () => {
-    setOpen(true);
+    if (isNetworkAvailable) {
+      setOpen(true);
+    } else {
+      os.toast("Please chack your internet connection", Toast.LENGTH_SHORT);
+    }
   };
 
   const handleClose = () => {
@@ -92,18 +96,23 @@ const RepoActivity = () => {
               <LocalRepository key={"repo_" + index} repo={repo} />
             ))}
           </Stack>
-        </Page.RelativeContent>
-        <Page.RelativeContent zeroMargin>
-          {filteredRepos.length !== 0 && <Divider />}
-          <List
-            subheader={
-              <ListSubheader sx={(theme) => ({ bgcolor: theme.palette.background.default })}>{strings.explore_repositories}</ListSubheader>
-            }
-          >
-            {recommended_repos.map((repo) => (
-              <RecommendedRepo key={"recomm_" + repo.module_count} name={repo.name} moduleCount={repo.module_count} link={repo.link} />
-            ))}
-          </List>
+
+          {isNetworkAvailable && (
+            <>
+              {filteredRepos.length !== 0 && <Divider />}
+              <List
+                subheader={
+                  <ListSubheader sx={(theme) => ({ bgcolor: theme.palette.background.default })}>
+                    {strings.explore_repositories}
+                  </ListSubheader>
+                }
+              >
+                {recommended_repos.map((repo) => (
+                  <RecommendedRepo key={"recomm_" + repo.module_count} name={repo.name} moduleCount={repo.module_count} link={repo.link} />
+                ))}
+              </List>
+            </>
+          )}
         </Page.RelativeContent>
 
         <Dialog open={open} onClose={handleClose}>

diff --git a/Website/src/activitys/fragments/ExploreModuleFragment.tsx b/Website/src/activitys/fragments/ExploreModuleFragment.tsx
@@ -3,17 +3,18 @@ import { Searchbar } from "@Components/Searchbar";
 import React from "react";
 import { useActivity } from "@Hooks/useActivity";
 import { useRepos } from "@Hooks/useRepos";
-import { Pagination, Stack } from "@mui/material";
+import { Box, Pagination, Stack, Typography } from "@mui/material";
 import { useStrings } from "@Hooks/useStrings";
 import { usePagination } from "@Hooks/usePagination";
 import RepoActivity from "@Activitys/RepoActivity";
 import { useSettings } from "@Hooks/useSettings";
-import DescriptonActivity from "@Activitys/DescriptonActivity";
-import { Properties } from "properties-file";
-import { useStateCallback } from "@Hooks/useStateCallback";
+import NorthEastRoundedIcon from "@mui/icons-material/NorthEastRounded";
 import { useTheme } from "@Hooks/useTheme";
 import { Page, RenderFunction } from "@Components/onsenui/Page";
 import { BottomToolbar } from "@Components/onsenui/BottomToolbar";
+import Icon from "@Components/Icon";
+import { MissingInternet } from "@Components/MissingInternet";
+import { useNetwork } from "@Hooks/useNetwork";
 
 export interface ExploreModuleProps {
   renderToolbar?: RenderFunction;
@@ -26,6 +27,7 @@ const ExploreModuleFragment = (props: ExploreModuleProps) => {
   const { settings } = useSettings();
   const { scheme, theme } = useTheme();
   const { modules, repos } = useRepos();
+  const { isNetworkAvailable } = useNetwork();
   const [search, setSearch] = React.useState("");
 
   const applyFilter = props.applyFilter(modules, search);
@@ -36,35 +38,60 @@ const ExploreModuleFragment = (props: ExploreModuleProps) => {
   const count = Math.ceil(applyFilter.length / PER_PAGE);
   const _DATA = usePagination(applyFilter, PER_PAGE);
 
+  if (!isNetworkAvailable) {
+    return (
+      <Page>
+        <MissingInternet />
+      </Page>
+    );
+  }
+
   if (repos.length === 0) {
     return (
-      <h4
-        style={{
-          color: theme.palette.secondary.dark,
-          position: "absolute",
-          left: "50%",
-          top: "50%",
-          WebkitTransform: "translate(-50%, -50%)",
-          transform: "translate(-50%, -50%)",
-        }}
-      >
-        <span>
-          Looks empty here... Add an{" "}
-          <span
-            style={{
+      <Page>
+        <Stack
+          component="h4"
+          sx={{
+            color: theme.palette.secondary.dark,
+            width: "100%",
+            height: "100%",
+            m: "unset",
+          }}
+          direction="row"
+          justifyContent="center"
+          alignItems="center"
+          spacing={1}
+        >
+          <Box>Looks empty here... Add an</Box>
+          <Stack
+            direction="row"
+            justifyContent="center"
+            alignItems="center"
+            spacing={0.5}
+            sx={{
               color: theme.palette.primary.dark,
+              ":hover": {
+                cursor: "pointer",
+              },
             }}
             onClick={() => {
               context.pushPage({
                 component: RepoActivity,
                 key: "repos",
+                extra: {},
               });
             }}
           >
-            {strings.repository}
-          </span>
-        </span>
-      </h4>
+            <Box>{strings.repository}</Box>
+            <Icon
+              icon={NorthEastRoundedIcon}
+              sx={{
+                fontSize: 18,
+              }}
+            />
+          </Stack>
+        </Stack>
+      </Page>
     );
   }
 

diff --git a/Website/src/components/ExploreModule.tsx b/Website/src/components/ExploreModule.tsx
@@ -120,7 +120,7 @@ export const ExploreModule = (props: Props) => {
         <Chip
           size="small"
           sx={(theme) => ({
-            bgcolor: `${settings.darkmode ? shade(scheme[100], -36) : theme.palette.secondary.light}46`,
+            bgcolor: `${settings.darkmode ? shade(scheme[200], -24.5) : shade(scheme[300], 49)}46`,
           })}
           label={formatLastUpdate}
         />

diff --git a/Website/src/components/Icon.tsx b/Website/src/components/Icon.tsx
@@ -16,9 +16,9 @@ interface IProps extends SvgIconProps {
 const Icon = (props: IProps) => {
   const { settings } = useSettings();
 
-  const { keepLight, ...rest } = props;
+  const { keepLight, icon: WarpperIcon, ...rest } = props;
   return (
-    <props.icon
+    <WarpperIcon
       sx={{
         color: keepLight ? "rgba(255, 255, 255, 1)" : settings.darkmode ? "rgba(255, 255, 255, 1)" : "rgba(0, 0, 0, 0.54)",
         verticalAlign: "baseline",

diff --git a/Website/src/components/MissingInternet.tsx b/Website/src/components/MissingInternet.tsx
@@ -0,0 +1,30 @@
+import Stack from "@mui/material/Stack";
+import WifiOffOutlinedIcon from "@mui/icons-material/WifiOffOutlined";
+import Box from "@mui/material/Box";
+import Icon from "./Icon";
+
+export const MissingInternet = () => {
+  return (
+    <Stack
+      component="h4"
+      sx={(theme) => ({
+        color: theme.palette.secondary.dark,
+        width: "100%",
+        height: "100%",
+        m: "unset",
+      })}
+      direction="column"
+      justifyContent="center"
+      alignItems="center"
+      spacing={2}
+    >
+      <Icon
+        icon={WifiOffOutlinedIcon}
+        sx={{
+          fontSize: 160,
+        }}
+      />
+      <Box>Please check your internet connection</Box>
+    </Stack>
+  );
+};
diff --git a/Website/src/components/onsenui/Page.tsx b/Website/src/components/onsenui/Page.tsx
@@ -83,6 +83,7 @@ const RelativeContent = styled(Content)((props: ContentProps) => {
 
   return {
     boxSizing: "border-box",
+    height: "100%",
     minWidth: props.minWidth ? props.minWidth : 200,
     maxWidth: props.maxWidth ? props.maxWidth : 980,
     margin: "0 auto",

diff --git a/Website/src/hooks/useNetwork.ts b/Website/src/hooks/useNetwork.ts
@@ -0,0 +1,20 @@
+import React from "react";
+
+export const useNetwork = () => {
+  const [isOnline, setNetwork] = React.useState(window.navigator.onLine);
+
+  const updateNetwork = () => {
+    setNetwork(window.navigator.onLine);
+  };
+
+  React.useEffect(() => {
+    window.addEventListener("offline", updateNetwork);
+    window.addEventListener("online", updateNetwork);
+    return () => {
+      window.removeEventListener("offline", updateNetwork);
+      window.removeEventListener("online", updateNetwork);
+    };
+  }, [isOnline]);
+
+  return { isNetworkAvailable: isOnline };
+};