Const ChangelogDisplay
ChangelogDisplay: ComponentClass<object & StyledComponentProps<"changelogHeader" | "expansionPanelDetails">, any> | FunctionComponent<object & StyledComponentProps<"changelogHeader" | "expansionPanelDetails">> = withStyles(styles)(class extends React.Component<ChangelogDisplayProps, ChangelogDisplayState> {constructor(props: ChangelogDisplayProps) {super(props);this.state = {panelsOpen: new Set([getCurrentVersion()]),};}public async componentDidMount() {const background = await getBackgroundWindow();background.hasNewVersion$.next(false);}public render() {const {classes} = this.props;const currentMinor = getMinorVersion(getCurrentVersion());const currentChangelog = new Map();const oldChangelog = new Map();for (const [version, changes] of CHANGELOG.entries()) {const minorVersion = getMinorVersion(version);if (minorVersion && minorVersion === currentMinor) {currentChangelog.set(version, changes);} else {let versionChanges = oldChangelog.get(minorVersion);if (!versionChanges) {versionChanges = [];oldChangelog.set(minorVersion, versionChanges);}versionChanges.push(...changes);}}const renderedCurrentChangelog = Array.from(currentChangelog.entries()).map(([version, changes]) => this.renderVersionPanel(version, changes));const renderedOldChangelog = Array.from(oldChangelog.entries()).map(([version, changes]) => this.renderVersionPanel(version, changes));return (<><Typography className={classes.changelogHeader} variant="h5" color="textPrimary" gutterBottom>{_("changelog__current_version__header")}</Typography>{renderedCurrentChangelog}<Typography className={classes.changelogHeader} variant="h5" color="textPrimary" gutterBottom>{_("changelog__previous_versions__header")}</Typography>{renderedOldChangelog}</>);}private togglePanel(key: string) {const {panelsOpen} = this.state;if (panelsOpen.has(key)) {panelsOpen.delete(key);} else {panelsOpen.add(key);}this.setState({panelsOpen});}private renderChange(changes: Change[]) {return changes.map((change, index) => (<div key={index}><Typography component="div" paragraph><ReactMarkdownsource={change}linkTarget="_blank"/></Typography>{index < changes.length - 1 && (<Divider/>)}</div>));}private renderVersionPanel(version: string, changes: Change[]) {const {classes} = this.props;const {panelsOpen} = this.state;const renderedChange = this.renderChange(changes);const handleTogglePanel = () => this.togglePanel(version);return (<ExpansionPanelkey={version}expanded={panelsOpen.has(version)}onChange={handleTogglePanel}><ExpansionPanelSummary expandIcon={<ExpandMoreIcon/>}><Typography color="primary" variant="h6">Version {version}</Typography></ExpansionPanelSummary><ExpansionPanelDetails className={classes.expansionPanelDetails}>{renderedChange}</ExpansionPanelDetails></ExpansionPanel>);}},)
Const Popup
Popup: ComponentClass<object & StyledComponentProps<"content" | "toolbar" | "root" | "grow" | "buttonIconLeft" | "activeDrawerLink" | "appBar" | "badge" | "drawer" | "drawerPaper" | "menuButton">, any> | FunctionComponent<object & StyledComponentProps<"content" | "toolbar" | "root" | "grow" | "buttonIconLeft" | "activeDrawerLink" | "appBar" | "badge" | "drawer" | "drawerPaper" | "menuButton">> = withStyles(styles, {withTheme: true})(withRouter(class extends React.Component<PopupProps, PopupState> {public hasNewVersionSub?: rxjs.Subscription;public unseenEpsCountSub?: rxjs.Subscription;constructor(props: PopupProps) {super(props);this.state = {changelogBadgeVisible: false,drawerOpen: false,unseenEpisodesCount: 0,};}public componentWillUnmount() {if (this.hasNewVersionSub) this.hasNewVersionSub.unsubscribe();if (this.unseenEpsCountSub) this.unseenEpsCountSub.unsubscribe();}public async componentDidMount() {const {history} = this.props;const background = await getBackgroundWindow();this.hasNewVersionSub = background.hasNewVersion$.subscribe(changelogBadgeVisible => {if (changelogBadgeVisible) history.push("/changelog");this.setState({changelogBadgeVisible});});const animeSubsWithUnseenEpsCount$ = await getAnimeSubsWithUnseenEpsCount$();this.unseenEpsCountSub = animeSubsWithUnseenEpsCount$.subscribe(unseenEpisodesCount => this.setState({unseenEpisodesCount}));}public render() {const {classes, theme} = this.props;const {changelogBadgeVisible, unseenEpisodesCount} = this.state;const getLink = (target: string) => React.forwardRef((props: {}, ref: any) => (<NavLinkinnerRef={ref}to={target}activeClassName={classes.activeDrawerLink}{...props}/>));const homeLink = getLink("/home");const subscriptionsLink = getLink("/subscriptions");const changelogLink = getLink("/changelog");const feedbackLink = getLink("/feedback");const helpLink = getLink("/help");const handleOpenOptions = () => chrome.runtime.openOptionsPage();const drawer = (<><List>{/* TODO Material-UI doesn't accept the "component" prop */}<ListItem button {...{component: homeLink}}><ListItemIcon><HomeIcon/></ListItemIcon><ListItemText primary={_("popup__nav__home")}/></ListItem>{/* TODO Material-UI doesn't accept the "component" prop */}<ListItem button {...{component: subscriptionsLink}}><ListItemIcon><SubscriptionsIcon/></ListItemIcon><ListItemText><BadgebadgeContent={unseenEpisodesCount}max={9}className={classes.badge}color="secondary">{_("popup__nav__subscriptions")}</Badge></ListItemText></ListItem>{/* TODO Material-UI doesn't accept the "component" prop */}<ListItem button {...{component: changelogLink}}><ListItemIcon><HistoryIcon/></ListItemIcon><ListItemText><Badgevariant="dot"invisible={!changelogBadgeVisible}className={classes.badge}color="secondary">{_("popup__nav__changelog")}</Badge></ListItemText></ListItem></List><Divider/><List><ListItem button onClick={handleOpenOptions}><ListItemIcon><SettingsIcon/></ListItemIcon><ListItemText primary={_("popup__nav__settings")}/><OpenInNewIcon fontSize="small"/></ListItem>{/* TODO Material-UI doesn't accept the "component" prop */}<ListItem button {...{component: feedbackLink}}><ListItemIcon><FeedbackIcon/></ListItemIcon><ListItemText primary={_("popup__nav__feedback")}/></ListItem>{/* TODO Material-UI doesn't accept the "component" prop */}<ListItem button {...{component: helpLink}}><ListItemIcon><HelpIcon/></ListItemIcon><ListItemText primary={_("popup__nav__help")}/></ListItem><DebugLink/></List></>);const handleToggleDrawer = this.toggleDrawer.bind(this);return (<div className={classes.root}><CssBaseline/><AppBar position="fixed" className={classes.appBar}><Toolbar><IconButtoncolor="inherit"className={classes.menuButton}onClick={handleToggleDrawer}><MenuIcon/></IconButton><Typography variant="h6" color="inherit" className={classes.grow}>{_("ext_name")}</Typography></Toolbar></AppBar><nav className={classes.drawer}><Hidden smUp implementation="css"><SwipeableDrawervariant="temporary"anchor={theme.direction === "rtl" ? "right" : "left"}open={this.state.drawerOpen}onOpen={handleToggleDrawer}onClick={handleToggleDrawer}onClose={handleToggleDrawer}classes={{paper: classes.drawerPaper}}ModalProps={{keepMounted: true}}>{drawer}</SwipeableDrawer></Hidden><Hidden xsDown implementation="css"><Drawerclasses={{paper: classes.drawerPaper}}variant="permanent"open>{drawer}</Drawer></Hidden></nav><main className={classes.content}><div className={classes.toolbar}/><Switch><Redirect exact path="/" to="/home"/><Route path="/home" render={this.renderHome}/><Route path="/subscriptions" render={this.renderSubscriptions}/><Route path="/changelog" render={this.renderChangelog}/><Route path="/feedback" render={this.renderFeedback}/><Route path="/help" render={this.renderHelp}/></Switch></main></div>);}private toggleDrawer() {this.setState({drawerOpen: !this.state.drawerOpen});}private renderHome = () => {return (<Typography paragraph>Hello World!</Typography>);};private renderSubscriptions = () => {return <SubscriptionsDisplay/>;};private renderChangelog = () => {return <ChangelogDisplay/>;};private renderFeedback = () => {const {classes} = this.props;const handleOpenIssues = () => window.open("https://github.com/myanimestream/dolos/issues");return (<Card><CardActionArea><CardContent><Typography gutterBottom variant="h5">GitHub Issues</Typography><Typography>{_("popup__feedback__github_issues__text")}</Typography></CardContent></CardActionArea><CardActions><Buttonvariant="contained"color="primary"onClick={handleOpenIssues}><GitHubIcon className={classes.buttonIconLeft}/>{_("popup__feedback__github_issues__action")}</Button></CardActions></Card>);};private renderHelp = () => {return (<Help/>);};},))