feat: start adding state logic to component.

website/src/components/UserFeedback/index.jsx

@@ -1,33 +1,113 @@
 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>
+const initialData = () => ({
+    initialized: Date.now(),
+    closedOrCompleted: false,
+    data: {
+        score: undefined,
+        comment: undefined,
+        customerType: undefined,
+    },
+});
+
+const fetchData = (initialData) => {
+    const localstorageKey = 'user-feedback';
+
+    return initialData;
+    // check localstorage
+    // populate if there is
+};
+
+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 />
                 </button>
             </div>
             <form>
                 <p>
                     <span className="visually-hidden">
-                    On a scale from 1 to 5 where 1 is very unsatisfied and 5 is
+                        On a scale from 1 to 5 where 1 is very unsatisfied and 5
-                    very satisfied,
+                        is very satisfied,
                     </span>{' '}
-                How would you rate your overall satisfaction with the Unleash
+                    How would you rate your overall satisfaction with the
-                documentation?
+                    Unleash documentation?
                 </p>
 
-            <div className={styles["satisfaction-input-container"]}>
+                <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"]) }
+                                className={join(
+                                    'visually-hidden',
+                                    styles['user-satisfaction-score-input'],
+                                )}
                                 required
                                 id={`user-satisfaction-score-${n}`}
                                 name="satisfaction-level"
@@ -35,7 +115,9 @@ const Component = ({ text }) => (
                                 value={n}
                             />
                             <label
-                            className={styles["user-satisfaction-score-label"]}
+                                className={
+                                    styles['user-satisfaction-score-label']
+                                }
                                 htmlFor={`user-satisfaction-score-${n}`}
                             >
                                 {n}
@@ -44,12 +126,13 @@ const Component = ({ text }) => (
                     ))}
                     <span aria-hidden="true">Very satisfied</span>
                 </div>
-            <div className={styles["button-container"]}>
+                <div className={styles['button-container']}>
-                <button className={styles["button-secondary"]}>Skip</button>
+                    <button className={styles['button-secondary']}>Skip</button>
                     <button type="submit">Next</button>
                 </div>
             </form>
         </article>
     );
+};
 
 export default Component;