savebutton

locales/en-us/creator.json

@@ -98,6 +98,7 @@
 			"download": "Download",
 			"share": "Share challenge",
 			"shareUrl": "Share with url",
+			"save": "Save challenge",
 			"preview": "Challenge preview",
 			"previewShort": "Preview",
 			"keepEditing": "Keep editing",

locales/es-ar/creator.json

@@ -98,6 +98,7 @@
 			"download": "Descargar",
 			"share": "Compartir desafío",
 			"shareUrl": "Compartir por url",
+			"save": "Guardar desafío",
 			"preview": "Ver desafío",
 			"previewShort": "Ver",
 			"keepEditing": "Seguir editando",

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

@@ -3,10 +3,12 @@ import { LocalStorage } from "../../../../localStorage";
 import { CreatorActionButton } from "./CreatorActionButton";
 import DownloadIcon from '@mui/icons-material/Download';
 import ShareIcon from '@mui/icons-material/Share';
+import SaveIcon from '@mui/icons-material/Save';
 import { PilasBloquesApi } from "../../../../pbApi";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { Dialog, DialogContent, DialogTitle, Stack } from "@mui/material";
 import { DownloadButton } from "./DownloadButton";
+import { CreatorContext } from "../CreatorContext";
 
 export const ShareButton = () => {
 
@@ -20,11 +22,12 @@ export const ShareButton = () => {
 }
 
 const ShareDialog = ({open, setDialogOpen} : {open: boolean, setDialogOpen: (open: boolean) => void}) => {
-
-    const [url, setUrl] = useState<any>()
+    const { setShareId } = useContext(CreatorContext)
+    const [url, setUrl] = useState<string>()
 
     const handleShareClick = async () => {
-        const challengeId = (await shareChallenge())._id
+        const challengeId: string = (await shareChallenge())._id
+        setShareId(challengeId)
 
         setUrl(`https://${window.location.hostname}/#/sharedChallenge/${challengeId}`)
     }
@@ -45,12 +48,23 @@ const ShareDialog = ({open, setDialogOpen} : {open: boolean, setDialogOpen: (ope
 const Buttons = ({handleShareClick}: {handleShareClick: () => void}) => <>
     <Stack direction="row" justifyContent="space-between">
         <CreatorActionButton onClick={handleShareClick} startIcon={<ShareIcon/>} variant='contained' nametag="shareUrl"/>
+        <SaveButton/>
         <DownloadButton/>
     </Stack>
 
 
 </>
 
+const SaveButton = () => {
+    const { shareId } = useContext(CreatorContext)
+
+    const handleClick = async () => {
+        PilasBloquesApi.saveChallenge(LocalStorage.getCreatorChallenge()!)
+    }
+
+    return <CreatorActionButton disabled={!!!!!shareId} onClick={handleClick} startIcon={<SaveIcon/>} variant='contained' nametag="save"/>
+}
+
 const shareChallenge = () => {
     const challenge: SerializedChallenge = LocalStorage.getCreatorChallenge()!
 

src/components/creator/Editor/CreatorContext.tsx

@@ -11,7 +11,9 @@ export type CreatorContextType = {
     index: number;
     setIndex: (index: number) => void;
     setMaps: (maps: any) => void;
-    maps: SceneMap[]
+    maps: SceneMap[];
+    shareId: string
+    setShareId: (id: string) => void
 };
 
 const defaultCreatorContext = {
@@ -22,7 +24,9 @@ const defaultCreatorContext = {
     index: 0, 
     setIndex: () => { },
     setMaps: () => { },
-    maps: defaultChallenge('Duba').scene.maps
+    maps: defaultChallenge('Duba').scene.maps,
+    shareId: "",
+    setShareId: (id: string) => {}
 }
 
 export const CreatorContext = React.createContext<CreatorContextType>(defaultCreatorContext);
@@ -39,6 +43,7 @@ export const CreatorContextProvider: React.FC<CreatorProviderProps> = ({ childre
     const challenge = LocalStorage.getCreatorChallenge() || defaultChallenge("Duba")
     const [maps, setMaps] = useState(challenge.scene.maps)
     const [index, setIndex] = useState(defaultIndex)
+    const [shareId, setShareId] = useState(challenge.shareId || "")
 
     const currentMap = maps[index] || challenge.scene.maps[index]
 
@@ -53,7 +58,7 @@ export const CreatorContextProvider: React.FC<CreatorProviderProps> = ({ childre
     }, [maps, challenge])
 
     return (
-        <CreatorContext.Provider value={{ selectedTool, setSelectedTool, currentMap, setCurrentMap, index, setIndex, setMaps, maps}}>
+        <CreatorContext.Provider value={{ selectedTool, setSelectedTool, currentMap, setCurrentMap, shareId, setShareId, index, setIndex, setMaps, maps}}>
             {children}
         </CreatorContext.Provider>
     );

src/pbApi.ts

@@ -45,6 +45,10 @@ export namespace PilasBloquesApi{
       return await _send('GET', `sharedChallenge/${id}`)
     }
 
+    export const saveChallenge = async (challenge: SerializedChallenge) => {
+      await _send<SerializedChallenge>('PUT', `share/${challenge.shareId}`, challenge)
+    }
+
     export const baseURL = window.PBRuntime?.apiURL || process.env.REACT_APP_API_URL
 
     async function _send<T>(method: HttpMethod, resource: string, body?: T) {