feat: start adding state logic to component.

website/src/components/UserFeedback/index.jsx

@@ -1,55 +1,138 @@
 import React from 'react';
 import styles from './styles.module.css';
-import CloseIcon from '@site/src/icons/close'
+import CloseIcon from '@site/src/icons/close';
 
-const join = (...cs) => cs.join(" ")
+const join = (...cs) => cs.join(' ');
 
-const Component = ({ text }) => (
+const Step1 = () => <></>;
-    <article className={styles["user-feedback"]}>
+const Step2 = () => <></>;
-        <div className={ styles["close-button-row" ]}>
+const Step3 = () => <></>;
-            <button className={styles["close-button"]} onClick={() => console.log("add some close button action")}>
-            <span className="visually-hidden">close feedback popup</span>
-            <CloseIcon/>
-        </button>
-        </div>
-        <form>
-            <p>
-                <span className="visually-hidden">
-                    On a scale from 1 to 5 where 1 is very unsatisfied and 5 is
-                    very satisfied,
-                </span>{' '}
-                How would you rate your overall satisfaction with the Unleash
-                documentation?
-            </p>
 
-            <div className={styles["satisfaction-input-container"]}>
+const initialData = () => ({
-                <span aria-hidden="true">Very unsatisfied</span>
+    initialized: Date.now(),
-                {[1, 2, 3, 4, 5].map((n) => (
+    closedOrCompleted: false,
-                    <span key={`input-group-${n}`}>
+    data: {
-                        <input
+        score: undefined,
-                            className={join("visually-hidden", styles["user-satisfaction-score-input"]) }
+        comment: undefined,
-                            required
+        customerType: undefined,
-                            id={`user-satisfaction-score-${n}`}
+    },
-                            name="satisfaction-level"
+});
-                            type="radio"
+
-                            value={n}
+const fetchData = (initialData) => {
-                        />
+    const localstorageKey = 'user-feedback';
-                        <label
+
-                            className={styles["user-satisfaction-score-label"]}
+    return initialData;
-                            htmlFor={`user-satisfaction-score-${n}`}
+    // check localstorage
-                        >
+    // populate if there is
-                            {n}
+};
-                        </label>
+
+const FeedbackWrapper = () => {
+    const [feedbackIsOpen, setFeedbackIsOpen] = React.useState(false);
+    const stateReducer = (state, message) => {
+        switch (message.kind) {
+            case 'clear':
+                return initialData();
+            case 'set score':
+                return {
+                    ...state,
+                    data: { ...state.data, score: message.data },
+                };
+            case 'set comment':
+                return {
+                    ...state,
+                    data: { ...state.data, comment: message.data },
+                };
+            case 'set customer type':
+                return {
+                    ...state,
+                    data: { ...state.data, customerType: message.data },
+                };
+        }
+        return state;
+    };
+
+    const [state, dispatch] = React.useReducer(
+        stateReducer,
+        initialData(),
+        fetchData,
+    );
+
+    const clear = () => dispatch({ kind: 'clear' });
+    const setScore = (score) => dispatch({ kind: 'set score', data: score });
+    const setComment = (comment) =>
+        dispatch({ kind: 'set comment', data: comment });
+    const setCustomerType = (customerType) =>
+        dispatch({ kind: 'set customer type', data: customerType });
+
+    return feedbackIsOpen ? (
+        <Component closeFeedback={() => setFeedbackIsOpen(false)} />
+    ) : (
+        <OpenFeedbackButton openFeedback={() => setFeedbackIsOpen(true)} />
+    );
+};
+
+const OpenFeedbackButton = ({ openFeedback }) => {
+    return <button onClick={openFeedback}>Feedback</button>;
+};
+
+const Component = ({ closeFeedback = () => undefined }) => {
+    return (
+        <article className={styles['user-feedback']}>
+            <div className={styles['close-button-row']}>
+                <button
+                    className={styles['close-button']}
+                    onClick={closeFeedback}
+                >
+                    <span className="visually-hidden">
+                        close feedback popup
                     </span>
-                ))}
+                    <CloseIcon />
-                <span aria-hidden="true">Very satisfied</span>
+                </button>
             </div>
-            <div className={styles["button-container"]}>
+            <form>
-                <button className={styles["button-secondary"]}>Skip</button>
+                <p>
-                <button type="submit">Next</button>
+                    <span className="visually-hidden">
-            </div>
+                        On a scale from 1 to 5 where 1 is very unsatisfied and 5
-        </form>
+                        is very satisfied,
-    </article>
+                    </span>{' '}
-);
+                    How would you rate your overall satisfaction with the
+                    Unleash documentation?
+                </p>
+
+                <div className={styles['satisfaction-input-container']}>
+                    <span aria-hidden="true">Very unsatisfied</span>
+                    {[1, 2, 3, 4, 5].map((n) => (
+                        <span key={`input-group-${n}`}>
+                            <input
+                                className={join(
+                                    'visually-hidden',
+                                    styles['user-satisfaction-score-input'],
+                                )}
+                                required
+                                id={`user-satisfaction-score-${n}`}
+                                name="satisfaction-level"
+                                type="radio"
+                                value={n}
+                            />
+                            <label
+                                className={
+                                    styles['user-satisfaction-score-label']
+                                }
+                                htmlFor={`user-satisfaction-score-${n}`}
+                            >
+                                {n}
+                            </label>
+                        </span>
+                    ))}
+                    <span aria-hidden="true">Very satisfied</span>
+                </div>
+                <div className={styles['button-container']}>
+                    <button className={styles['button-secondary']}>Skip</button>
+                    <button type="submit">Next</button>
+                </div>
+            </form>
+        </article>
+    );
+};
 
 export default Component;