First operational version of the frontend with data presentation.

sherlock-web/frontend/app/api/submit/route.ts

@@ -3,6 +3,11 @@ export async function POST(req: Request) {
 
     const { username, sites, withNSFW } = data;
 
+    const f = [];
+
+    if (withNSFW)
+        f.push("nsfw");
+
     return await fetch("http://api:8000", {
         method: "POST",
         headers: {
@@ -11,7 +16,7 @@ export async function POST(req: Request) {
         body: JSON.stringify({
             usernames: [username],
             sites,
-            f: ["nsfw"]
+            f
         })
     });
 }

sherlock-web/frontend/app/components/form.tsx

@@ -1,38 +1,43 @@
 "use client"
-import { Grid, Input, Divider, Stack, Checkbox, Button } from "@mui/joy";
+import { Grid, Input, Divider, Stack, Checkbox, Button, Link, Typography } from "@mui/joy";
 
 import SiteCheckbox from "./siteCheckbox";
 
 import * as data from "../../data.json";
 import { ChangeEvent, FormEvent, useState } from "react";
-
-type pageList = {
-    name: string,
-    url: string
-}[];
+import { pageList } from "../page";
 
 let sites: pageList = [];
 let sitesWithNSFW: pageList = [];
 
 const checkedSitesDefault: Record<string, boolean> = {};
 
-for (const [name, values] of Object.entries(data)) {
+const dataEntries = Object.entries(data).sort(([a], [b]) => a.toUpperCase() > b.toUpperCase() ? 1 : -1);
+
+for (const [name, values] of dataEntries) {
+    if (name === "default") 
+        continue;
+
     const {url, isNSFW} = values as any;
 
     const parsedData = {name, url};
 
     sitesWithNSFW.push(parsedData);
 
-    checkedSitesDefault[name] = true;
+    checkedSitesDefault[name] = false;
     
     if (!isNSFW) 
         sites.push(parsedData)    
 }
 
-export default function Form() {
+type FormProps = {
+    setFoundData: (data: pageList) => void
+};
+
+export default function Form({setFoundData}: FormProps) {
     const [withNSFW, setWithNSFW] = useState(false);
     const [loading, setLoading] = useState(false);
-
+    
     const [checkedSites, setCheckedSites] = useState(checkedSitesDefault);
 
     const clickNSFW = (e: ChangeEvent<HTMLInputElement>) => setWithNSFW(e.target.checked);
@@ -59,9 +64,20 @@ export default function Form() {
             },
             body: JSON.stringify({
                 username: e.currentTarget.username.value,
-                sites: Object.entries(checkedSites).filter(([_, value]) => value).map(([key, _]) => key)
+                sites: Object.entries(checkedSites).filter(([_, value]) => value).map(([key, _]) => key),
+                withNSFW
             })
         });
+
+        let parsedData = await response.json();
+
+        parsedData = parsedData.sort((a: any, b: any) => a.name.toUpperCase() > b.name.toUpperCase() ? 1 : -1);
+
+        parsedData = parsedData.filter((item : any) => (item.url !== "Desired sites not found"));
+
+        setFoundData(parsedData);
+
+        setLoading(false);
     };
 
     const currentSite = withNSFW ? sitesWithNSFW : sites;

sherlock-web/frontend/app/page.tsx

@@ -1,18 +1,27 @@
+"use client"
 import { CssVarsProvider  } from '@mui/joy/styles';
 
 import '../node_modules/reset-css/reset.css';
-import { Sheet, Typography } from '@mui/joy';
+import { Box, Button, Grid, Link, Sheet, Stack, Typography } from '@mui/joy';
 import Form from './components/form';
+import { useState } from 'react';
 
 const mainSheetStyle = {
-  width: "100%", 
-  height: "100%",
+  width: "100vw", 
+  height: "100vh",
   padding: "10px",
   boxSizing: "border-box",
   overflow: "hidden"
 };
 
+export type pageList = {
+  name: string,
+  url: string
+}[];
+
 export default function Home() {
+  const [foundData, setFoundData] = useState<pageList | null>(null);
+  
   return (
     <CssVarsProvider defaultMode="dark" modeStorageKey="theme">
       <Sheet sx={mainSheetStyle}>
@@ -20,7 +29,25 @@ export default function Home() {
             Sherlock
         </Typography>
 
-        <Form />
+        {foundData ? 
+          <Stack direction="column" spacing={2} sx={{height: "95%"}}>
+            <Typography level="h4" textAlign="center">Found sites:</Typography>
+          
+            <Grid container spacing={2}  columns={{ xs: 4, sm: 6, md: 8, lg: 10, xl: 12 }} sx={{height: "95%", overflow: "auto"}}>
+              {foundData.map(({name, url}) => {
+                  return (
+                      <Grid xs={2} key={"found-"+name}>
+                          <Link href={url} target="_blank" rel="noreferrer" textAlign="center" sx={{width: "100%", display: "block"}}>
+                              {name}
+                          </Link>
+                      </Grid>
+                  )
+              })}
+            </Grid>
+
+            <Button color="neutral" onClick={() => setFoundData(null)}>Back</Button>
+          </Stack>
+          : <Form setFoundData={setFoundData} /> }
       </Sheet>
     </CssVarsProvider>
   );