feat: clean up build and prettify stuffs

.gcloudignore

@@ -6,14 +6,30 @@
 # For more information, run:
 #   $ gcloud topic gcloudignore
 #
-.gcloudignore
 # If you would like to upload your .git directory, .gitignore file or files
 # from your .gitignore file, remove the corresponding line
 # below:
+
+## Meta Files and OS Files
+
+.DS_Store
+.gcloudignore
 .git
 .gitignore
 
-# Python
+*.md
+Makefile
+Dockerfile
+
+examples
+meta
+
+run_dev.sh
+run_prod.sh
+setup.cfg
+
+
+## Python
 
 .venv/
 
@@ -31,17 +47,15 @@ dist/
 build/
 *.egg-info/
 
-## Node 
 
-node_modules
+## JavaScript, Node, And Client Assets
+.babelrc
 .cache
 
-# Ignored by the build system
-/setup.cfg
+node_modules
+package-lock.json
+package.json
 
-# Others
-*.md
-Makefile
-run.sh
 utilities_for_me/web_app/raw_assets
-meta
+utilities_for_me/web_app/static
+utilities_for_me/web_app/client

Makefile

@@ -18,7 +18,7 @@ typecheck_python:
 
 .PHONY: test_python
 test_python:
-	coverage run -m pytest utilities_for_me && coverage html
+	coverage run -m pytest -s utilities_for_me && coverage html
 
 .PHONY: check_python
 check_python: typecheck_python format_python test_python

READLIST.md

@@ -52,4 +52,5 @@ This is a collection of documentation items pertaining to the Utilities for Me a
 - [How To Structure a Flask RESTPlus App](https://www.freecodecamp.org/news/structuring-a-flask-restplus-web-service-for-production-builds-c2ec676de563/)
 - [How To Use Flask RESTPlus](https://medium.com/@preslavrachev/designing-well-structured-rest-apis-with-flask-restplus-part-1-7e96f2da8850)
 - [Custom Hooks for React Data Fetching](https://dev.to/nicomartin/the-right-way-to-fetch-data-with-react-hooks-48gc)
-- [Ethical Ads](https://www.ethicalads.io/)
+- [Ethical Ads](https://www.ethicalads.io/)
+- [Make a WYSIWYG](https://codepen.io/saigowthamr/pen/OZmWqW)

package.json

@@ -21,6 +21,7 @@
     "standard": "^16.0.3"
   },
   "dependencies": {
+    "pretty-print-json": "^0.4.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0"

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

@@ -1,4 +1,4 @@
-from flask import Blueprint, redirect, render_template, request, url_for
+from flask import Blueprint, request
 
 from utilities_for_me.utilities._echo.echo import (
     echo,

utilities_for_me/web_app/client/react/App.js

@@ -2,6 +2,8 @@ import React from 'react'
 import { Switch, Route } from 'react-router-dom'
 import Home from './Home'
 import Echo from './Echo'
+import Prettify from './Prettify'
+
 import Navbar from './Navbar'
 import Error from './Error'
 
@@ -13,6 +15,7 @@ function App () {
         <Switch>
           <Route exact path='/' component={Home} />
           <Route path='/echo' component={Echo} />
+          <Route path='/prettify' component={Prettify} />
           <Route component={Error} />
         </Switch>
       </div>

utilities_for_me/web_app/client/react/Home.js

@@ -18,6 +18,7 @@ function Home () {
           <h2>Utilities:</h2>
           <ul>
             <li> <span> <Link to='/echo' className='utility-link'>Echo</Link> &mdash; A collection of utilities associated with general text transformations 🗣</span></li>
+            <li> <span> <Link to='/prettify' className='utility-link'>Prettify</Link> &mdash; A collection of utilities associated with making structured data easier on the eyes ✨</span></li>
           </ul>
         </div>
       </section>

utilities_for_me/web_app/client/react/Prettify.js

@@ -0,0 +1,86 @@
+import React, { useState } from 'react'
+
+import { prettify } from './lib/prettify'
+
+const _prettify = (contents, type) => {
+  console.log(`prettifying for type: ${type}`)
+  return prettify(contents, type)
+}
+
+const PrettifyHeader = () => {
+  return (
+    <section className='row mt-4'>
+      <div className='col'>
+        <div className='d-flex flex-column p-2 '>
+          <h1>Prettify</h1>
+          <p>The <i>Prettify</i> utility contains utilities related to making structured data look prettier to humans.</p>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+const PrettifyBody = ({ contents, handleChange, handleClick }) => {
+  return (
+    <section className='row mt-4'>
+      <div className='col'>
+        <div className='d-flex flex-column p-2 text-center'>
+          <h3 className='text-start'>Content To Prettify</h3>
+          <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-primary me-2 mb-3' onClick={handleClick} value='json'>JSON <strong>&#123;&#125;</strong></button>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+const PrettifyResult = ({ result, setResult }) => {
+  return (
+    <section>
+      <div className='d-flex flex-column p-2'>
+        <h3 className='text-start'>Result</h3>
+        <textarea
+          rows='8'
+          className='form-control my-3'
+          placeholder='Results will go here...'
+          value={result}
+          onChange={(e) => setResult(e.target.value)}
+        />
+      </div>
+    </section>
+  )
+}
+
+function Prettify () {
+  const [contents, setContents] = useState('')
+  const [result, setResult] = useState('')
+
+  const handleChange = (e) => setContents(e.target.value)
+
+  const handleClick = (e) => {
+    e.preventDefault()
+    const type = e.target.value.toLowerCase()
+    const _result = _prettify(contents, type)
+    setResult(_result)
+  }
+
+  return (
+    <div>
+      <PrettifyHeader />
+      <hr />
+      <PrettifyBody contents={contents} handleChange={handleChange} handleClick={handleClick} />
+      <PrettifyResult result={result} setResult={setResult} />
+    </div>
+  )
+}
+
+export default Prettify

utilities_for_me/web_app/client/react/lib/prettify/index.js

@@ -0,0 +1,31 @@
+const JSON_TYPE = "json"
+const HTML_TYPE = "html"
+const JS_TYPE = "js"
+const CSS_TYPE = "css"
+
+const prettifyJSON = (contents) => {
+   let obj
+   try {
+     obj = JSON.parse(contents)
+   } catch (error) {
+     return 'data could not be parsed'
+   }
+   const result = JSON.stringify(obj, null, 2)
+   return result
+}
+
+const prettify = (contents, type) => {
+   let result
+   switch(type){
+      case JSON_TYPE:
+         result = prettifyJSON(contents)
+      default:
+         result = `unsupported content type ${type}`
+   }
+
+  return result
+}
+
+module.exports = {
+  prettify
+}