diff --git a/frontend/src/common.styles.js b/frontend/src/common.styles.js index 541a9037ff..616acd9612 100644 --- a/frontend/src/common.styles.js +++ b/frontend/src/common.styles.js @@ -103,4 +103,21 @@ export const useCommonStyles = makeStyles(theme => ({ opacity: '0', transition: 'transform 1.25s ease, opacity 1s ease', }, + fadeInTopStart: { + opacity: '0', + position: 'fixed', + right: '40px', + top: '40px', + transform: 'translateY(-400px)', + }, + fadeInTopEnter: { + transform: 'translateY(100px)', + opacity: '1', + transition: 'transform 0.6s ease, opacity 1s ease', + }, + fadeInTopLeave: { + transform: 'translateY(-400px)', + opacity: '0', + transition: 'transform 1.25s ease, opacity 1s ease', + }, })); diff --git a/frontend/src/component/App.tsx b/frontend/src/component/App.tsx index 81730c5347..e74f048560 100644 --- a/frontend/src/component/App.tsx +++ b/frontend/src/component/App.tsx @@ -12,7 +12,7 @@ import styles from './styles.module.scss'; import IAuthStatus from '../interfaces/user'; import { useState, useEffect } from 'react'; import NotFound from './common/NotFound/NotFound'; -import Feedback from './common/Feedback'; +import Feedback from './common/Feedback/Feedback'; import SWRProvider from './providers/SWRProvider/SWRProvider'; import ConditionallyRender from './common/ConditionallyRender'; import EnvironmentSplash from './common/EnvironmentSplash/EnvironmentSplash'; @@ -109,6 +109,8 @@ const App = ({ location, user, fetchUiBootstrap }: IAppProps) => { show={} elseShow={
+ + { } /> - -
} /> diff --git a/frontend/src/component/common/Feedback/Feedback.styles.ts b/frontend/src/component/common/Feedback/Feedback.styles.ts index d080ede874..19a65e3335 100644 --- a/frontend/src/component/common/Feedback/Feedback.styles.ts +++ b/frontend/src/component/common/Feedback/Feedback.styles.ts @@ -2,7 +2,7 @@ import { makeStyles } from '@material-ui/core/styles'; export const useStyles = makeStyles(theme => ({ feedback: { - borderRadius: '3px', + borderRadius: '12.5px', backgroundColor: '#fff', zIndex: '9999', boxShadow: '2px 2px 4px 4px rgba(143,143,143, 0.25)', @@ -12,7 +12,7 @@ export const useStyles = makeStyles(theme => ({ height: '200px', }, animateContainer: { - zIndex: '9999', + zIndex: 9999, }, container: { display: 'flex', diff --git a/frontend/src/component/common/Feedback/Feedback.tsx b/frontend/src/component/common/Feedback/Feedback.tsx index cda7370161..e33779ee88 100644 --- a/frontend/src/component/common/Feedback/Feedback.tsx +++ b/frontend/src/component/common/Feedback/Feedback.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useContext, useState } from 'react'; import { Button, IconButton } from '@material-ui/core'; import classnames from 'classnames'; import CloseIcon from '@material-ui/icons/Close'; @@ -10,6 +10,8 @@ import AnimateOnMount from '../AnimateOnMount/AnimateOnMount'; import ConditionallyRender from '../ConditionallyRender'; import { formatApiPath } from '../../../utils/format-path'; import { Action, Dispatch } from 'redux'; +import UIContext from '../../../contexts/UIContext'; +import useUser from '../../../hooks/api/getters/useUser/useUser'; interface IFeedbackProps { show?: boolean; @@ -19,13 +21,9 @@ interface IFeedbackProps { openUrl: string; } -const Feedback = ({ - show, - hideFeedback, - fetchUser, - feedbackId, - openUrl, -}: IFeedbackProps) => { +const Feedback = ({ feedbackId, openUrl }: IFeedbackProps) => { + const { showFeedback, setShowFeedback } = useContext(UIContext); + const { refetch, feedback } = useUser(); const [answeredNotNow, setAnsweredNotNow] = useState(false); const styles = useStyles(); const commonStyles = useCommonStyles(); @@ -42,15 +40,15 @@ const Feedback = ({ }, body: JSON.stringify({ feedbackId }), }); - await fetchUser(); + await refetch(); } catch { - hideFeedback(); + setShowFeedback(false); } // Await api call to register confirmation window.open(openUrl, '_blank'); setTimeout(() => { - hideFeedback(); + setShowFeedback(false); }, 200); }; @@ -69,22 +67,28 @@ const Feedback = ({ }, body: JSON.stringify({ feedbackId, neverShow: true }), }); - await fetchUser(); + await refetch(); } catch { - hideFeedback(); + setShowFeedback(false); } setTimeout(() => { - hideFeedback(); + setShowFeedback(false); }, 100); }; + console.log(feedback); + const pnps = feedback.find(feedback => feedback.feedbackId === feedbackId); + + if (pnps?.given || pnps?.neverShow) { + return null; + } return (
@@ -96,7 +100,7 @@ const Feedback = ({ > hideFeedback()} + onClick={() => setShowFeedback(false)} > diff --git a/frontend/src/component/common/Feedback/index.tsx b/frontend/src/component/common/Feedback/index.tsx deleted file mode 100644 index cc8d120bd4..0000000000 --- a/frontend/src/component/common/Feedback/index.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Dispatch } from 'react'; -import { connect } from 'react-redux'; -import { Action } from 'redux'; -import { hideFeedback } from '../../../store/feedback/actions'; -import { fetchUser } from '../../../store/user/actions'; -import Feedback from './Feedback'; - -const mapStateToProps = (state: any) => ({ - show: state.feedback.show, -}); - -const mapDispatchToProps = (dispatch: Dispatch) => ({ - hideFeedback: () => { - hideFeedback(dispatch)(); - }, - fetchUser: () => fetchUser()(dispatch), -}); - -export default connect(mapStateToProps, mapDispatchToProps)(Feedback); diff --git a/frontend/src/component/common/ToastRenderer/ToastRenderer.styles.ts b/frontend/src/component/common/ToastRenderer/ToastRenderer.styles.ts new file mode 100644 index 0000000000..74debb6b8c --- /dev/null +++ b/frontend/src/component/common/ToastRenderer/ToastRenderer.styles.ts @@ -0,0 +1,10 @@ +import { makeStyles } from '@material-ui/core/styles'; + +export const useStyles = makeStyles(theme => ({ + toastWrapper: { + right: 0, + left: 0, + margin: '0 auto', + maxWidth: '450px', + }, +})); diff --git a/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx b/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx index 246b240029..0decb11ff3 100644 --- a/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx +++ b/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx @@ -2,13 +2,15 @@ import { Portal } from '@material-ui/core'; import { useContext, useEffect } from 'react'; import { useCommonStyles } from '../../../common.styles'; import UIContext, { IToastData } from '../../../contexts/UIContext'; +import { useStyles } from './ToastRenderer.styles'; import AnimateOnMount from '../AnimateOnMount/AnimateOnMount'; import Toast from './Toast/Toast'; const ToastRenderer = () => { // @ts-ignore-next-line const { toastData, setToast } = useContext(UIContext); - const styles = useCommonStyles(); + const commonStyles = useCommonStyles(); + const styles = useStyles(); const hide = () => { setToast((prev: IToastData) => ({ ...prev, show: false })); @@ -30,10 +32,10 @@ const ToastRenderer = () => { diff --git a/frontend/src/component/feature/CreateFeature/CreateFeature/CreateFeature.tsx b/frontend/src/component/feature/CreateFeature/CreateFeature/CreateFeature.tsx index 455f0f6b1a..ec6222fe33 100644 --- a/frontend/src/component/feature/CreateFeature/CreateFeature/CreateFeature.tsx +++ b/frontend/src/component/feature/CreateFeature/CreateFeature/CreateFeature.tsx @@ -8,10 +8,13 @@ import useFeatureApi from '../../../../hooks/api/actions/useFeatureApi/useFeatur import { CREATE_FEATURE } from '../../../providers/AccessProvider/permissions'; import PermissionButton from '../../../common/PermissionButton/PermissionButton'; import { CF_CREATE_BTN_ID } from '../../../../testIds'; +import { useContext } from 'react'; +import UIContext from '../../../../contexts/UIContext'; const CreateFeature = () => { /* @ts-ignore */ const { setToastData, setToastApiError } = useToast(); + const { setShowFeedback } = useContext(UIContext); const { uiConfig } = useUiConfig(); const history = useHistory(); @@ -46,6 +49,7 @@ const CreateFeature = () => { confetti: true, type: 'success', }); + setShowFeedback(true); } catch (e: any) { setToastApiError(e.toString()); } diff --git a/frontend/src/component/providers/UIProvider/UIProvider.tsx b/frontend/src/component/providers/UIProvider/UIProvider.tsx index ff4c8d6b88..89609e6a8b 100644 --- a/frontend/src/component/providers/UIProvider/UIProvider.tsx +++ b/frontend/src/component/providers/UIProvider/UIProvider.tsx @@ -11,13 +11,16 @@ const UIProvider: React.FC = ({ children }) => { persist: false, type: '', }); + const [showFeedback, setShowFeedback] = useState(); const context = React.useMemo( () => ({ setToast, toastData, + showFeedback, + setShowFeedback, }), - [toastData] + [toastData, showFeedback] ); return {children}; diff --git a/frontend/src/contexts/UIContext.ts b/frontend/src/contexts/UIContext.ts index a2fb6afda8..80799ef056 100644 --- a/frontend/src/contexts/UIContext.ts +++ b/frontend/src/contexts/UIContext.ts @@ -9,11 +9,13 @@ export interface IToastData { confetti?: boolean; type: string; } -interface IFeatureStrategiesUIContext { +interface IUIContext { toastData: IToastData; setToast: React.Dispatch>; + showFeedback: boolean; + setShowFeedback: React.Dispatch>; } -const UIContext = React.createContext(null); +const UIContext = React.createContext(null); export default UIContext;