Merge pull request #16 from theoleuthardt/feat/word-counter

feat: word-counter fully implemented + lower case revision, needed changes in layout.tsx and well implemented api route

backend/server.ts

@@ -6,6 +6,7 @@ import { colorConvert } from "./src/routes/colorconvert.route";
 import { passwordGenerate } from "./src/routes/passwordgenerate.route";
 import { regexTest } from "./src/routes/regextest.route";
 import { tmzConvert } from "./src/routes/tmzconvert.route";
+import { wordCounter } from "./src/routes/wordcounter.route";
 
 const app = Fastify({ logger: true });
 
@@ -21,6 +22,7 @@ app.register(colorConvert);
 app.register(passwordGenerate);
 app.register(regexTest);
 app.register(tmzConvert);
+app.register(wordCounter);
 
 const PORT = process.env.PORT || 4000;
 app.listen({ port: Number(PORT), host: "0.0.0.0" }, () => {

backend/src/routes/regextest.route.ts

@@ -34,12 +34,12 @@ export async function regexTest(app: FastifyInstance) {
         }
 
         const result = regexPattern.test(data.test);
-        
+
         let output = "";
         if (result) {
-          output = `The input matches the regular expression!`;
+          output = "The input matches the regular expression!";
         } else {
-          output = `The input does not match the regular expression.`;
+          output = "The input does not match the regular expression.";
         }
 
         reply.header("Content-Type", "text/plain").status(200).send(output);

backend/src/routes/wordcounter.route.ts

@@ -0,0 +1,34 @@
+import { FastifyInstance, FastifyReply, FastifyRequest } from "fastify";
+
+interface RequestBody {
+  input: string;
+}
+
+export async function wordCounter(app: FastifyInstance) {
+  app.post(
+    "/api/word-counter",
+    async (
+      request: FastifyRequest<{ Body: RequestBody }>,
+      reply: FastifyReply,
+    ) => {
+      try {
+        const data = request.body;
+        if (!data) {
+          return reply.status(400).send({ error: "No text declared!" });
+        } else if (data.input == "") {
+          return reply.status(400).send({ error: "No text!" });
+        }
+
+        const output = data.input.trim().split(/\s+/).length;
+
+        reply
+          .header("Content-Type", "text/plain")
+          .status(200)
+          .send(output.toString());
+      } catch (error) {
+        console.error("Convert error:", error);
+        reply.status(500).send({ error: "Error while converting!" });
+      }
+    },
+  );
+}

frontend/src/app/password-generator/page.tsx

@@ -5,7 +5,7 @@ import Navbar from "../../components/Navbar";
 import Footer from "../../components/Footer";
 import Button from "../../components/Button";
 
-export default function RgbToHex() {
+export default function PasswordGenerator() {
   const [loading, setLoading] = useState(false);
   const [password, setPassword] = useState("");
 

frontend/src/app/rgb-to-hex/page.tsx

@@ -71,7 +71,7 @@ export default function RgbToHex() {
         <h2 className="text-5xl font-bold text-white mb-16">rgb-to-hex</h2>
         <div className="border-2 border-white p-3 rounded-xl text-center text-white">
           <label className="mr-2" htmlFor="red">
-            Red:
+            red:
           </label>
           <input
             type="number"
@@ -83,7 +83,7 @@ export default function RgbToHex() {
             onInput={checkInput}
           />
           <label className="mx-2 text-white" htmlFor="green">
-            Green:
+            green:
           </label>
           <input
             type="number"
@@ -95,7 +95,7 @@ export default function RgbToHex() {
             onChange={checkInput}
           />
           <label className="mx-2" htmlFor="blue">
-            Blue:
+            blue:
           </label>
           <input
             type="number"

frontend/src/app/word-counter/layout.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import type { Metadata } from "next";
+import { toolLinks } from "@/constants";
+
+export const metadata: Metadata = {
+  title: toolLinks[7].title,
+  description: "Counter for words in text!",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`antialiased`}>{children}</body>
+    </html>
+  );
+}

frontend/src/app/word-counter/page.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import React, { useState } from "react";
+import Navbar from "../../components/Navbar";
+import Footer from "../../components/Footer";
+import Button from "../../components/Button";
+
+export default function WordCounter() {
+  const [loading, setLoading] = useState(false);
+  const [output, setOutput] = useState("");
+
+  const countWords = async () => {
+    setLoading(true);
+
+    const input = (document.getElementById("input") as HTMLInputElement).value;
+
+    try {
+      const response = await fetch(
+        process.env.backend_url + "/api/word-counter",
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ input: input }),
+        },
+      );
+      if (!response.ok) {
+        return new Error(`Error: ${response.statusText}`);
+      }
+      const output: string = await response.text();
+      setOutput(output);
+    } catch (error) {
+      console.error("Error while converting:", error);
+      alert("Error while converting");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const clearInAndOutput = () => {
+    setOutput("");
+    const input = document.getElementById("input") as HTMLInputElement;
+    input.value = "";
+  };
+
+  return (
+    <div className="h-screen w-screen bg-black text-white font-noto flex flex-col items-center">
+      <Navbar renderHomeLink={true} />
+      <div className="w-screen h-screen flex flex-col items-center justify-center">
+        <h2 className="text-5xl font-bold text-white mb-16">word-counter</h2>
+        <div className="border-2 border-white p-3 rounded-xl text-center text-white flex flex-col justify-between">
+          <label className="mr-2 m" htmlFor="input">
+            input text:
+          </label>
+          <textarea
+            id="input"
+            name="input"
+            className="resize max-h-80 max-w-screen-md field-sizing-content bg-black border-1 border-white text-center"
+          />
+        </div>
+        <div className={"flex flex-row items-center gap-4 mt-4 mb-16"}>
+          <Button
+            content={
+              loading ? (
+                <div className="h-10 w-10 border-8 border-blue-100 border-t-blue-500 rounded-full animate-spin" />
+              ) : (
+                "count words"
+              )
+            }
+            onClick={countWords}
+          />
+          <Button content="clear" onClick={clearInAndOutput} />
+        </div>
+        <div className="p-3 rounded-xl text-center">
+          <output id="output" className="text-blue-400 text-3xl">
+            {output && "word count: " + output}
+          </output>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+}