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

Forgot to add instance picker.

Browse source
This commit is contained in:
Dessalines 2023-10-11 21:34:59 -04:00
parent 1058bbb860
commit 97dfd550fb
1 changed files with 154 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

154
src/shared/components/instance-picker.tsx Normal file
View file

@ -0,0 +1,154 @@
import classNames from "classnames";
import { Component, linkEvent } from "inferno";
import { All_TOPIC, TOPICS, Topic } from "./instances-definitions";
import { LANGUAGES, i18n } from "../i18next";
import { I18nKeys } from "i18next";
import { Icon } from "./icon";
enum Step {
Interest,
Language,
Join,
}
interface State {
activeStep: Step;
topic?: Topic;
language?: string;
}
export class InstancePicker extends Component<any, State> {
state: State = {
activeStep: Step.Interest,
};
constructor(props: any, context: any) {
super(props, context);
}
render() {
return (
<dialog id="picker" className="modal">
<form method="dialog" className="modal-backdrop">
<button>X</button>
</form>
<div className="modal-box bg-neutral-800">
<form method="dialog">
<button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
✕
</button>
</form>
<div className="container mx-auto">
{this.state.activeStep == Step.Interest && (
<>
<p className="text-2xl font-bold text-center pb-4">
{i18n.t("what_topic")}
</p>
{TOPICS.map(c => (
<div className="form-control">
<label className="label cursor-pointer">
<span className="label-text text-sm text-gray-300">
<Icon icon={c.icon} classes="mr-3" />
{i18n.t(c.name as I18nKeys)}
</span>
<input
type="radio"
name="topic-radio"
className="radio"
value={c.name}
onChange={linkEvent(this, handleTopicChange)}
/>
</label>
</div>
))}
</>
)}
{this.state.activeStep == Step.Language && (
<>
<p className="text-2xl font-bold text-center pb-4">
{i18n.t("what_language")}
</p>
<div className="form-control">
<label className="label cursor-pointer">
<span className="label-text text-sm text-gray-300">
{i18n.t("all_languages")}
</span>
<input
type="radio"
name="language-radio"
className="radio"
value={"all"}
onChange={linkEvent(this, handleLanguageChange)}
/>
</label>
</div>
{LANGUAGES.map(l => (
<div className="form-control">
<label className="label cursor-pointer">
<span className="label-text text-sm text-gray-300">
{l.name}
</span>
<input
type="radio"
name="language-radio"
className="radio"
value={l.code}
onChange={linkEvent(this, handleLanguageChange)}
/>
</label>
</div>
))}
</>
)}
<ul className="steps steps-vertical lg:steps-horizontal w-full">
<li
onClick={linkEvent(this, handleResetInterests)}
className={classNames("step text-gray-300", {
"step-primary": this.state.activeStep == Step.Interest,
})}
>
{i18n.t("interests")}
</li>
<li
onClick={linkEvent(this, handleResetInterests)}
className={classNames("step text-gray-300", {
"step-primary": this.state.activeStep == Step.Language,
})}
>
{i18n.t("languages")}
</li>
<li
className={classNames("step text-gray-300", {
"step-primary": this.state.activeStep == Step.Join,
})}
>
{i18n.t("join")}
</li>
</ul>
</div>
</div>
</dialog>
);
}
}
function handleTopicChange(i: InstancePicker, event: any) {
i.setState({
topic: TOPICS.find(c => c.name == event.target.value) ?? All_TOPIC,
activeStep: Step.Language,
});
}
function handleLanguageChange(i: InstancePicker, event: any) {
i.setState({ language: event.target.value });
const url = `/instances?topic=${i.state.topic?.name ?? All_TOPIC}&language=${
i.state.language
}&scroll=true`;
// Requires a page reload unfortunately
window.location.href = url;
}
function handleResetInterests(i: InstancePicker) {
i.setState({ topic: undefined, activeStep: Step.Interest });
}