lightcordwarez
/
BetterDiscordApp-rauenzi
mirror of https://github.com/rauenzi/BetterDiscordApp.git
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

Convert stateless components

This commit is contained in:
Zack Rauen 2023-03-06 02:50:48 -05:00
parent c6d58bdc2d
commit 2976a4cf00
4 changed files with 54 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
renderer/src/ui/blankslates/emptyimage.jsx
View File

@ -1,17 +1,15 @@
import {React, DiscordClasses} from "modules"; import {React, DiscordClasses} from "modules";
import SimpleMarkdown from "../../structs/markdown"; import SimpleMarkdown from "../../structs/markdown";
export default class EmptyImage extends React.Component { export default function EmptyImage(props) {
render() { return <div className={`bd-empty-image-container ${DiscordClasses.EmptyImage.emptyContainer}` + (props.className ? ` ${props.className}` : "")}>
return <div className={`bd-empty-image-container ${DiscordClasses.EmptyImage.emptyContainer}` + (this.props.className ? ` ${this.props.className}` : "")}> <div className={`bd-empty-image ${DiscordClasses.EmptyImage.emptyImage}`}></div>
<div className={`bd-empty-image ${DiscordClasses.EmptyImage.emptyImage}`}></div> <div className={`bd-empty-image-header ${DiscordClasses.EmptyImage.emptyHeader}`}>
<div className={`bd-empty-image-header ${DiscordClasses.EmptyImage.emptyHeader}`}> {props.title || "You don't have anything!"}
{this.props.title || "You don't have anything!"} </div>
</div> <div className={`bd-empty-image-message`}>
<div className={`bd-empty-image-message`}> {SimpleMarkdown.parseToReact(props.message || "You should probably get something.")}
{SimpleMarkdown.parseToReact(this.props.message || "You should probably get something.")} </div>
</div> {props.children}
{this.props.children} </div>;
</div>;
}
} }

16
renderer/src/ui/blankslates/noresults.jsx
View File

@ -1,13 +1,11 @@
import {React, DiscordModules} from "modules"; import {React, DiscordModules} from "modules";
import MagnifyingGlass from "../icons/magnifyingglass"; import MagnifyingGlass from "../icons/magnifyingglass";
export default class NoResults extends React.Component { export default function NoResults(props) {
render() { return <div className={"bd-empty-results" + (props.className ? ` ${props.className}` : "")}>
return <div className={"bd-empty-results" + (this.props.className ? ` ${this.props.className}` : "")}> <MagnifyingGlass />
<MagnifyingGlass /> <div className="bd-empty-results-text">
<div className="bd-empty-results-text"> {props.text || DiscordModules.Strings.SEARCH_NO_RESULTS || ""}
{this.props.text || DiscordModules.Strings.SEARCH_NO_RESULTS || ""} </div>
</div> </div>;
</div>;
}
} }

30
renderer/src/ui/settings/sidebarheader.jsx
View File

@ -4,21 +4,15 @@ import HistoryIcon from "../icons/history";
import Modals from "../modals"; import Modals from "../modals";
export default class SettingsTitle extends React.Component { export default function SettingsTitle() {
renderHeader() { return <div className="bd-sidebar-header">
return <h2 className="bd-sidebar-header-label">BetterDiscord</h2>; <h2 className="bd-sidebar-header-label">BetterDiscord</h2>
} <DiscordModules.Tooltip color="primary" position="top" text="Changelog">
{props =>
render() { <div {...props} className="bd-changelog-button" onClick={() => Modals.showChangelogModal(Changelog)}>
return <div className="bd-sidebar-header"> <HistoryIcon className="bd-icon" size="16px" />
{this.renderHeader()} </div>
<DiscordModules.Tooltip color="primary" position="top" text="Changelog"> }
{props => </DiscordModules.Tooltip>
<div {...props} className="bd-changelog-button" onClick={() => Modals.showChangelogModal(Changelog)}> </div>;
<HistoryIcon className="bd-icon" size="16px" /> }
</div>
}
</DiscordModules.Tooltip>
</div>;
}
}

54
renderer/src/ui/updater.jsx
View File

@ -7,40 +7,34 @@ import Toasts from "./toasts";
import Checkmark from "./icons/check"; import Checkmark from "./icons/check";
class CoreUpdaterPanel extends React.Component { function CoreUpdaterPanel(props) {
render() { return <Drawer name="BetterDiscord" collapsible={true}>
return <Drawer name="BetterDiscord" collapsible={true}> <SettingItem name={`Core v${Config.version}`} note={props.hasUpdate ? Strings.Updater.versionAvailable.format({version: props.remoteVersion}) : Strings.Updater.noUpdatesAvailable} inline={true} id={"core-updater"}>
<SettingItem name={`Core v${Config.version}`} note={this.props.hasUpdate ? Strings.Updater.versionAvailable.format({version: this.props.remoteVersion}) : Strings.Updater.noUpdatesAvailable} inline={true} id={"core-updater"}> {!props.hasUpdate && <div className="bd-filled-checkmark"><Checkmark /></div>}
{!this.props.hasUpdate && <div className="bd-filled-checkmark"><Checkmark /></div>} {props.hasUpdate && <button className="bd-button" onClick={props.update}>{Strings.Updater.updateButton}</button>}
{this.props.hasUpdate && <button className="bd-button" onClick={this.props.update}>{Strings.Updater.updateButton}</button>} </SettingItem>
</SettingItem> </Drawer>;
</Drawer>;
}
} }
class NoUpdates extends React.Component { function NoUpdates(props) {
render() { return <div className="bd-empty-updates">
return <div className="bd-empty-updates"> <Checkmark size="48px" />
<Checkmark size="48px" /> {Strings.Updater.upToDateBlankslate.format({type: props.type})}
{Strings.Updater.upToDateBlankslate.format({type: this.props.type})} </div>;
</div>;
}
} }
class AddonUpdaterPanel extends React.Component { function AddonUpdaterPanel(props) {
render() { const filenames = props.pending;
const filenames = this.props.pending; return <Drawer name={Strings.Panels[props.type]} collapsible={true} button={filenames.length ? {title: Strings.Updater.updateAll, onClick: () => props.updateAll(props.type)} : null}>
return <Drawer name={Strings.Panels[this.props.type]} collapsible={true} button={filenames.length ? {title: Strings.Updater.updateAll, onClick: () => this.props.updateAll(this.props.type)} : null}> {!filenames.length && <NoUpdates type={props.type} />}
{!filenames.length && <NoUpdates type={this.props.type} />} {filenames.map(f => {
{filenames.map(f => { const info = props.updater.cache[f];
const info = this.props.updater.cache[f]; const addon = props.updater.manager.addonList.find(a => a.filename === f);
const addon = this.props.updater.manager.addonList.find(a => a.filename === f); return <SettingItem name={`${addon.name} v${addon.version}`} note={Strings.Updater.versionAvailable.format({version: info.version})} inline={true} id={addon.name}>
return <SettingItem name={`${addon.name} v${addon.version}`} note={Strings.Updater.versionAvailable.format({version: info.version})} inline={true} id={addon.name}> <button className="bd-button" onClick={() => props.update(props.type, f)}>{Strings.Updater.updateButton}</button>
<button className="bd-button" onClick={() => this.props.update(this.props.type, f)}>{Strings.Updater.updateButton}</button> </SettingItem>;
</SettingItem>; })}
})} </Drawer>;
</Drawer>;
}
} }
export default class UpdaterPanel extends React.Component { export default class UpdaterPanel extends React.Component {