joseph ready

.gitignore

@@ -22,7 +22,7 @@ ufarms-react-client.pnp.js
 ufarms-react-client/coverage
 
 # production
-ufarms-react-client/build
+# ufarms-react-client/build
 
 # misc
 ufarms-react-client/.DS_Store

server/__init__.py

@@ -0,0 +1,27 @@
+# from flask import Flask
+# from config import Config
+# from flask_bootstrap import Bootstrap
+# from flask_sqlalchemy import SQLAlchemy
+# from flask_migrate import Migrate
+# from flask_bcrypt import Bcrypt
+# from flask_cors import CORS
+
+# # findme does this replace need for explicit mentions?
+# app = Flask(__name__) #, static_folder='static', template_folder='templates')
+# app.config.from_object(Config)
+# app.secret_key = Config.SECRET_KEY
+
+# # Create a SQLAlchemy database connection
+# app.config['SQLALCHEMY_DATABASE_URI'] = (
+#     f"mysql+mysqlconnector://{Config.DB_USER}:{Config.DB_PASSWORD}@{Config.DB_HOST}/{Config.DB_NAME}"
+#     f"?ssl_ca={Config.APP_PATH}/isrgrootx1.pem"
+# )
+# # findme consider hiding .pem file
+
+# db = SQLAlchemy(app)
+# bootstrap = Bootstrap(app)
+# migrate = Migrate(app, db)
+# bcrypt = Bcrypt()
+# CORS(app)
+# from app import routes, models
+

server/client/README.md

@@ -0,0 +1,14 @@
+This is a starter template for [Learn Next.js](https://nextjs.org/learn).
+
+
+Hi Joseph!
+
+Here's an update about using fetch to dig the Flask framework.  Greek to me xD
+
+
+// Example using fetch
+
+fetch('/testmap')
+  .then(response => response.json())
+  .then(data => console.log(data))
+  .catch(error => console.error('Error:', error));

server/client/app/components/form.module.css

@@ -0,0 +1,5 @@
+.form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

server/client/app/components/login-form.jsx

@@ -0,0 +1,17 @@
+import formStyles from "./form.module.css";
+
+export default function LoginForm() {
+  return (
+    <form className={formStyles.form}>
+      <label htmlFor="email">
+        Email: <input type="text" id="email" />
+      </label>
+      <label htmlFor="password">
+        Password: <input type="text" id="password" />
+      </label>
+      <button type="submit">Log In</button>
+      Or
+      <button>Sign Up</button>
+    </form>
+  );
+}

server/client/app/components/modal-template.jsx

@@ -0,0 +1,25 @@
+import { useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import modalStyles from "./modal.module.css";
+
+export default function ModalTemplate({ isOpen, closeModal, children }) {
+  const dialogRef = useRef();
+
+  useEffect(() => {
+    isOpen ? dialogRef.current?.showModal() : dialogRef.current?.close();
+  }, [isOpen]);
+
+  return createPortal(
+    <dialog
+      autofocus
+      ref={dialogRef}
+      onCancel={closeModal}
+      className={modalStyles.modal}
+    >
+      {children}
+
+      <button onClick={closeModal}>Close</button>
+    </dialog>,
+    document.body
+  );
+}

server/client/app/components/modal.module.css

@@ -0,0 +1,9 @@
+.modal {
+  border: 2px solid brown;
+  border-radius: 10px;
+  background-color: var(--u-green);
+  box-shadow: 3px 3px 7px var(--u-grey);
+}
+.modal::backdrop {
+  background-color: rgba(0, 0, 0, 0.5);
+}

server/client/app/components/user-info-form.jsx

@@ -0,0 +1,25 @@
+import formStyles from "./form.module.css";
+
+export default function UserInfoForm() {
+  return (
+    <form className={formStyles.form}>
+      <label htmlFor="name">
+        Name: <input type="text" id="name" />
+      </label>
+      <label htmlFor="street">
+        Street Address: <input type="text" id="street" />
+      </label>
+      <label htmlFor="street">
+        ZIP or postal code: <input type="text" id="street" />
+      </label>
+      <label htmlFor="street">
+        City: <input type="text" id="street" />
+      </label>
+      <label htmlFor="street">
+        Country or Region: <input type="text" id="street" />
+      </label>
+
+      <button type="submit">Submit</button>
+    </form>
+  );
+}

server/client/app/header.module.css

@@ -0,0 +1,13 @@
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  background-color: brown;
+  box-shadow: 0 2px 6px black;
+  height: 70px;
+}
+.header .logo {
+  margin: 0;
+  font-size: 1.5rem;
+}

server/client/app/home-page.jsx

@@ -0,0 +1,10 @@
+import RootLayout from "./layout";
+import Link from "next/link";
+
+export default function HomePage() {
+  return (
+    <RootLayout>
+      <Link href="/">Home</Link>
+    </RootLayout>
+  );
+}

server/client/app/layout.jsx

@@ -0,0 +1,19 @@
+import "../styles/global.css";
+import hdr from "./header.module.css";
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <head>
+        <title>Ufarms</title>
+      </head>
+      <body>
+        <header className={hdr.header}>
+          <h1 className={hdr.logo}>[Ufarms logo]</h1>
+        </header>
+
+        {children}
+      </body>
+    </html>
+  );
+}

server/client/app/lib/posts.js

@@ -0,0 +1,35 @@
+import fs from "fs";
+import path from "path";
+import matter from "gray-matter";
+
+const postsDirectory = path.join(process.cwd(), "posts");
+
+export function getSortedPostsData() {
+  // Get file names under /posts
+  const fileNames = fs.readdirSync(postsDirectory);
+  const allPostsData = fileNames.map((fileName) => {
+    // Remove ".md" from file name to get id
+    const id = fileName.replace(/\.md$/, "");
+
+    // Read markdown file as string
+    const fullPath = path.join(postsDirectory, fileName);
+    const fileContents = fs.readFileSync(fullPath, "utf8");
+
+    // Use gray-matter to parse the post metadata section
+    const matterResult = matter(fileContents);
+
+    // Combine the data with the id
+    return {
+      id,
+      ...matterResult.data,
+    };
+  });
+  // Sort posts by date
+  return allPostsData.sort((a, b) => {
+    if (a.date < b.date) {
+      return 1;
+    } else {
+      return -1;
+    }
+  });
+}

server/client/app/login-button.module.css

@@ -0,0 +1,12 @@
+.login {
+  height: fit-content;
+  margin-right: 1rem;
+
+  padding: 1.5ch 2.5ch;
+  border: none;
+  border-bottom: 2px dotted brown;
+  border-radius: 14px 14px 2px 2px;
+  background-color: var(--u-green);
+  box-shadow: 1px -1px 2px black;
+  cursor: pointer;
+}

server/client/app/map/page.jsx

@@ -0,0 +1,14 @@
+import RootLayout from "../layout";
+import Link from "next/link";
+
+export const metadata = {
+  title: "Ufarms - Map",
+};
+
+export default function Map() {
+  return (
+    <RootLayout>
+      <Link href="/">Home</Link>
+    </RootLayout>
+  );
+}

server/client/app/page.jsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useState } from "react";
+import loginStyles from "./login-button.module.css";
+import Link from "next/link";
+import RootLayout from "./layout";
+import ModalTemplate from "./components/modal-template";
+import LoginForm from "./components/login-form";
+import UserInfoForm from "./components/user-info-form";
+
+export default function Home() {
+  const [loginShown, setLoginShown] = useState(true);
+  const [userFormShown, setUserFormShown] = useState(false);
+
+  return (
+    <RootLayout>
+      <Link href="/map">See the Map</Link>
+      <button className={loginStyles.login} onClick={() => setLoginShown(true)}>
+        Login
+      </button>
+      <button onClick={() => setUserFormShown(true)}>Show User Form</button>
+
+      <ModalTemplate
+        isOpen={loginShown}
+        closeModal={() => setLoginShown(false)}
+      >
+        <LoginForm />
+      </ModalTemplate>
+
+      <ModalTemplate
+        isOpen={userFormShown}
+        closeModal={() => setUserFormShown(false)}
+      >
+        <UserInfoForm />
+      </ModalTemplate>
+    </RootLayout>
+  );
+}