jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui): remove old announcements components and reducer

Browse source
This commit is contained in:
sylenien 2022-12-28 14:10:59 +01:00
parent 9feb0bb91f
commit 3dc3d736ac
19 changed files with 4 additions and 322 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/Router.js
View file

@ -8,7 +8,6 @@ import { fetchUserInfo } from 'Duck/user';
import withSiteIdUpdater from 'HOCs/withSiteIdUpdater';
import Header from 'Components/Header/Header';
import { fetchList as fetchSiteList } from 'Duck/site';
import { fetchList as fetchAnnouncements } from 'Duck/announcements';
import { fetchList as fetchAlerts } from 'Duck/alerts';
import { withStore } from 'App/mstore';
@ -115,7 +114,6 @@ const MULTIVIEW_INDEX_PATH = routes.multiviewIndex();
fetchTenants,
setSessionPath,
fetchSiteList,
fetchAnnouncements,
fetchAlerts,
}
)

99
frontend/app/components/Announcements/Announcements.js
View file

@ -1,99 +0,0 @@
import React from 'react';
import stl from './announcements.module.css';
import ListItem from './ListItem';
import { connect } from 'react-redux';
import { SlideModal, Icon, NoContent, Tooltip } from 'UI';
import { fetchList, setLastRead } from 'Duck/announcements';
import withToggle from 'Components/hocs/withToggle';
import { withRouter } from 'react-router-dom';
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
@withToggle('visible', 'toggleVisisble')
@withRouter
class Announcements extends React.Component {
navigateToUrl = url => {
if (url) {
if (url.startsWith(window.env.ORIGIN || window.location.origin)) {
const { history } = this.props;
var path = new URL(url).pathname
if (path.includes('/metrics')) {
const { siteId, sites } = this.props;
const activeSite = sites.find(s => s.id == siteId);
history.push(`/${activeSite.id + path}`);
} else {
history.push(path)
}
} else {
window.open(url, "_blank")
}
this.toggleModal()
}
}
toggleModal = () => {
if (!this.props.visible) {
const { setLastRead, fetchList } = this.props;
fetchList().then(() => { setTimeout(() => { setLastRead() }, 5000); });
}
this.props.toggleVisisble(!this.props.visible);
}
render() {
const { announcements, visible, loading } = this.props;
const unReadNotificationsCount = announcements.filter(({viewed}) => !viewed).size
return (
<div>
<Tooltip content={ `Announcements` } >
<div className={ stl.button } onClick={ this.toggleModal } data-active={ visible }>
<div className={ stl.counter } data-hidden={ unReadNotificationsCount === 0 }>
{ unReadNotificationsCount }
</div>
<Icon name="bullhorn" size="18" />
</div>
</Tooltip>
<SlideModal
title="Announcements"
right
isDisplayed={ visible }
onClose={ visible && this.toggleModal }
bgColor="gray-lightest"
size="small"
content={
<div className="mx-4">
<NoContent
title={
<div className="flex flex-col items-center justify-center">
<AnimatedSVG name={ICONS.NO_ANNOUNCEMENTS} size={80} />
<div className="text-center text-gray-600 my-4">No announcements to show.</div>
</div>
}
size="small"
show={ !loading && announcements.size === 0 }
>
{
announcements.map(item => (
<ListItem
key={item.key}
announcement={item}
onButtonClick={this.navigateToUrl}
/>
))
}
</NoContent>
</div>
}
/>
</div>
);
}
}
export default connect(state => ({
announcements: state.getIn(['announcements', 'list']),
loading: state.getIn(['announcements', 'fetchList', 'loading']),
siteId: state.getIn([ 'site', 'siteId' ]),
sites: state.getIn([ 'site', 'list' ]),
}), { fetchList, setLastRead })(Announcements);

31
frontend/app/components/Announcements/ListItem/ListItem.js
View file

@ -1,31 +0,0 @@
import React from 'react';
import { Button, Label } from 'UI';
import stl from './listItem.module.css';
const ListItem = ({ announcement, onButtonClick }) => {
return (
<div className={stl.wrapper}>
<div className="flex justify-between items-center mb-3">
<div className="text-sm">{announcement.createdAt && announcement.createdAt.toFormat('LLL dd, yyyy')}</div>
<Label><span className="capitalize">{announcement.type}</span></Label>
</div>
{announcement.imageUrl &&
<img className="w-full border mb-3" src={announcement.imageUrl} />
}
<div>
<h2 className="text-xl mb-2">{announcement.title}</h2>
<div className="mb-2 text-sm text-justify">{announcement.description}</div>
{announcement.buttonUrl &&
<Button
variant="outline"
onClick={() => onButtonClick(announcement.buttonUrl) }
>
<span className="capitalize">{announcement.buttonText}</span>
</Button>
}
</div>
</div>
)
}
export default ListItem

1
frontend/app/components/Announcements/ListItem/index.js
View file

@ -1 +0,0 @@
export { default } from './ListItem';

5
frontend/app/components/Announcements/ListItem/listItem.module.css
View file

@ -1,5 +0,0 @@
.wrapper {
background-color: white;
margin-bottom: 20px;
padding: 15px;
}

39
frontend/app/components/Announcements/announcements.module.css
View file

@ -1,39 +0,0 @@
.wrapper {
position: relative;
}
.button {
position: relative;
cursor: pointer;
display: flex;
align-items: center;
padding: 0 15px;
height: 50px;
transition: all 0.3s;
&:hover {
background-color: $gray-lightest;
transition: all 0.2s;
}
&[data-active=true] {
background-color: $gray-lightest;
}
}
.counter {
position: absolute;
top: 8px;
left: 24px;
background-color: #CC0000;
color: white;
font-size: 9px;
font-weight: 300;
min-width: 16px;
height: 16px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 3px;
}

1
frontend/app/components/Announcements/index.js
View file

@ -1 +0,0 @@
export { default } from './Announcements';

2
frontend/app/components/Session_/EventsBlock/EventsBlock.tsx
View file

@ -13,7 +13,7 @@ import { PlayerContext } from 'App/components/Session/playerContext';
import { observer } from 'mobx-react-lite';
import { RootStore } from 'App/duck'
import { List as ImmList } from 'immutable'
import useCellMeasurerCache from 'Components/shared/DevTools/useCellMeasurerCache'
import useCellMeasurerCache from 'App/hooks/useCellMeasurerCache'
interface IProps {
setEventFilter: (filter: { query: string }) => void

55
frontend/app/components/shared/AnnouncementModal/AnnouncementModal.tsx
View file

@ -1,55 +0,0 @@
import React from 'react';
import { Button, NoContent } from 'UI';
import { connect } from 'react-redux';
import { fetchList, setLastRead } from 'Duck/announcements';
import cn from 'classnames';
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
import ListItem from './ListItem'
interface Props {
unReadNotificationsCount: number;
setLastRead: Function;
list: any;
}
function AnnouncementModal(props: Props) {
const { list, unReadNotificationsCount } = props;
// const onClear = (notification: any) => {
// console.log('onClear', notification);
// props.setViewed(notification.notificationId)
// }
return (
<div className="bg-white box-shadow h-screen overflow-y-auto" style={{ width: '450px'}}>
<div className="flex items-center justify-between p-5 text-2xl">
<div>Announcements</div>
</div>
<div className="pb-5">
<NoContent
title={
<div className="flex items-center justify-between">
<AnimatedSVG name={ICONS.EMPTY_STATE} size="100" />
</div>
}
subtext="There are no alerts to show."
// show={ !loading && unReadNotificationsCount === 0 }
size="small"
>
{list.map((item: any, i: any) => (
<div className="border-b" key={i}>
{/* <ListItem alert={item} onClear={() => onClear(item)} loading={false} /> */}
</div>
))}
</NoContent>
</div>
</div>
);
}
export default connect((state: any) => ({
list: state.getIn(['announcements', 'list']),
}), {
fetchList,
setLastRead,
})(AnnouncementModal);

31
frontend/app/components/shared/AnnouncementModal/ListItem/ListItem.tsx
View file

@ -1,31 +0,0 @@
import React from 'react';
import { Button, Label } from 'UI';
import stl from './listItem.module.css';
const ListItem = ({ announcement, onButtonClick }) => {
return (
<div className={stl.wrapper}>
<div className="flex justify-between items-center mb-3">
<div className="text-sm">{announcement.createdAt && announcement.createdAt.toFormat('LLL dd, yyyy')}</div>
<Label><span className="capitalize">{announcement.type}</span></Label>
</div>
{announcement.imageUrl &&
<img className="w-full border mb-3" src={announcement.imageUrl} />
}
<div>
<h2 className="text-xl mb-2">{announcement.title}</h2>
<div className="mb-2 text-sm text-justify">{announcement.description}</div>
{announcement.buttonUrl &&
<Button
variant="outline"
onClick={() => onButtonClick(announcement.buttonUrl) }
>
<span className="capitalize">{announcement.buttonText}</span>
</Button>
}
</div>
</div>
)
}
export default ListItem

1
frontend/app/components/shared/AnnouncementModal/ListItem/index.ts
View file

@ -1 +0,0 @@
export { default } from './ListItem';

5
frontend/app/components/shared/AnnouncementModal/ListItem/listItem.module.css
View file

@ -1,5 +0,0 @@
.wrapper {
background-color: white;
margin-bottom: 20px;
padding: 15px;
}

1
frontend/app/components/shared/AnnouncementModal/index.ts
View file

@ -1 +0,0 @@
export { default } from './AnnouncementModal';

2
frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
View file

@ -12,7 +12,7 @@ import ErrorDetailsModal from 'App/components/Dashboard/components/Errors/ErrorD
import { useModal } from 'App/components/Modal';
import useAutoscroll, { getLastItemTime } from '../useAutoscroll';
import { useRegExListFilterMemo, useTabListFilterMemo } from '../useListFilter'
import useCellMeasurerCache from '../useCellMeasurerCache'
import useCellMeasurerCache from 'App/hooks/useCellMeasurerCache'
const ALL = 'ALL';
const INFO = 'INFO';

2
frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
View file

@ -12,7 +12,7 @@ import StackEventRow from 'Shared/DevTools/StackEventRow';
import StackEventModal from '../StackEventModal';
import useAutoscroll, { getLastItemTime } from '../useAutoscroll';
import { useRegExListFilterMemo, useTabListFilterMemo } from '../useListFilter'
import useCellMeasurerCache from '../useCellMeasurerCache'
import useCellMeasurerCache from 'App/hooks/useCellMeasurerCache'
const INDEX_KEY = 'stackEvent';
const ALL = 'ALL';

45
frontend/app/duck/announcements.js
View file

@ -1,45 +0,0 @@
import { List, Map } from 'immutable';
import Announcement from 'Types/announcement';
import { RequestTypes } from './requestStateCreator';
import { mergeReducers } from './funcTools/tools';
import { createRequestReducer } from './funcTools/request';
import {
createCRUDReducer,
getCRUDRequestTypes,
createFetchList
} from './funcTools/crud';
const name = 'announcement';
const idKey = 'id';
const SET_LAST_READ = new RequestTypes('announcement/SET_LAST_READ');
const initialState = Map({
list: List()
});
const reducer = (state = initialState, action = {}) => {
switch (action.type) {
case SET_LAST_READ.SUCCESS:
return state.update('list', (list) => list.map(i => ({...i.toJS(), viewed: true })));
}
return state;
};
export function setLastRead() {
return {
types: SET_LAST_READ.toArray(),
call: client => client.get(`/announcements/view`),
};
}
export const fetchList = createFetchList(name);
export default mergeReducers(
reducer,
createCRUDReducer(name, Announcement, idKey),
createRequestReducer({
...getCRUDRequestTypes(name),
}),
);

2
frontend/app/duck/index.ts
View file

@ -19,7 +19,6 @@ import customFields from './customField';
import webhooks from './webhook';
import integrations from './integrations';
import rehydrate from './rehydrate';
import announcements from './announcements';
import errors from './errors';
import funnels from './funnels';
import roles from './roles';
@ -45,7 +44,6 @@ const rootReducer = combineReducers({
customFields,
webhooks,
rehydrate,
announcements,
errors,
funnels,
roles,

2
frontend/app/duck/member.js
View file

@ -1,7 +1,7 @@
import { Map } from 'immutable';
import Member from 'Types/member';
import crudDuckGenerator from './tools/crudDuck';
import withRequestState, { RequestTypes } from 'Duck/requestStateCreator';
import { RequestTypes } from 'Duck/requestStateCreator';
import { reduceDucks } from 'Duck/tools';
const GENERATE_LINK = new RequestTypes('member/GENERATE_LINK');

0
frontend/app/components/shared/DevTools/useCellMeasurerCache.ts → frontend/app/hooks/useCellMeasurerCache.ts
View file