LemmyNet/joinlemmy-site
2
0
Fork 0
mirror of https://github.com/LemmyNet/joinlemmy-site.git synced 2024-11-24 21:31:16 +00:00
Code Issues Projects Releases Wiki Activity

Dont render detailsmodal until clicked. Fixes #261 (#263)

Browse source 
* Dont render detailsmodal until clicked. Fixes #261

* Make true.
This commit is contained in:
Dessalines 2023-11-01 22:32:49 -04:00 committed by GitHub
parent bd97a9337f
commit e5c3f406ae
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 84 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/shared/components/instances.tsx
View file

@ -93,20 +93,36 @@ const InstanceCardGrid = ({ instances }: InstanceCardGridProps) => (
</div>
);
interface InstanceCardProps {
instance: any;
}
function buildUrl(domain: string): string {
return `https://${domain}`;
}
const InstanceCard = ({ instance }: InstanceCardProps) => {
interface InstanceCardProps {
instance: any;
}
interface InstanceCardState {
showModal: boolean;
}
class InstanceCard extends Component<InstanceCardProps, InstanceCardState> {
state: InstanceCardState = {
showModal: false,
};
constructor(props: any, context: any) {
super(props, context);
}
render() {
const instance = this.props.instance;
const domain = instance.domain;
const description = instance.site_info.site_view.site.description;
const sidebar = instance.site_info.site_view.site.sidebar || description;
const icon =
instance.site_info.site_view.site.icon || "/static/assets/images/lemmy.svg";
instance.site_info.site_view.site.icon ||
"/static/assets/images/lemmy.svg";
const banner = instance.site_info.site_view.site.banner;
const users = instance.site_info.site_view.counts.users;
const comments = instance.site_info.site_view.counts.comments;
@ -120,6 +136,7 @@ const InstanceCard = ({ instance }: InstanceCardProps) => {
<div className="card card-bordered bg-neutral-900 shadow-xl">
<div className="card-body p-4">
<div className="flex flex-row flex-wrap gap-4">
{this.state.showModal && (
<DetailsModal
id={modalId}
domain={domain}
@ -131,6 +148,7 @@ const InstanceCard = ({ instance }: InstanceCardProps) => {
sidebar={sidebar}
registrationMode={registrationMode}
/>
)}
<InstanceIcon domain={domain} icon={icon} />
<InstanceStats
users={users}
@ -154,9 +172,7 @@ const InstanceCard = ({ instance }: InstanceCardProps) => {
</a>
<button
className="btn btn-secondary btn-outline text-white max-md:btn-block normal-case"
onClick={() =>
(document.getElementById(modalId) as any).showModal()
}
onClick={linkEvent(this, handleModalClick)}
>
{i18n.t("more_information")}
</button>
@ -164,7 +180,14 @@ const InstanceCard = ({ instance }: InstanceCardProps) => {
</div>
</div>
);
};
}
}
function handleModalClick(i: InstanceCard) {
const modalId = `modal_${i.props.instance.domain}`;
i.setState({ showModal: true });
(document.getElementById(modalId) as any).showModal();
}
const imgError =
"this.onError=null;this.src='/static/assets/images/lemmy.svg';" as unknown as InfernoEventHandler<HTMLImageElement>;