import React, { useCallback } from "react" import styled from "styled-components" import slugify from "limax" import { useYGHPlayerContext } from "ygh-sdk" import { useAsync } from "ygh-hooks" import useAuth from "hooks/useAuth" import useGame from "hooks/useGame" import useGameMutations from "hooks/useGameMutations" import { useFormState } from "react-use-form-state" import { useQuery } from "react-apollo-hooks" import { Button, FieldGroup, Float, Field, ImageInput, SelectOptions } from "ygh-ui" import StatusMessage from "components/StatusMessage" import { accessOptions, PRIVACY, ACCESS_TYPES } from "data" import { ALL_TEMPLATE_SETS } from "gql/queries" import defaultImage from "assets/default_thumb.png" const Container = styled.div` background-color: #f9f9f9; height: 100%; display: flex; flex-direction: column; ` const Head = styled.div` height: 2rem; padding: 0.5rem; ` const Title = styled.strong` display: block; line-height: 1rem; ` const Body = styled.div` overflow-x: hidden; overflow-y: auto; flex-grow: 1; padding: 0.5em; ` const Footer = styled.div` padding: 0.5rem; border-top: 1px solid #0001; ` const Form = styled.form` height: 100%; margin: 0; ` const Tagline = styled.p` word-break: break-word; ` const SettingsModal = () => { const { game } = useGame() const { user } = useAuth() const { updateGameSettings } = useGameMutations() const { updateGameImage } = useYGHPlayerContext() const { data: { entityTemplateSets } } = useQuery(ALL_TEMPLATE_SETS) const templateSetOptions = entityTemplateSets.map(({ id, name }) => ({ value: id, label: name })) const [{ isLoading, error, success }, runAsync] = useAsync() const [formState, { text, textarea, select, selectMultiple }] = useFormState({ image: null, name: game.name, description: game.description, intro: game.intro, outro: game.outro, accessType: game.accessType, accessCode: game.accessCode, entityTemplateSets: game.entityTemplateSets.map(({ id }) => id) }) const handleSubmit = useCallback( runAsync(async event => { event.preventDefault() const { image, entityTemplateSets, ...otherValues } = formState.values if (image) { await updateGameImage({ gameId: game.id, image }) } const slug = slugify(formState.values.name) await updateGameSettings(game.id, { ...otherValues, entityTemplateSets: { set: entityTemplateSets.map(id => ({ id })) }, slug }) }), [game.id, formState.values] ) if (error) { console.error(error) } return (
Settings Game created by{" "} {game.creator ? user && game.creator.id === user.id ? "you" : game.creator.name : "anonymous"} .{" "} {game.publishedAt ? ( <> Playable at{" "} {process.env.REACT_APP_PLAY_URL}/{game.id} . ) : ( "Not published yet." )} formState.setField("image", image)} /> {game.privacy === PRIVACY.PRIVATE && ( <>

Privacy

{formState.values.accessType === ACCESS_TYPES.CODE && ( )} )}
) } export default SettingsModal