From 73a5c7fae9ffbe9ada721148c8c454a643aceebe Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sun, 20 Feb 2022 16:11:50 +0100
Subject: chore!: restructure repo

I separated public files from the config/dev files. It improves repo
readability.
I also moved dotenv helper to public/inc directory and extract the
Matomo tracker in the same directory.
---
 .../MemeForm/MemeFieldset/MemeFieldset.js          | 103 +++++++++++++++++++++
 .../src/components/MemeForm/MemeForm.js            |  54 +++++++++++
 2 files changed, 157 insertions(+)
 create mode 100644 public/projects/react-small-apps/apps/meme-generator/src/components/MemeForm/MemeFieldset/MemeFieldset.js
 create mode 100644 public/projects/react-small-apps/apps/meme-generator/src/components/MemeForm/MemeForm.js

(limited to 'public/projects/react-small-apps/apps/meme-generator/src/components/MemeForm')

diff --git a/public/projects/react-small-apps/apps/meme-generator/src/components/MemeForm/MemeFieldset/MemeFieldset.js b/public/projects/react-small-apps/apps/meme-generator/src/components/MemeForm/MemeFieldset/MemeFieldset.js
new file mode 100644
index 0000000..2c0520e
--- /dev/null
+++ b/public/projects/react-small-apps/apps/meme-generator/src/components/MemeForm/MemeFieldset/MemeFieldset.js
@@ -0,0 +1,103 @@
+import { useEffect, useState } from "react";
+import Button from "../../commons/Button";
+import Fieldset from "../../commons/Fieldset";
+import Input from "../../commons/Input";
+import InputRange from "../../commons/InputRange";
+import Select from "../../commons/Select";
+
+function MemeFieldset({ headline, setHeadline, xOptions, yOptions }) {
+  const { id, legend, text, fontSize, fontUnit, xPos, yPos } = headline;
+  const [inputTextValue, setInputTextValue] = useState(text);
+  const [inputRangeValue, setInputRangeValue] = useState(fontSize);
+  const [selectX, setSelectX] = useState(xPos);
+  const [selectY, setSelectY] = useState(yPos);
+
+  useEffect(() => {
+    setInputTextValue(text);
+  }, [text]);
+
+  useEffect(() => {
+    setHeadline((previous) => {
+      return previous.map((object) => {
+        if (object.id !== id) return object;
+        return {
+          ...object,
+          text: inputTextValue,
+          fontSize: inputRangeValue,
+          xPos: selectX,
+          yPos: selectY,
+        };
+      });
+    });
+  }, [setHeadline, id, inputTextValue, inputRangeValue, selectX, selectY]);
+
+  const onChange = (e) => {
+    switch (e.target.name) {
+      case "inputText":
+        setInputTextValue(e.target.value);
+        break;
+      case "inputRange":
+        setInputRangeValue(Number(e.target.value));
+        break;
+      case "selectX":
+        setSelectX(e.target.value);
+        break;
+      case "selectY":
+        setSelectY(e.target.value);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const onClick = (e) => {
+    setHeadline((previous) => previous.filter((object) => object.id !== id));
+  };
+
+  return (
+    <Fieldset id={id} legend={legend}>
+      <Button body="Delete" modifier="delete" onClick={onClick} />
+      <div className="form__item">
+        <Input
+          label="Enter your text:"
+          id="inputText"
+          name="inputText"
+          value={inputTextValue}
+          onChangeHandler={onChange}
+        />
+      </div>
+      <div className="form__item">
+        <InputRange
+          label="Choose a font-size:"
+          id="inputRange"
+          name="inputRange"
+          value={inputRangeValue}
+          unit={fontUnit}
+          onChangeHandler={onChange}
+        />
+      </div>
+      <div className="form__item">
+        <Select
+          label="Select the vertical position:"
+          id="selectY"
+          name="selectY"
+          options={yOptions}
+          value={selectY}
+          onChangeHandler={onChange}
+        />
+      </div>
+      <div className="form__item">
+        <Select
+          label="Select the horizontal position:"
+          id="selectX"
+          name="selectX"
+          options={xOptions}
+          value={selectX}
+          onChangeHandler={onChange}
+        />
+      </div>
+    </Fieldset>
+  );
+}
+
+export default MemeFieldset;
diff --git a/public/projects/react-small-apps/apps/meme-generator/src/components/MemeForm/MemeForm.js b/public/projects/react-small-apps/apps/meme-generator/src/components/MemeForm/MemeForm.js
new file mode 100644
index 0000000..b6ce40f
--- /dev/null
+++ b/public/projects/react-small-apps/apps/meme-generator/src/components/MemeForm/MemeForm.js
@@ -0,0 +1,54 @@
+import { useState } from "react";
+import Button from "../commons/Button";
+import Form from "../commons/Form";
+import MemeFieldset from "./MemeFieldset/MemeFieldset";
+
+function MemeForm({ headlines, setHeadlines }) {
+  const [fieldsetId, setFieldsetId] = useState(1);
+  const horizontalOptions = ["Left", "Right", "Center"];
+  const verticalOptions = ["Top", "Bottom", "Middle"];
+
+  const fieldsetData = {
+    id: fieldsetId,
+    legend: `Text settings ${fieldsetId}`,
+    text: "Edit here...",
+    fontSize: 100,
+    fontUnit: "%",
+    xPos: horizontalOptions[(fieldsetId - 1) % horizontalOptions.length],
+    yPos: verticalOptions[(fieldsetId - 1) % verticalOptions.length],
+  };
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+  };
+
+  const fieldsetsList = headlines.map((headline) => {
+    return (
+      <MemeFieldset
+        key={headline.id}
+        headline={headline}
+        setHeadline={setHeadlines}
+        xOptions={horizontalOptions}
+        yOptions={verticalOptions}
+      />
+    );
+  });
+
+  const addNewFieldset = () => {
+    setFieldsetId((previous) => previous + 1);
+    setHeadlines((array) => [...array, fieldsetData]);
+  };
+
+  return (
+    <div className="meme-form">
+      <Form onSubmitHandler={onSubmit}>
+        {fieldsetsList}
+        {fieldsetsList.length < 4 && (
+          <Button body="Add new text" onClick={addNewFieldset} modifier="add" />
+        )}
+      </Form>
+    </div>
+  );
+}
+
+export default MemeForm;
-- 
cgit v1.2.3