Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

fix: pnps

Browse Source
This commit is contained in:
Fredrik Oseberg 2022-01-28 10:51:48 +01:00
parent ac81955fdf
commit e6ae8db442
10 changed files with 74 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/common.styles.js
View File

@ -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',
},
}));

6
frontend/src/component/App.tsx
View File

@ -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={<Loader />}
elseShow={
<div className={styles.container}>
<ToastRenderer />
<ConditionallyRender
condition={showSplash}
show={
@ -139,8 +141,6 @@ const App = ({ location, user, fetchUiBootstrap }: IAppProps) => {
</LayoutPicker>
}
/>
<ToastRenderer />
</div>
}
/>

4
frontend/src/component/common/Feedback/Feedback.styles.ts
View File

@ -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',

42
frontend/src/component/common/Feedback/Feedback.tsx
View File

@ -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 (
<AnimateOnMount
mounted={show}
start={commonStyles.fadeInBottomStart}
enter={commonStyles.fadeInBottomEnter}
leave={commonStyles.fadeInBottomLeave}
mounted={showFeedback}
start={commonStyles.fadeInTopStart}
enter={commonStyles.fadeInTopEnter}
leave={commonStyles.fadeInTopLeave}
container={styles.animateContainer}
>
<div className={styles.feedback}>
@ -96,7 +100,7 @@ const Feedback = ({
>
<IconButton
className={styles.close}
onClick={() => hideFeedback()}
onClick={() => setShowFeedback(false)}
>
<CloseIcon />
</IconButton>

19
frontend/src/component/common/Feedback/index.tsx
View File

@ -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<Action>) => ({
hideFeedback: () => {
hideFeedback(dispatch)();
},
fetchUser: () => fetchUser()(dispatch),
});
export default connect(mapStateToProps, mapDispatchToProps)(Feedback);

10
frontend/src/component/common/ToastRenderer/ToastRenderer.styles.ts Normal file
View File

@ -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',
},
}));

12
frontend/src/component/common/ToastRenderer/ToastRenderer.tsx
View File

@ -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 = () => {
<Portal>
<AnimateOnMount
mounted={toastData?.show}
start={styles.fadeInBottomStartWithoutFixed}
enter={styles.fadeInBottomEnter}
leave={styles.fadeInBottomLeave}
container={styles.fullWidth}
start={commonStyles.fadeInBottomStartWithoutFixed}
enter={commonStyles.fadeInBottomEnter}
leave={commonStyles.fadeInBottomLeave}
container={styles.toastWrapper}
>
<Toast {...toastData} />
</AnimateOnMount>

4
frontend/src/component/feature/CreateFeature/CreateFeature/CreateFeature.tsx
View File

@ -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());
}

5
frontend/src/component/providers/UIProvider/UIProvider.tsx
View File

@ -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 <UIContext.Provider value={context}>{children}</UIContext.Provider>;

6
frontend/src/contexts/UIContext.ts
View File

@ -9,11 +9,13 @@ export interface IToastData {
confetti?: boolean;
type: string;
}
interface IFeatureStrategiesUIContext {
interface IUIContext {
toastData: IToastData;
setToast: React.Dispatch<React.SetStateAction<IToastData>>;
showFeedback: boolean;
setShowFeedback: React.Dispatch<React.SetStateAction<boolean>>;
}
const UIContext = React.createContext<IFeatureStrategiesUIContext | null>(null);
const UIContext = React.createContext<IUIContext | null>(null);
export default UIContext;