Merge branch 'url-share' of github.com:Program-AR/pilas-bloques-react…

… into url-share

locales/en-us/creator.json

@@ -95,10 +95,16 @@
 		"buttons": {
 			"discardChallenge": "Discard challenge",
 			"discardChallengeShort": "Discard",
-			"download": "Download",
+			"download": "Download challenge",
+			"downloadShort": "Download",
 			"share": "Share challenge",
 			"shareUrl": "Share via url",
+			"shareUrlShort": "Share",
 			"save": "Save challenge",
+			"saveShort": "Save",
+			"savedCorrectly": "Challenge was saved correctly",
+			"copyToClipboard": "Copy to clipboard",
+			"copiedToClipboard": "Copied to clipboard",
 			"preview": "Challenge preview",
 			"previewShort": "Preview",
 			"keepEditing": "Keep editing",

locales/es-ar/creator.json

@@ -95,10 +95,16 @@
 		"buttons": {
 			"discardChallenge": "Descartar desafío",
 			"discardChallengeShort": "Descartar",
-			"download": "Descargar",
+			"download": "Descargar desafío",
+			"downloadShort": "Descargar",
 			"share": "Compartir desafío",
 			"shareUrl": "Compartir por url",
+			"shareUrlShort": "Compartir",
+			"copyToClipboard": "Copiar al portapapeles",
+			"copiedToClipboard": "Copiado al portapapeles",
 			"save": "Guardar desafío",
+			"saveShort": "Guardar",
+			"savedCorrectly": "El desafío fue guardado correctamente",
 			"preview": "Ver desafío",
 			"previewShort": "Ver",
 			"keepEditing": "Seguir editando",

src/components/creator/Editor/ActionButtons/ShareChallenge/ShareButton.tsx

@@ -0,0 +1,68 @@
+import { CreatorActionButton } from "../CreatorActionButton";
+import DownloadIcon from '@mui/icons-material/Download';
+import { useContext, useState } from "react";
+import { Dialog, DialogContent, DialogTitle, InputAdornment, Stack, TextField } from "@mui/material";
+import { CreatorContext } from "../../CreatorContext";
+import { Buttons, CopyToClipboardButton } from "./ShareModalButtons";
+import { useTranslation } from "react-i18next";
+
+export const ShareButton = () => {
+
+    const [dialogOpen, setDialogOpen] = useState<boolean>(false)
+
+    return <>
+        <ShareDialog open={dialogOpen} setDialogOpen={setDialogOpen} />
+        <CreatorActionButton onClick={() => { setDialogOpen(true) }} startIcon={<DownloadIcon />} nametag='share' isshortversion={true} />
+    </>
+
+}
+
+const ShareDialog = ({ open, setDialogOpen }: { open: boolean, setDialogOpen: (open: boolean) => void }) => {
+
+    const { t } = useTranslation('creator');
+
+    return <>
+        <Dialog open={open} onClose={() => { setDialogOpen(false) }}>
+            <DialogTitle>{t('editor.buttons.share')}</DialogTitle>
+            <DialogContent >
+                <ShareModal />
+            </DialogContent>
+        </Dialog >
+    </>
+}
+
+const ShareModal = () => {
+    const { shareId } = useContext(CreatorContext)
+
+    const APP_URL = 'https://pilasbloques.program.ar/online'
+    const DEV_URL = 'localhost:3000'
+
+    const sharedLink = (process.env.NODE_ENV === 'production' ? APP_URL : DEV_URL)  + `/#/desafio/guardado/${shareId}`
+
+    //const link: string = `http://localhost:3000/#/desafio/guardado/${shareId}`
+
+    return <Stack>
+        {shareId ?
+            <Stack direction='row'>
+                <TextField
+                    sx={{ width: '100%', margin: 1}}
+                    defaultValue={sharedLink}
+                    InputProps={{
+                        readOnly: true,
+                        endAdornment: (
+                            <InputAdornment position="end">
+                                <CopyToClipboardButton textToCopy={sharedLink} />
+                            </InputAdornment>
+                        )
+                    }}
+                />
+            </Stack>
+            : <></>
+        }
+        <Buttons />
+    </Stack>
+}
+
+
+
+

src/components/creator/Editor/ActionButtons/ShareChallenge/ShareModalButtons.tsx

@@ -0,0 +1,106 @@
+import ShareIcon from '@mui/icons-material/Share';
+import SaveIcon from '@mui/icons-material/Save';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import { ReactNode, useContext, useState } from "react"
+import { IconButtonTooltip } from "../../SceneEdition/IconButtonTooltip"
+import { Snackbar, Stack, Tooltip } from "@mui/material"
+import { CreatorContext } from '../../CreatorContext';
+import { LocalStorage } from '../../../../../localStorage';
+import { PilasBloquesApi } from '../../../../../pbApi';
+import { CreatorActionButton } from '../CreatorActionButton';
+import { DialogSnackbar } from '../../../../dialogSnackbar/DialogSnackbar';
+import { useTranslation } from 'react-i18next';
+import { SerializedChallenge } from '../../../../serializedChallenge';
+import { DownloadButton } from '../DownloadButton';
+
+export const CopyToClipboardButton = ({ textToCopy }: { textToCopy: string }) => {
+
+    const [openSnackbar, setOpenSnackbar] = useState(false)
+
+    const { t } = useTranslation('creator');
+
+    const handleClick = () => {
+        setOpenSnackbar(true)
+        navigator.clipboard.writeText(textToCopy)
+    }
+
+    return <>
+        <IconButtonTooltip icon={<ContentCopyIcon />} onClick={handleClick} tooltip={t('editor.buttons.copyToClipboard')} />
+        <Snackbar
+            open={openSnackbar}
+            onClose={() => setOpenSnackbar(false)}
+            autoHideDuration={2000}
+            message={t('editor.buttons.copiedToClipboard')}
+        />
+    </>
+}
+
+export const Buttons = () => {
+    const { shareId } = useContext(CreatorContext)
+
+    return <>
+        <Stack direction="row" justifyContent="space-between" alignItems='center'>
+            {shareId ? <SaveButton /> : <ShareUrlButton />}
+            <DownloadButton />
+        </Stack>
+    </>
+}
+
+const ShareUrlButton = () => {
+
+    const shareChallenge = async (): Promise<string> => {
+        const challenge: SerializedChallenge = LocalStorage.getCreatorChallenge()!
+        const sharedChallenge = await PilasBloquesApi.shareChallenge(challenge)
+
+        return sharedChallenge.sharedId
+    }
+
+    return <ChallengeUpsertButton Icon={<ShareIcon />} nametag="shareUrl" challengeUpsert={shareChallenge} />
+}
+const SaveButton = () => {
+    const [openSnackbar, setOpenSnackbar] = useState(false)
+
+    const { t } = useTranslation('creator');
+
+    const saveChallenge = async (): Promise<string> => {
+        const savedChallenge = await PilasBloquesApi.saveChallenge(LocalStorage.getCreatorChallenge()!)
+        setOpenSnackbar(true)
+        return savedChallenge.sharedId
+    }
+
+    return <>
+        <ChallengeUpsertButton Icon={<SaveIcon />} nametag="save" challengeUpsert={saveChallenge} />
+        <Snackbar
+            open={openSnackbar}
+            onClose={() => setOpenSnackbar(false)}
+            autoHideDuration={2000}
+            message={t('editor.buttons.savedCorrectly')}
+        />
+    </>
+}
+
+const ChallengeUpsertButton = ({ Icon, challengeUpsert, nametag }: { Icon: ReactNode, nametag: string, challengeUpsert: () => Promise<string> }) => {
+
+    const { setShareId } = useContext(CreatorContext)
+    const userLoggedIn = !!LocalStorage.getUser()
+    const [serverError, setServerError] = useState<boolean>(false)
+    const { t } = useTranslation('creator');
+
+    const handleClick = async () => {
+        try {
+            setShareId(await challengeUpsert())
+        }
+        catch (error) {
+            setServerError(true)
+        }
+    }
+
+    return <>
+        <Tooltip title={!userLoggedIn ? t('editor.loginWarning') : ''} followCursor>
+            <div>
+                <CreatorActionButton onClick={handleClick} disabled={!userLoggedIn} startIcon={Icon} variant='contained' nametag={nametag} />
+            </div>
+        </Tooltip>
+        <DialogSnackbar open={serverError} onClose={() => setServerError(false)} message={t('editor.serverError')} />
+    </>
+}

src/components/creator/Editor/Editor.tsx

@@ -11,7 +11,7 @@ import { useThemeContext } from "../../../theme/ThemeContext";
 import { useNavigate } from "react-router-dom";
 import { LocalStorage } from "../../../localStorage";
 import { useEffect } from "react";
-import { ShareButton } from "./ActionButtons/ShareButton";
+import { ShareButton } from "./ActionButtons/ShareChallenge/ShareButton";
 
 export const CreatorEditor = () => {
   const { theme } = useThemeContext()