Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-14 00:19:16 +01:00
Code Issues Projects Releases Wiki Activity

feat: create step 1 and set up step 2

Browse Source
This commit is contained in:
Thomas Heartman 2022-02-27 15:16:51 +01:00
parent 5340ca28fc
commit da38a419ed
2 changed files with 43 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
website/src/components/UserFeedback/UserFeedback.stories.jsx
View File

@ -13,13 +13,13 @@ FullComponent.args = {
// initialData, // initialData,
}; };
export const Step2 = Template.bind({}); // export const Step2 = Template.bind({});
Step2.args = { // Step2.args = {
seedData: { // seedData: {
...initialData, // ...initialData,
currentStep: 2, // currentStep: 2,
}, // },
}; // };
export const Step3 = Template.bind({}); export const Step3 = Template.bind({});
export const Closed = Template.bind({}); export const Closed = Template.bind({});

49
website/src/components/UserFeedback/index.jsx
View File

@ -17,10 +17,14 @@ const fetchData = (initialData) => {
const localstorageKey = 'user-feedback'; const localstorageKey = 'user-feedback';
return { return {
currentStep: 1,
...initialData,
data: { data: {
score: undefined, score: undefined,
comment: undefined,
customerType: undefined,
...initialData?.data,
}, },
...initialData,
initialized: Date.now(), initialized: Date.now(),
closedOrCompleted: false, closedOrCompleted: false,
}; };
@ -35,7 +39,7 @@ const stateReducer = (state, message) => {
case 'set score': case 'set score':
return { return {
...state, ...state,
// data: { ...state.data, score: message.data }, data: { ...state.data, score: message.data },
}; };
case 'set comment': case 'set comment':
return { return {
@ -50,19 +54,19 @@ const stateReducer = (state, message) => {
case 'step forward': case 'step forward':
return { return {
...state, ...state,
currentStep: min(state.currentStep + 1, 3), currentStep: Math.min(state.currentStep + 1, 3),
}; };
case 'step back': case 'step back':
return { return {
...state, ...state,
currentStep: max(state.currentStep - 1, 1), currentStep: Math.max(state.currentStep - 1, 1),
}; };
} }
return state; return state;
}; };
export const FeedbackWrapper = ({ seedData }) => { export const FeedbackWrapper = ({ seedData }) => {
const [feedbackIsOpen, setFeedbackIsOpen] = React.useState(false); // const [feedbackIsOpen, setFeedbackIsOpen] = React.useState(false);
const [state, dispatch] = React.useReducer( const [state, dispatch] = React.useReducer(
stateReducer, stateReducer,
@ -70,9 +74,10 @@ export const FeedbackWrapper = ({ seedData }) => {
fetchData, fetchData,
); );
console.log(state, state.data);
const clear = () => dispatch({ kind: 'clear' }); const clear = () => dispatch({ kind: 'clear' });
const stepForward = (e) => { const stepForward = () => {
e.preventDefault();
console.log('stepping forward!'); console.log('stepping forward!');
dispatch({ kind: 'step forward' }); dispatch({ kind: 'step forward' });
}; };
@ -84,6 +89,7 @@ export const FeedbackWrapper = ({ seedData }) => {
dispatch({ kind: 'set customer type', data: customerType }); dispatch({ kind: 'set customer type', data: customerType });
const Step1 = () => { const Step1 = () => {
const [newValue, setNewValue] = React.useState(undefined);
return ( return (
<form> <form>
<p> <p>
@ -113,7 +119,7 @@ export const FeedbackWrapper = ({ seedData }) => {
onChange={(e) => { onChange={(e) => {
const value = parseInt(e.target.value); const value = parseInt(e.target.value);
console.log('the value is', value); console.log('the value is', value);
/* setScore(value); */ setNewValue(value);
}} }}
/> />
<label <label
@ -129,8 +135,21 @@ export const FeedbackWrapper = ({ seedData }) => {
<span aria-hidden="true">Very satisfied</span> <span aria-hidden="true">Very satisfied</span>
</div> </div>
<div className={styles['button-container']}> <div className={styles['button-container']}>
<button className={styles['button-secondary']}>Skip</button> <button
<button type="submit" onClick={stepForward}> className={styles['button-secondary']}
type="button"
>
Skip
</button>
<button
type="submit"
onClick={(e) => {
console.log(e);
e.preventDefault();
setScore(newValue);
stepForward();
}}
>
Next Next
</button> </button>
</div> </div>
@ -138,8 +157,6 @@ export const FeedbackWrapper = ({ seedData }) => {
); );
}; };
console.log('bluh');
return ( return (
<article className={styles['user-feedback']}> <article className={styles['user-feedback']}>
<div className={styles['close-button-row']}> <div className={styles['close-button-row']}>
@ -150,7 +167,13 @@ export const FeedbackWrapper = ({ seedData }) => {
<CloseIcon /> <CloseIcon />
</button> </button>
</div> </div>
<Step1 /> {state.currentStep === 1 ? (
<Step1 />
) : state.currentStep === 2 ? (
<Step2 />
) : (
<Step3 />
)}
</article> </article>
); );
}; };