diff --git a/website/src/components/UserFeedback/UserFeedback.stories.jsx b/website/src/components/UserFeedback/UserFeedback.stories.jsx index 5f4ad9eec3..3414ff0457 100644 --- a/website/src/components/UserFeedback/UserFeedback.stories.jsx +++ b/website/src/components/UserFeedback/UserFeedback.stories.jsx @@ -1,21 +1,21 @@ import React from 'react'; -import Component, { initialData, FeedbackWrapper } from './index'; +import { initialData, FeedbackWrapper } from './index'; export default { title: 'User feedback component', - component: Component, + component: FeedbackWrapper, }; const Template = (args) => ; export const FullComponent = Template.bind({}); FullComponent.args = { - initialData, + // initialData, }; export const Step2 = Template.bind({}); Step2.args = { - initialData: { + seedData: { ...initialData, currentStep: 2, }, diff --git a/website/src/components/UserFeedback/index.jsx b/website/src/components/UserFeedback/index.jsx index 63213c5d56..1ccb50e8b8 100644 --- a/website/src/components/UserFeedback/index.jsx +++ b/website/src/components/UserFeedback/index.jsx @@ -17,6 +17,9 @@ const fetchData = (initialData) => { const localstorageKey = 'user-feedback'; return { + data: { + score: undefined, + }, ...initialData, initialized: Date.now(), closedOrCompleted: false, @@ -25,44 +28,45 @@ const fetchData = (initialData) => { // populate if there is }; -export const FeedbackWrapper = ({ initialData }) => { +const stateReducer = (state, message) => { + switch (message.kind) { + case 'clear': + return fetchData(seedData); + 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 }, + }; + case 'step forward': + return { + ...state, + currentStep: min(state.currentStep + 1, 3), + }; + case 'step back': + return { + ...state, + currentStep: max(state.currentStep - 1, 1), + }; + } + return state; +}; + +export const FeedbackWrapper = ({ seedData }) => { 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 }, - }; - case 'step forward': - return { - ...state, - currentStep: min(state.currentStep + 1, 3), - }; - case 'step back': - return { - ...state, - currentStep: max(state.currentStep - 1, 1), - }; - } - return state; - }; const [state, dispatch] = React.useReducer( stateReducer, - initialData, + seedData, fetchData, ); @@ -109,7 +113,7 @@ export const FeedbackWrapper = ({ initialData }) => { onChange={(e) => { const value = parseInt(e.target.value); console.log('the value is', value); - setScore(value); + /* setScore(value); */ }} /> { ); }; - return ( - - } - /> - ); -}; + console.log('bluh'); -const OpenFeedbackButton = ({ openFeedback }) => { - return Feedback; -}; - -export const Step1 = ({ score, stepForward, setScore }) => { - return ( - - - - On a scale from 1 to 5 where 1 is very unsatisfied and 5 is - very satisfied, - {' '} - How would you rate your overall satisfaction with the Unleash - documentation? - - - - Very unsatisfied - {[1, 2, 3, 4, 5].map((n) => ( - - { - const value = parseInt(e.target.value); - console.log('the value is', value); - setScore(value); - }} - /> - - {n} - - - ))} - Very satisfied - - - Skip - - Next - - - - ); -}; - -const Component = ({ closeFeedback = () => undefined, CurrentStep }) => { return ( - + close feedback popup - - {CurrentStep} + ); }; -export default Component; +const OpenFeedbackButton = ({ openFeedback }) => { + return Feedback; +};
- - On a scale from 1 to 5 where 1 is very unsatisfied and 5 is - very satisfied, - {' '} - How would you rate your overall satisfaction with the Unleash - documentation? -