refactor: split into components

decentraland · Oct 30, 2024 · 50fa19d · 50fa19d
1 parent fef99af
commit 50fa19d
Show file tree

Hide file tree

Showing 16 changed files with 225 additions and 191 deletions.
diff --git a/packages/main/src/modules/cli.ts b/packages/main/src/modules/cli.ts
@@ -44,6 +44,7 @@ export async function deploy({ path, target, targetContent }: DeployOptions) {
   deployServer = run('@dcl/sdk-commands', 'sdk-commands', {
     args: [
       'deploy',
+      '--no-browser',
       '--port',
       port.toString(),
       ...(target ? ['--target', target] : []),
@@ -54,7 +55,7 @@ export async function deploy({ path, target, targetContent }: DeployOptions) {
   });
 
   // App ready at
-  await deployServer.waitFor(/app ready at/i);
+  await deployServer.waitFor(/listening/i);
 
   return port;
 }
diff --git a/packages/renderer/src/components/EditorPage/component.tsx b/packages/renderer/src/components/EditorPage/component.tsx
@@ -80,7 +80,7 @@ export function EditorPage() {
     setOpen(undefined);
   }, []);
 
-  const handleSubmitModal = useCallback(
+  const handleTarget = useCallback(
     ({ target, value }: StepValue) => {
       switch (target) {
         case 'worlds':
@@ -204,7 +204,7 @@ export function EditorPage() {
               open={open === 'publish'}
               project={project}
               onClose={handleCloseModal}
-              onSubmit={handleSubmitModal}
+              onTarget={handleTarget}
             />
           )}
         </>

diff --git a/packages/renderer/src/components/Modals/PublishProject/AlternativeServers/component.tsx b/packages/renderer/src/components/Modals/PublishProject/AlternativeServers/component.tsx
@@ -0,0 +1,98 @@
+import { type ChangeEvent, useCallback, useState } from 'react';
+import { Button, MenuItem, Select, type SelectChangeEvent } from 'decentraland-ui2';
+import { t } from '/@/modules/store/translation/utils';
+import GenesisPlazaPng from '/assets/images/genesis_plaza.png';
+import type { AlternativeTarget, TargetProps, TargetValue } from '../types';
+
+import './styles.css';
+import { isUrl } from '/shared/utils';
+import { misc } from '#preload';
+
+export function AlternativeServers({ onTarget: onClick }: TargetProps) {
+  const [option, setOption] = useState<AlternativeTarget>('test');
+  const [customUrl, setCustomUrl] = useState('');
+  const [error, setError] = useState('');
+
+  const handleClick = useCallback(() => {
+    if (option === 'custom' && !isUrl(customUrl)) {
+      return setError(t('modal.publish_project.alternative_servers.errors.url'));
+    }
+    const value: TargetValue = { target: option, value: customUrl };
+    onClick(value);
+  }, [option, customUrl]);
+
+  const handleChangeSelect = useCallback((e: SelectChangeEvent<AlternativeTarget>) => {
+    setOption(e.target.value as AlternativeTarget);
+  }, []);
+
+  const handleChangeCustom = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      if (error) setError('');
+      setCustomUrl(e.target.value);
+    },
+    [error],
+  );
+
+  const handleClickLearnMore = useCallback(() => {
+    if (option === 'custom') {
+      return misc.openExternal(
+        'https://docs.decentraland.org/creator/development-guide/sdk7/publishing/#custom-servers',
+      );
+    }
+    misc.openExternal(
+      'https://docs.decentraland.org/creator/development-guide/sdk7/publishing/#the-test-server',
+    );
+  }, [option]);
+
+  return (
+    <div className="AlternativeServers">
+      <span className="select">{t('modal.publish_project.select')}</span>
+      <div className="box">
+        <div className="selection">
+          <div>
+            <h3>{t('modal.publish_project.alternative_servers.list')}</h3>
+            <Select
+              variant="standard"
+              value={option}
+              onChange={handleChangeSelect}
+            >
+              <MenuItem value="test">
+                {t('modal.publish_project.alternative_servers.options.test_server')}
+              </MenuItem>
+              <MenuItem value="custom">
+                {t('modal.publish_project.alternative_servers.options.custom_server')}
+              </MenuItem>
+            </Select>
+            {option === 'custom' && (
+              <div className="custom_input">
+                <span className="title">
+                  {t('modal.publish_project.alternative_servers.custom_server_url')}
+                </span>
+                <input
+                  value={customUrl}
+                  onChange={handleChangeCustom}
+                />
+                <span className="error">{error}</span>
+              </div>
+            )}
+          </div>
+          <img
+            className="thumbnail"
+            src={GenesisPlazaPng}
+          />
+        </div>
+        <div className="actions">
+          <span
+            className="learn-more"
+            onClick={handleClickLearnMore}
+          >
+            {t('option_box.learn_more')}
+          </span>
+          <Button onClick={handleClick}>
+            {t(`modal.publish_project.alternative_servers.action.${option}_server`)}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/renderer/src/components/Modals/PublishProject/AlternativeServers/index.ts b/packages/renderer/src/components/Modals/PublishProject/AlternativeServers/index.ts
@@ -0,0 +1 @@
+export { AlternativeServers } from './component';
diff --git a/...mponents/Modals/PublishProject/styles.css → ...lishProject/AlternativeServers/styles.css b/...mponents/Modals/PublishProject/styles.css → ...lishProject/AlternativeServers/styles.css
@@ -1,31 +1,5 @@
 /* TODO: update the Modal component in ui2 to allow providing a className to the Material Modal...*/
 
-/* Initial Modal */
-.MuiModal-root .Initial {
-  display: flex;
-  flex-direction: column;
-}
-
-.MuiModal-root .Initial .select,
-.MuiModal-root .Initial .alternative_servers {
-  text-align: center;
-}
-
-.MuiModal-root .Initial .options {
-  display: flex;
-  margin: 20px 0;
-}
-
-.MuiModal-root .Initial .options .OptionBox + .OptionBox {
-  margin-left: 20px;
-}
-
-.MuiModal-root .Initial .alternative_servers {
-  text-decoration: underline;
-  text-transform: uppercase;
-  cursor: pointer;
-}
-
 /* AlternativeServers Modal */
 .MuiModal-root .AlternativeServers {
   display: flex;

diff --git a/packages/renderer/src/components/Modals/PublishProject/Deploy/component.tsx b/packages/renderer/src/components/Modals/PublishProject/Deploy/component.tsx
@@ -0,0 +1,8 @@
+import { Loader } from '/@/components/Loader';
+import { useEditor } from '/@/hooks/useEditor';
+import './styles.css';
+
+export function Deploy() {
+  const { loadingPublish } = useEditor();
+  return <div className="Deploy">{loadingPublish ? <Loader /> : 'Deploy'}</div>;
+}
diff --git a/packages/renderer/src/components/Modals/PublishProject/Deploy/index.ts b/packages/renderer/src/components/Modals/PublishProject/Deploy/index.ts
@@ -0,0 +1 @@
+export { Deploy } from './component';
diff --git a/packages/renderer/src/components/Modals/PublishProject/Deploy/styles.css b/packages/renderer/src/components/Modals/PublishProject/Deploy/styles.css
@@ -0,0 +1,3 @@
+.Deploy {
+  color: red;
+}
diff --git a/packages/renderer/src/components/Modals/PublishProject/Initial/component.tsx b/packages/renderer/src/components/Modals/PublishProject/Initial/component.tsx
@@ -0,0 +1,39 @@
+import { OptionBox } from '/@/components/EditorPage/OptionBox';
+import { t } from '/@/modules/store/translation/utils';
+import LandPng from '/assets/images/land.png';
+import WorldsPng from '/assets/images/worlds.png';
+import type { Step } from '../types';
+
+import './styles.css';
+
+export function Initial({ onStepChange }: { onStepChange: (step: Step) => () => void }) {
+  return (
+    <div className="Initial">
+      <span className="select">{t('modal.publish_project.select')}</span>
+      <div className="options">
+        <OptionBox
+          thumbnailSrc={WorldsPng}
+          title={t('modal.publish_project.worlds.title')}
+          description={t('modal.publish_project.worlds.description')}
+          buttonText={t('modal.publish_project.worlds.action')}
+          onClickPublish={onStepChange('publish-to-world')}
+          learnMoreUrl="https://docs.decentraland.org/creator/worlds/about/#publish-a-world"
+        />
+        <OptionBox
+          thumbnailSrc={LandPng}
+          title={t('modal.publish_project.land.title')}
+          description={t('modal.publish_project.land.description')}
+          buttonText={t('modal.publish_project.land.action')}
+          onClickPublish={onStepChange('publish-to-land')}
+          learnMoreUrl="https://docs.decentraland.org/creator/development-guide/sdk7/publishing-permissions/#land-permission-options"
+        />
+      </div>
+      <span
+        className="alternative_servers"
+        onClick={onStepChange('alternative-servers')}
+      >
+        {t('modal.publish_project.alternative_servers.title')}
+      </span>
+    </div>
+  );
+}
diff --git a/packages/renderer/src/components/Modals/PublishProject/Initial/index.ts b/packages/renderer/src/components/Modals/PublishProject/Initial/index.ts
@@ -0,0 +1 @@
+export { Initial } from './component';
diff --git a/packages/renderer/src/components/Modals/PublishProject/Initial/styles.css b/packages/renderer/src/components/Modals/PublishProject/Initial/styles.css
@@ -0,0 +1,27 @@
+/* TODO: update the Modal component in ui2 to allow providing a className to the Material Modal...*/
+
+/* Initial Modal */
+.MuiModal-root .Initial {
+  display: flex;
+  flex-direction: column;
+}
+
+.MuiModal-root .Initial .select,
+.MuiModal-root .Initial .alternative_servers {
+  text-align: center;
+}
+
+.MuiModal-root .Initial .options {
+  display: flex;
+  margin: 20px 0;
+}
+
+.MuiModal-root .Initial .options .OptionBox + .OptionBox {
+  margin-left: 20px;
+}
+
+.MuiModal-root .Initial .alternative_servers {
+  text-decoration: underline;
+  text-transform: uppercase;
+  cursor: pointer;
+}
diff --git a/packages/renderer/src/components/Modals/PublishProject/PublishToLand/component.tsx b/packages/renderer/src/components/Modals/PublishProject/PublishToLand/component.tsx
@@ -8,6 +8,7 @@ import { t } from '/@/modules/store/translation/utils';
 import { selectors as landSelectors } from '/@/modules/store/land';
 import { useEditor } from '/@/hooks/useEditor';
 import { COLORS, type Coordinate } from './types';
+import { type TargetProps } from '../types';
 
 function calculateParcels(project: Project, point: Coordinate): Coordinate[] {
   const [baseX, baseY] = project.scene.base.split(',').map(coord => parseInt(coord, 10));
@@ -17,8 +18,8 @@ function calculateParcels(project: Project, point: Coordinate): Coordinate[] {
   });
 }
 
-export function PublishToLand({ onClose }: { onClose: () => void }) {
-  const { project, publishScene, updateProject } = useEditor();
+export function PublishToLand({ onTarget }: TargetProps) {
+  const { project, updateProject } = useEditor();
   const tiles = useSelector(state => state.land.tiles);
   const landTiles = useSelector(state => landSelectors.getLandTiles(state.land));
   const [hover, setHover] = useState<Coordinate>({ x: 0, y: 0 });
@@ -29,10 +30,12 @@ export function PublishToLand({ onClose }: { onClose: () => void }) {
   // Memoize the project parcels centered around the hover position
   const projectParcels = useMemo(() => calculateParcels(project, hover), [project, hover]);
 
-  const handleClickPublish = useCallback(() => {
-    publishScene({ target: import.meta.env.VITE_CATALYST_SERVER || DEPLOY_URLS.CATALYST_SERVER });
-    onClose();
-  }, [publishScene, onClose]);
+  const handleNext = useCallback(() => {
+    onTarget({
+      target: 'land',
+      value: import.meta.env.VITE_CATALYST_SERVER || DEPLOY_URLS.CATALYST_SERVER,
+    });
+  }, [onTarget]);
 
   const handleHover = useCallback((x: number, y: number) => {
     setHover({ x, y });
@@ -170,7 +173,7 @@ export function PublishToLand({ onClose }: { onClose: () => void }) {
           variant="contained"
           color="primary"
           size="large"
-          onClick={handleClickPublish}
+          onClick={handleNext}
           disabled={!placement}
           sx={{ height: '45px' }}
         >

diff --git a/packages/renderer/src/components/Modals/PublishProject/PublishToWorld/component.tsx b/packages/renderer/src/components/Modals/PublishProject/PublishToWorld/component.tsx
@@ -23,6 +23,7 @@ import { ENSProvider } from '/@/modules/store/ens/types';
 import { getEnsProvider } from '/@/modules/store/ens/utils';
 import { useAuth } from '/@/hooks/useAuth';
 import { useEditor } from '/@/hooks/useEditor';
+import { type TargetProps } from '../types';
 
 import EmptyWorldSVG from '/assets/images/empty-deploy-to-world.svg';
 import LogoDCLSVG from '/assets/images/logo-dcl.svg';
@@ -32,20 +33,22 @@ import { Button } from '../../../Button';
 
 import './styles.css';
 
-export function PublishToWorld({ onClose }: { onClose: () => void }) {
-  const { project, publishScene } = useEditor();
+export function PublishToWorld({ onTarget }: TargetProps) {
+  const { project } = useEditor();
   const names = useSelector(state => state.ens.data);
   const emptyNames = Object.keys(names).length === 0;
 
-  const handleClickPublish = useCallback(() => {
-    publishScene({ targetContent: import.meta.env.VITE_WORLDS_SERVER || DEPLOY_URLS.WORLDS });
-    onClose();
+  const handleNext = useCallback(() => {
+    onTarget({
+      target: 'worlds',
+      value: import.meta.env.VITE_WORLDS_SERVER || DEPLOY_URLS.WORLDS,
+    });
   }, []);
 
   return !emptyNames ? (
     <SelectWorld
       project={project!}
-      onPublish={handleClickPublish}
+      onPublish={handleNext}
     />
   ) : (
     <EmptyNames />
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { AlternativeServers } from './component';