update app

Author: cecoeco

app/src-react/assets/css/index.css

@@ -2,7 +2,6 @@
 @import "fonts.css";
 
 :root {
-  --theme-hue: 340;
   font-family: "Roboto Slab", sans-serif;
   font-optical-sizing: auto;
   font-feature-settings: "liga" 1, "calt" 1;

app/src-react/assets/css/themes.css

@@ -62,4 +62,8 @@
   --scrollbar-color: hsla(var(--theme-hue), 100%, 83%, 0.25);
   --scrollbar-color-hover: hsla(var(--theme-hue), 100%, 83%, 0.5);
   --scrollbar-color-active: hsla(var(--theme-hue), 100%, 83%, 0.75);
+}
+
+:root {
+  --theme-hue: 25;
 }

app/src-react/components/header.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect } from "react";
 import "../assets/css/header.css";
-
 import GitHub from "../assets/svgs/github.svg?react";
 import Sun from "../assets/svgs/sun.svg?react";
 import Moon from "../assets/svgs/moon.svg?react";

app/src-react/index.tsx

@@ -1,13 +1,14 @@
 import React, { useState } from "react";
 import ReactDOM from "react-dom/client";
-
 import "./assets/css/index.css";
-
 import Header from "./components/header.tsx";
 import Footer from "./components/footer.tsx";
 
+type MetricKey = keyof typeof metricEndpoints;
+type Metrics = Record<MetricKey, number>;
+
 const metricEndpoints = {
-  ari: "/api/ari",
+  automatic_reading_index: "/api/ari",
   characters: "/api/characters",
   characters_per_word: "/api/characters-per-word",
   coleman_liau: "/api/coleman-liau",
@@ -20,93 +21,64 @@ const metricEndpoints = {
   reading_time: "/api/reading-time",
   sentences: "/api/sentences",
   sentences_per_paragraph: "/api/sentences-per-paragraph",
-  smog: "/api/smog",
+  simple_measure_of_gobbledygook: "/api/smog",
   spache: "/api/spache",
   speaking_time: "/api/speaking-time",
   syllables: "/api/syllables",
   syllables_per_word: "/api/syllables-per-word",
   words: "/api/words",
   words_per_sentence: "/api/words-per-sentence",
-};
+} as const;
 
-const fetchMetric = (text: string, endpoint: string, setMetricValue: Function) => {
+const fetchMetric = (
+  text: string,
+  endpoint: string,
+  setMetricValue: (value: number) => void
+) => {
   fetch(endpoint, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: text,
   })
     .then((response) => response.json())
-    .then((data) => {
+    .then((data: number) => {
       setMetricValue(data);
     })
     .catch((error) => console.error(`Error fetching metric from ${endpoint}:`, error));
 };
 
 const onTextInput = (
   event: React.ChangeEvent<HTMLTextAreaElement>,
-  setMetrics: Function
+  setMetrics: React.Dispatch<React.SetStateAction<Metrics>>
 ) => {
   const text = event.target.value.trim();
-
+  const resetMetrics: Metrics = Object.keys(metricEndpoints).reduce((acc, key) => {
+    acc[key as MetricKey] = 0;
+    return acc;
+  }, {} as Metrics);
+  
   if (!text) {
-    setMetrics({
-      ari: 0,
-      characters: 0,
-      characters_per_word: 0,
-      coleman_liau: 0,
-      dale_chall: 0,
-      flesch_kincaid_grade_level: 0,
-      flesch_reading_ease_score: 0,
-      gunning_fog: 0,
-      lines: 0,
-      paragraphs: 0,
-      reading_time: 0,
-      sentences: 0,
-      sentences_per_paragraph: 0,
-      smog: 0,
-      spache: 0,
-      speaking_time: 0,
-      syllables: 0,
-      syllables_per_word: 0,
-      words: 0,
-      words_per_sentence: 0,
-    });
+    setMetrics(resetMetrics);
     return;
   }
 
-  for (const [metric, endpoint] of Object.entries(metricEndpoints)) {
+  (Object.entries(metricEndpoints) as [MetricKey, string][]).forEach(([metric, endpoint]) => {
     fetchMetric(text, endpoint, (value: number) => {
-      setMetrics((prevMetrics: any) => ({
+      setMetrics((prevMetrics) => ({
         ...prevMetrics,
         [metric]: value,
       }));
     });
-  }
+  });
 };
 
-const App = () => {
-  const [metrics, setMetrics] = useState({
-    ari: 0,
-    characters: 0,
-    characters_per_word: 0,
-    coleman_liau: 0,
-    dale_chall: 0,
-    flesch_kincaid_grade_level: 0,
-    flesch_reading_ease_score: 0,
-    gunning_fog: 0,
-    lines: 0,
-    paragraphs: 0,
-    reading_time: 0,
-    sentences: 0,
-    sentences_per_paragraph: 0,
-    smog: 0,
-    spache: 0,
-    speaking_time: 0,
-    syllables: 0,
-    syllables_per_word: 0,
-    words: 0,
-    words_per_sentence: 0,
-  });
+const App: React.FC = () => {
+  const initialMetrics: Metrics = Object.keys(metricEndpoints).reduce((acc, key) => {
+    acc[key as MetricKey] = 0;
+    return acc;
+  }, {} as Metrics);
+
+  const [metrics, setMetrics] = useState<Metrics>(initialMetrics);
 
   return (
     <React.StrictMode>
@@ -116,35 +88,20 @@ const App = () => {
           <textarea
             id="readability-textarea"
             className="textarea"
-            placeholder="Paste your text here..."
+            placeholder="Paste or type your text here..."
             spellCheck="false"
             onInput={(event: React.ChangeEvent<HTMLTextAreaElement>) =>
               onTextInput(event, setMetrics)
             }
           />
         </div>
-          <div className="metrics">
-            <div className="metric">Automated Readability Index (ARI): {metrics.ari}</div>
-            <div className="metric">Characters: {metrics.characters}</div>
-            <div className="metric">Characters per Word: {metrics.characters_per_word}</div>
-            <div className="metric">Coleman-Liau Index: {metrics.coleman_liau}</div>
-            <div className="metric">Dale-Chall Readability Score: {metrics.dale_chall}</div>
-            <div className="metric">Flesch-Kincaid Grade Level: {metrics.flesch_kincaid_grade_level}</div>
-            <div className="metric">Flesch Reading Ease Score: {metrics.flesch_reading_ease_score}</div>
-            <div className="metric">Gunning Fog Index: {metrics.gunning_fog}</div>
-            <div className="metric">Lines: {metrics.lines}</div>
-            <div className="metric">Paragraphs: {metrics.paragraphs}</div>
-            <div className="metric">Reading Time: {metrics.reading_time}</div>
-            <div className="metric">Sentences: {metrics.sentences}</div>
-            <div className="metric">Sentences per Paragraph: {metrics.sentences_per_paragraph}</div>
-            <div className="metric">SMOG Index: {metrics.smog}</div>
-            <div className="metric">Spache Index: {metrics.spache}</div>
-            <div className="metric">Speaking Time: {metrics.speaking_time}</div>
-            <div className="metric">Syllables: {metrics.syllables}</div>
-            <div className="metric">Syllables per Word: {metrics.syllables_per_word}</div>
-            <div className="metric">Words: {metrics.words}</div>
-            <div className="metric">Words per Sentence: {metrics.words_per_sentence}</div>
-          </div>
+        <div className="metrics">
+          {Object.entries(metrics).map(([metric, value]) => (
+            <div key={metric} className="metric">
+              {metric.replace(/_/g, ' ').replace(/\b\w/g, char => char.toUpperCase())}: {value}
+            </div>
+          ))}
+        </div>
       </main>
       <Footer />
     </React.StrictMode>
@@ -154,6 +111,5 @@ const App = () => {
 const rootElement = document.getElementById("root") as HTMLDivElement;
 
 if (rootElement) {
-  const root = ReactDOM.createRoot(rootElement);
-  root.render(<App />);
+  ReactDOM.createRoot(rootElement).render(<App />);
 }

src/Readability.jl

@@ -1,7 +1,7 @@
 """
 # Readability.jl
 
-Julia package for computing readability scores.
+Julia package for computing readability scores and text statistics.
 
 ## Functions:
 
@@ -78,4 +78,4 @@ for file in [
     include(file)
 end
 
-end
+end # Readability.jl