feat: multiple minor enhancements

Makefile

@@ -23,7 +23,15 @@ test_python:
 .PHONY: check_python
 check_python: typecheck_python format_python test_python
 
-# NODE TARGETS
+# JAVASCRIPT TARGETS
+
+.PHONY: format_js
+format_js:
+	npm run standard
+
+.PHONY: check_js
+check_js: format_js
+
 
 .PHONY: run_dev_ui_local
 run_dev_ui_local: 
@@ -32,7 +40,7 @@ run_dev_ui_local:
 # UNIVERSAL TARGETS
 
 .PHONY: check
-check: check_python
+check: check_python check_js
 
 .PHONY: build_image
 build_image: check
@@ -44,7 +52,7 @@ run_dev_local: check
 
 .PHONY: run_prod_local
 run_prod_local:
-	export PORT=80 && sh run_prod.sh
+	export PORT=5151 && sh run_prod.sh
 
 .PHONY: run_dev_image
 run_dev_image: build_image

run_prod.sh

@@ -1 +1,4 @@
-gunicorn -b 0.0.0.0:$PORT -w 4 utilities_for_me.web_app.wsgi:app
+gunicorn --access-logfile - \
+    -b 0.0.0.0:$PORT \
+    -w 4 \
+    utilities_for_me.web_app.wsgi:app

utilities_for_me/utilities/_echo/echo.py

@@ -28,3 +28,15 @@ def decode_b64(_str: str) -> str:
         return str(result, UTF_8)
     except Error as e:
         return USER_ERROR_MESSAGE
+
+
+def kebab_case(_str: str) -> str:
+    str_arr = _str.split(" ")
+    result = "-".join(str_arr)
+    return result
+
+
+def snake_case(_str: str) -> str:
+    str_arr = _str.split(" ")
+    result = "_".join(str_arr)
+    return result

utilities_for_me/utilities/_echo/test_echo.py

@@ -26,3 +26,13 @@ def test_encode_b64_returns_base64_encoded_input():
 def test_decode_b64_returns_base64_decoded_input():
     expected = HELLO
     assert echo.decode_b64(BASE_64_HELLO) == expected
+
+
+def test_kebab_case_returns_base64_decoded_input():
+    expected = "hello-there"
+    assert echo.kebab_case("hello there") == expected
+
+
+def test_snake_case_returns_base64_decoded_input():
+    expected = "hello_there"
+    assert echo.snake_case("hello there") == expected

utilities_for_me/web_app/blueprints/api/echo/bp.py

@@ -6,6 +6,8 @@
     _lower,
     encode_b64,
     decode_b64,
+    kebab_case,
+    snake_case,
 )
 
 bp = Blueprint("echo", __name__, url_prefix="/api/v1/echo")
@@ -44,3 +46,17 @@ def b64_decode_handler():
     prev_data = request.get_json(silent=True).get("contents", "")
     data = decode_b64(prev_data)
     return {"data": data}
+
+
+@bp.route("/kebab_case", methods=["POST"])
+def kebab_case_handler():
+    prev_data = request.get_json(silent=True).get("contents", "")
+    data = kebab_case(prev_data)
+    return {"data": data}
+
+
+@bp.route("/snake_case", methods=["POST"])
+def snake_case_handler():
+    prev_data = request.get_json(silent=True).get("contents", "")
+    data = snake_case(prev_data)
+    return {"data": data}

utilities_for_me/web_app/client/react/Echo.js

@@ -5,7 +5,9 @@ const valuesToEndpoint = {
   upper: 'upper',
   lower: 'lower',
   'base-64-encode': 'encode_b64',
-  'base-64-decode': 'decode_b64'
+  'base-64-decode': 'decode_b64',
+  'kebab-case': 'kebab_case',
+  'snake-case': 'snake_case'
 }
 
 const sendRequest = (command, contents) => {
@@ -37,20 +39,25 @@ const EchoBody = ({ contents, handleChange, handleClick }) => {
       <div className='col'>
         <div className='d-flex flex-column p-2 text-center'>
           <h3 className='text-start'>Text To Echo</h3>
-          <input
+          <textarea
             required
+            rows='8'
             className='form-control my-3'
             placeholder='Contents here...'
             value={contents}
             onChange={handleChange}
           />
         </div>
         <div className='p-2'>
-          <button className='btn btn-secondary me-2 mb-3' onClick={handleClick} type='submit' value='echo'>Echo</button>
-          <button className='btn btn-secondary me-2 mb-3' onClick={handleClick} type='submit' value='upper'>Upper</button>
-          <button className='btn btn-secondary me-2 mb-3' onClick={handleClick} type='submit' value='lower'>Lower</button>
-          <button className='btn btn-secondary me-2 mb-3' onClick={handleClick} type='submit' value='base-64-encode'>Base 64 Encode</button>
-          <button className='btn btn-secondary me-2 mb-3' onClick={handleClick} type='submit' value='base-64-decode'>Base 64 Decode</button>
+          <button className='btn btn-secondary me-2 mb-3' onClick={handleClick} value='echo'>Echo 🗣</button>
+          <button className='btn btn-danger me-2 mb-3' onClick={handleClick} value='upper'>Upper 🔠</button>
+          <button className='btn btn-success me-2 mb-3' onClick={handleClick} value='lower'>Lower 🔡</button>
+          <button className='btn btn-info me-2 mb-3' onClick={handleClick} value='base-64-encode'>Base 64 Encode 💽</button>
+          <button className='btn btn-warning me-2 mb-3' onClick={handleClick} value='base-64-decode'>Base 64 Decode 📀</button>
+          <button className='btn btn-success me-2 mb-3' onClick={handleClick} value='kebab-case'>Kebab Case 🍢</button>
+
+          <button className='btn btn-info me-2 mb-3' onClick={handleClick} value='snake-case'>Snake Case 🐍</button>
+
         </div>
       </div>
     </section>
@@ -62,8 +69,8 @@ const EchoResult = ({ result, setResult }) => {
     <section>
       <div className='d-flex flex-column p-2'>
         <h2 className='text-start'>Result</h2>
-        <input
-          required
+        <textarea
+          rows='8'
           className='form-control my-3'
           placeholder='Results will go here...'
           value={result}

utilities_for_me/web_app/client/react/Home.js

@@ -4,20 +4,20 @@ import { Link } from 'react-router-dom'
 
 function Home () {
   return (
-    <main className="mt-4 p-3">
+    <main className='mt-4 p-3'>
       <section className='row'>
         <div className='col'>
           <h1>Welcome To UtilitiesFor.Me</h1>
           <h2>What is <i>Utilities For Me</i>?</h2>
           <p>Great question, <i>UtilitiesFor.Me</i> is what it sounds like... It's simple and fun utilities I find myself needing reasonably regularly and needing to go to sites that I neither know nor trust to get it done! I have written my own version and also made the source available so you can deploy it yourself if you are worried!</p>
         </div>
       </section>
-        <hr></hr>
+      <hr />
       <section className='row mt-3'>
         <div className='col'>
           <h2>Utilities:</h2>
           <ul>
-            <li><Link to='/echo'>Echo</Link></li>
+            <li> <span> <Link to='/echo' className='utility-link'>Echo</Link> &mdash; A collection of utilities associated with general text transformations 🗣</span></li>
           </ul>
         </div>
       </section>

utilities_for_me/web_app/client/react/Navbar.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 function Navbar () {
   return (
-    <nav className='navbar navbar-light bg-light'>
+    <nav className='navbar navbar-light bg-light border-bottom border-info'>
       <div className='container-fluid'>
         <a className='navbar-brand' href='/'><span className='navbar-brand mb-0 h1'>UtilitiesFor.me</span></a>
       </div>

utilities_for_me/web_app/client/react/index.css

@@ -1,3 +1,7 @@
 * {
   font-family: 'Inconsolata', monospace;
+}
+
+.utility-link {
+  color: #0DCAF0;
 }

utilities_for_me/web_app/server.py

@@ -1,7 +1,10 @@
 import os
+import logging
 
 from flask import Flask
 
+logging.basicConfig(level=logging.INFO)
+
 
 def create_app(test_config=None):
     app = Flask(__name__, instance_relative_config=True)