sign in on wordlist page
This commit is contained in:
parent
471f17eda1
commit
537fbc12b4
|
@ -592,6 +592,7 @@ class App extends Component<RouteComponentProps, State> {
|
||||||
isolateEntry={this.handleIsolateEntry}
|
isolateEntry={this.handleIsolateEntry}
|
||||||
optionsDispatch={this.handleOptionsUpdate}
|
optionsDispatch={this.handleOptionsUpdate}
|
||||||
user={this.state.user}
|
user={this.state.user}
|
||||||
|
loadUser={this.handleLoadUser}
|
||||||
/>
|
/>
|
||||||
</Route>
|
</Route>
|
||||||
{this.state.user?.level === "editor" && <Route path="/edit">
|
{this.state.user?.level === "editor" && <Route path="/edit">
|
||||||
|
|
|
@ -84,12 +84,15 @@ function amountOfWords(number: number): string {
|
||||||
return `${number} word${number !== 1 ? "s" : ""}`;
|
return `${number} word${number !== 1 ? "s" : ""}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
function Wordlist({ options, wordlist, isolateEntry, optionsDispatch, user }: {
|
let popupRef: Window | null = null;
|
||||||
|
|
||||||
|
function Wordlist({ options, wordlist, isolateEntry, optionsDispatch, user, loadUser }: {
|
||||||
options: Options,
|
options: Options,
|
||||||
wordlist: WordlistWord[],
|
wordlist: WordlistWord[],
|
||||||
isolateEntry: (ts: number) => void,
|
isolateEntry: (ts: number) => void,
|
||||||
optionsDispatch: (action: OptionsAction) => void,
|
optionsDispatch: (action: OptionsAction) => void,
|
||||||
user: AT.LingdocsUser | undefined,
|
user: AT.LingdocsUser | undefined,
|
||||||
|
loadUser: () => void,
|
||||||
}) {
|
}) {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
const [wordOpen, setWordOpen] = useState<string | undefined>(undefined);
|
const [wordOpen, setWordOpen] = useState<string | undefined>(undefined);
|
||||||
|
@ -104,6 +107,24 @@ function Wordlist({ options, wordlist, isolateEntry, optionsDispatch, user }: {
|
||||||
const [monthsBackToKeep, setMonthsBackToKeep] = useState<number>(6);
|
const [monthsBackToKeep, setMonthsBackToKeep] = useState<number>(6);
|
||||||
const [wordsToDelete, setWordsToDelete] = useState<string[]>([]);
|
const [wordsToDelete, setWordsToDelete] = useState<string[]>([]);
|
||||||
const [startedWithWordsToReview] = useState<boolean>(forReview(wordlist).length !== 0);
|
const [startedWithWordsToReview] = useState<boolean>(forReview(wordlist).length !== 0);
|
||||||
|
useEffect(() => {
|
||||||
|
window.addEventListener("message", handleIncomingMessage);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("message", handleIncomingMessage);
|
||||||
|
};
|
||||||
|
// eslint-disable-next-line
|
||||||
|
}, []);
|
||||||
|
// TODO put the account url in an imported constant
|
||||||
|
function handleIncomingMessage(event: MessageEvent<any>) {
|
||||||
|
if (
|
||||||
|
event.origin === "https://account.lingdocs.com"
|
||||||
|
&& (event.data === "signed in")
|
||||||
|
&& popupRef
|
||||||
|
) {
|
||||||
|
loadUser();
|
||||||
|
popupRef.close();
|
||||||
|
}
|
||||||
|
}
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
window.addEventListener("scroll", handleScroll);
|
window.addEventListener("scroll", handleScroll);
|
||||||
return () => window.removeEventListener("scroll", handleScroll);
|
return () => window.removeEventListener("scroll", handleScroll);
|
||||||
|
@ -164,6 +185,9 @@ function Wordlist({ options, wordlist, isolateEntry, optionsDispatch, user }: {
|
||||||
deleteWordFromWordlist(toDelete);
|
deleteWordFromWordlist(toDelete);
|
||||||
setShowingCleanup(false);
|
setShowingCleanup(false);
|
||||||
}
|
}
|
||||||
|
function handleOpenSignup() {
|
||||||
|
popupRef = window.open("https://account.lingdocs.com", "account", "height=800,width=500,top=50,left=400");
|
||||||
|
}
|
||||||
function WordlistBrowsingWord({ word } : { word: WordlistWord }) {
|
function WordlistBrowsingWord({ word } : { word: WordlistWord }) {
|
||||||
const [confirmDelete, setConfirmDelete] = useState<boolean>(false);
|
const [confirmDelete, setConfirmDelete] = useState<boolean>(false);
|
||||||
return <div className="mb-4">
|
return <div className="mb-4">
|
||||||
|
@ -282,7 +306,7 @@ function Wordlist({ options, wordlist, isolateEntry, optionsDispatch, user }: {
|
||||||
<li>$1/month or $10/year - cancel any time</li>
|
<li>$1/month or $10/year - cancel any time</li>
|
||||||
</ul>
|
</ul>
|
||||||
</> : <UpgradePrices source="wordlist" />}
|
</> : <UpgradePrices source="wordlist" />}
|
||||||
{!user && <button className="btn btn-primary btn-lg mt-4" type="submit">Sign In</button>}
|
{!user && <button className="btn btn-lg btn-primary my-4" onClick={handleOpenSignup}><i className="fas fa-sign-in-alt mr-2" /> Sign In</button>}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>;
|
</div>;
|
||||||
|
|
Loading…
Reference in New Issue