import { assertNotNull } from "@justfixnyc/util/commonjs";
import React, { useContext, useState } from "react";
import { AuthContext } from "./auth-context";
import { GalleryCompositionKind, GalleryContext } from "./gallery-context";
export type GalleryWidgetProps = {
kind: GalleryCompositionKind;
serializeValue: () => string;
};
const AuthWidget: React.FC<{}> = () => {
const ctx = useContext(AuthContext);
if (!ctx.providerName) {
return null;
}
const button = ctx.loggedInUser ? (
) : (
);
const error = ctx.error ?
{ctx.error}
: null;
return (
<>
{button}
{error}
>
);
};
const LoginWidget: React.FC<{}> = () => {
return (
<>
To publish your composition to our gallery, you will first need to
login.
>
);
};
const PublishWidget: React.FC = (props) => {
const authCtx = useContext(AuthContext);
const user = assertNotNull(authCtx.loggedInUser, "User must be logged in");
const galleryCtx = useContext(GalleryContext);
const [title, setTitle] = useState("");
const [lastSerializedValue, setLastSerializedValue] = useState("");
const handlePublish = () => {
const serializedValue = props.serializeValue();
setLastSerializedValue(serializedValue);
galleryCtx.submit({
title,
kind: props.kind,
serializedValue,
owner: user.id,
ownerName: user.name,
});
};
const isSubmitting = galleryCtx.submitStatus === "submitting";
if (galleryCtx.lastSubmission?.serializedValue === lastSerializedValue) {
return (
<>
Your composition "{title}" has been published!
>
);
}
return (
<>
Here you can publish your composition to our publicly-viewable gallery.
>
);
};
export const GalleryWidget: React.FC = (props) => {
const authCtx = useContext(AuthContext);
return (
);
};