Merge pull request #68 from soup-bowl/soup-bowl/librarymode

Remove processing actions in favour of libwhatsthis
soup-bowl · Oct 9, 2023 · e4bfd7c · e4bfd7c
2 parents 1e69f51 + d2dca9b
commit e4bfd7c
Show file tree

Hide file tree

Showing 24 changed files with 118 additions and 1,743 deletions.
diff --git a/README.md b/README.md
@@ -16,7 +16,7 @@ React-based [progressive web app][pwa] proof-of-concept designed to provide a to
 * [Cron Conversion](https://whatsth.is/#/cron).
 * [UNIX Timestamp Converter](https://whatsth.is/#/time).
 
-This app comprises of two components - A React frontend (this repository), and a [C# .NET inspection API][api].
+This app comprises of three components - A React frontend (this repository), an [engine library][lib], and a [C# .NET inspection API][api].
 
 ## Getting Started
 
@@ -62,4 +62,5 @@ devOptions: {
 [site]: https://whatsth.is
 [pwa]:  https://web.dev/learn/pwa/progressive-web-apps/
 [api]:  https://github.com/soup-bowl/api.whatsth.is
+[lib]:  https://github.com/soup-bowl/libwhatsthis
 [ext]:  https://github.com/soup-bowl/whatsth.is-browser
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,24 +11,20 @@
     "@mui/icons-material": "^5.14.11",
     "@mui/material": "^5.14.7",
     "@mui/x-data-grid": "^6.16.0",
-    "@types/crypto-js": "^4.1.2",
     "@types/node": "^20.5.7",
     "@types/react": "^18.0.7",
     "@types/react-dom": "^18.2.7",
-    "@types/ua-parser-js": "^0.7.37",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
-    "cronstrue": "^2.27.0",
-    "crypto-js": "^4.1.1",
     "eslint": "^8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "libwhatsthis": "^0.1.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.11.0",
     "typescript": "^5.2.2",
-    "ua-parser-js": "^1.0.36",
     "vite": "^4.4.9"
   },
   "scripts": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -7,10 +7,13 @@ import {
 	Home, AboutPage, CronConversionPage, DomainToolsHome, HelpPage, InspectionHome,
 	InspectonResultDisplay, StringConversionPage, UnixEpochPage, ColourPickerPage
 } from './pages';
-import { ConnectionContext } from './context';
+import { APIContext, ConnectionContext } from './context';
+import { APIAgentType, Agent } from 'libwhatsthis';
 
 const App = () => {
 	const [connectionState, setConnectionState] = useState(navigator.onLine);
+
+	const apiAgent: APIAgentType = new Agent(import.meta.env.VITE_API_URL);
 
 	useEffect(() => {
 		const handleOnline = () => setConnectionState(true);
@@ -27,33 +30,35 @@ const App = () => {
 
 	return (
 		<ErrorBoundary>
-			<ConnectionContext.Provider value={{ connectionState }}>
-				<HashRouter>
-					<Routes>
-						<Route path="/" element={<Layout />}>
-							<Route index element={<Home />} />
-							<Route path="help" element={<HelpPage />} />
-							<Route path="about" element={<AboutPage />} />
-							<Route path="inspect" element={<InspectionHome />} />
-							<Route path="inspect/*" element={<InspectonResultDisplay />} />
-							<Route path="domain/*" element={<DomainToolsHome />} />
-							<Route path="colour" element={<ColourPickerPage />} />
-							<Route path="colour/*" element={<ColourPickerPage />} />
-							<Route path="color" element={<Navigate replace to="/colour" />} />
-							<Route path="cron" element={<CronConversionPage />} />
-							<Route path="cron/*" element={<CronConversionPage />} />
-							<Route path="time" element={<UnixEpochPage />} />
-							<Route path="time/*" element={<UnixEpochPage />} />
-							<Route path="convert" element={<StringConversionPage />} />
-							<Route path="encoder" element={<Navigate replace to="/convert" />} />
-							<Route path="decoder" element={<Navigate replace to="/convert" />} />
-							<Route path="unix" element={<Navigate replace to="/time" />} />
-							<Route path="dns/*" element={<Navigate replace to="/domain" />} />
-							<Route path="*" element={<Navigate replace to="/" />} />
-						</Route>
-					</Routes>
-				</HashRouter>
-			</ConnectionContext.Provider>
+			<APIContext.Provider value={{ apiAgent }}>
+				<ConnectionContext.Provider value={{ connectionState }}>
+					<HashRouter>
+						<Routes>
+							<Route path="/" element={<Layout />}>
+								<Route index element={<Home />} />
+								<Route path="help" element={<HelpPage />} />
+								<Route path="about" element={<AboutPage />} />
+								<Route path="inspect" element={<InspectionHome />} />
+								<Route path="inspect/*" element={<InspectonResultDisplay />} />
+								<Route path="domain/*" element={<DomainToolsHome />} />
+								<Route path="colour" element={<ColourPickerPage />} />
+								<Route path="colour/*" element={<ColourPickerPage />} />
+								<Route path="color" element={<Navigate replace to="/colour" />} />
+								<Route path="cron" element={<CronConversionPage />} />
+								<Route path="cron/*" element={<CronConversionPage />} />
+								<Route path="time" element={<UnixEpochPage />} />
+								<Route path="time/*" element={<UnixEpochPage />} />
+								<Route path="convert" element={<StringConversionPage />} />
+								<Route path="encoder" element={<Navigate replace to="/convert" />} />
+								<Route path="decoder" element={<Navigate replace to="/convert" />} />
+								<Route path="unix" element={<Navigate replace to="/time" />} />
+								<Route path="dns/*" element={<Navigate replace to="/domain" />} />
+								<Route path="*" element={<Navigate replace to="/" />} />
+							</Route>
+						</Routes>
+					</HashRouter>
+				</ConnectionContext.Provider>
+			</APIContext.Provider>
 		</ErrorBoundary>
 	);
 }

diff --git a/src/api/agent.ts b/src/api/agent.ts
diff --git a/src/components/inspectModules.tsx b/src/components/inspectModules.tsx
@@ -1,6 +1,6 @@
 
 import { Button, Card, CardActions, CardContent, Chip, Typography } from "@mui/material";
-import { IInspectionDetails } from "../interfaces";
+import { IInspectionDetails } from "libwhatsthis";
 import { ServiceIcon } from ".";
 
 interface Props {

diff --git a/src/components/modals.tsx b/src/components/modals.tsx
@@ -2,12 +2,12 @@ import {
 	Typography, Button, Grid, Link, IconButton, Stack, styled,
 	Dialog, DialogTitle, DialogContent
 } from "@mui/material";
-import CloseIcon from '@mui/icons-material/Close';
 import { useContext, useEffect, useState } from "react";
-import UAParser from "ua-parser-js";
-import { DialogTitleProps, IIPCollection, IIPGeolocation } from "../interfaces";
+import { DialogTitleProps } from "../interfaces";
 import { ConnectionContext } from "../context";
-import { getCountryFlag } from "../utils/stringUtils";
+import { IPAddresses, IPGeolocation, getBothIPAddresses, getIPGeolocation, getUserAgent } from "libwhatsthis";
+
+import CloseIcon from '@mui/icons-material/Close';
 
 const BootstrapDialog = styled(Dialog)(({ theme }) => ({
 	'& .MuiDialogContent-root': {
@@ -47,8 +47,7 @@ export const UserAgentModel = () => {
 	const handleOpen = () => setOpen(true);
 	const handleClose = () => setOpen(false);
 
-	const uaParser = new UAParser();
-	uaParser.setUA(window.navigator.userAgent);
+	const userAgent = getUserAgent(window.navigator.userAgent);
 
 	return (
 		<div>
@@ -79,31 +78,31 @@ export const UserAgentModel = () => {
 							<Typography fontWeight={700}>Browser</Typography>
 						</Grid>
 						<Grid item xs={12} sm={8}>
-							<Typography>{uaParser.getBrowser().name} {uaParser.getBrowser().version}</Typography>
+							<Typography>{userAgent.browser.name} {userAgent.browser.version}</Typography>
 						</Grid>
 						<Grid item xs={12} sm={4}>
 							<Typography fontWeight={700}>Engine</Typography>
 						</Grid>
 						<Grid item xs={12} sm={8}>
-							<Typography>{uaParser.getEngine().name} {uaParser.getEngine().version}</Typography>
+							<Typography>{userAgent.engine.name} {userAgent.engine.version}</Typography>
 						</Grid>
 						<Grid item xs={12} sm={4}>
 							<Typography fontWeight={700}>Operating System</Typography>
 						</Grid>
 						<Grid item xs={12} sm={8}>
-							<Typography>{uaParser.getOS().name} {uaParser.getOS().version}</Typography>
+							<Typography>{userAgent.system.name} {userAgent.system.version}</Typography>
 						</Grid>
 						<Grid item xs={12} sm={4}>
 							<Typography fontWeight={700}>Device</Typography>
 						</Grid>
 						<Grid item xs={12} sm={8}>
-							<Typography>{uaParser.getDevice().model ?? <em>Unspecified</em>}</Typography>
+							<Typography>{userAgent.device ?? <em>Unspecified</em>}</Typography>
 						</Grid>
 						<Grid item xs={12} sm={4}>
 							<Typography fontWeight={700}>CPU</Typography>
 						</Grid>
 						<Grid item xs={12} sm={8}>
-							<Typography>{uaParser.getCPU().architecture ?? <em>Unspecified</em>}</Typography>
+							<Typography>{userAgent.cpu ?? <em>Unspecified</em>}</Typography>
 						</Grid>
 					</Grid>
 				</DialogContent>
@@ -114,21 +113,15 @@ export const UserAgentModel = () => {
 
 export const MyIpAddressModal = () => {
 	const { connectionState } = useContext(ConnectionContext);
-	const [ips, setIPs] = useState<IIPCollection>({ ipv4: 'N/A', ipv6: 'N/A' });
+	const [ips, setIPs] = useState<IPAddresses>({ ipv4: 'N/A', ipv6: 'N/A' });
 	const [open, setOpen] = useState(false);
 	const handleOpen = () => setOpen(true);
 	const handleClose = () => setOpen(false);
 
 	useEffect(() => {
 		const fetchIPs = async () => {
 			try {
-				const ipv4Response = await fetch('https://4.ident.me/');
-				const ipv4Data = await ipv4Response.text();
-
-				const ipv6Response = await fetch('https://6.ident.me/');
-				const ipv6Data = await ipv6Response.text();
-
-				setIPs({ ipv4: ipv4Data, ipv6: ipv6Data });
+				setIPs(await getBothIPAddresses());
 			} catch (error) {
 				console.error('Error fetching IP data:', error);
 			}
@@ -181,23 +174,15 @@ interface GeoProps {
 }
 
 export const IPAddressGeo = ({ ip }: GeoProps) => {
-	const [geo, setGeo] = useState<IIPGeolocation | undefined>();
+	const [geo, setGeo] = useState<IPGeolocation | undefined>();
 	const [open, setOpen] = useState(false);
 	const handleOpen = () => setOpen(true);
 	const handleClose = () => setOpen(false);
 
 	useEffect(() => {
 		const fetchIPInfo = async () => {
 			try {
-				const response = await fetch(`https://ipinfo.io/${ip}/json`);
-				if (response.ok) {
-					const data = await response.json();
-					const reply: IIPGeolocation = data;
-					reply.icon = getCountryFlag(reply.country) ?? undefined;
-					setGeo(reply);
-				} else {
-					setGeo(undefined);
-				}
+				setGeo(await getIPGeolocation(ip));
 			} catch (error) {
 				console.error('Error fetching IP info:', error);
 				setGeo(undefined);

diff --git a/src/components/reportButton.tsx b/src/components/reportButton.tsx
@@ -1,5 +1,6 @@
 import { Button } from "@mui/material";
-import { IInspectionDetails, ILookupTableLayout } from "../interfaces";
+import { ILookupTableLayout } from "../interfaces";
+import { IInspectionDetails } from "libwhatsthis";
 
 const BrowserDetails = () => {
 	return (window.navigator.userAgent);