From 9473427bd639cada86decb16d6e87e698a683bdd Mon Sep 17 00:00:00 2001
From: guofei <guofeichu@gmail.com>
Date: Mon, 18 Nov 2024 11:56:35 +0800
Subject: [PATCH] fix: add mobile fit

---
 src/App.css                          |  38 +++++++-
 src/App.js                           | 135 +++++++++++++--------------
 src/Components/deviceFrame/index.css |   1 +
 src/Components/deviceFrame/index.js  |  81 ++++++++++------
 src/Components/pane/index.css        |  55 ++++++++++-
 src/Components/pane/index.js         | 119 +++++++++++++----------
 src/apis/loginApi.js                 |   4 +-
 src/images/menu.png                  | Bin 0 -> 2137 bytes
 src/setupProxy.js                    |  16 ++--
 9 files changed, 280 insertions(+), 169 deletions(-)
 create mode 100644 src/images/menu.png

diff --git a/src/App.css b/src/App.css
index cc98f58..e25a953 100644
--- a/src/App.css
+++ b/src/App.css
@@ -15,6 +15,34 @@
   }
 }
 
+@media only screen and (orientation: landscape) {
+  #abc {
+    width: 200px;
+    height: 200px;
+    background-color: red;
+  }
+}
+
+/* 竖屏 */
+@media only screen and (orientation: portrait) {
+  #abc {
+    width: 200px;
+    height: 200px;
+    background-color: blue;
+  }
+}
+
+.pane_mobile {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 200px;
+  height: 100vh;
+  background-color: #535353;
+  z-index: 1000;
+}
+
 .App-header {
   background-color: #282c34;
   min-height: 100vh;
@@ -62,7 +90,7 @@
 }
 
 .pane-btn.checked {
-  border: 3px solid #00DE7A;
+  border: 3px solid #00de7a;
 }
 
 .pane-btn + .pane-btn {
@@ -94,8 +122,8 @@
 .language-select-container .language-select {
   width: 156px;
   height: 42px;
-  background-color: #36383A;
-  color: #EEEEEE;
+  background-color: #36383a;
+  color: #eeeeee;
   font-size: 14px;
   display: flex;
   align-items: center;
@@ -104,8 +132,8 @@
 .language-select-warpper {
   position: relative;
   border-radius: 5px;
-  background: #36383A;
-  border: 1px solid #5B5B5B;
+  background: #36383a;
+  border: 1px solid #5b5b5b;
   box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.3);
 }
 
diff --git a/src/App.js b/src/App.js
index 17401e9..b1b941c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -29,6 +29,8 @@ import { withTranslation } from "react-i18next";
 import i18n from "i18next";
 import languageImg from "./images/language.png";
 import Arrow from './images/arrow.svg'
+import logoPanePng from "./images/logo-pane.png";
+
 
 import SvgIcon from '@mui/material/SvgIcon';
 
@@ -40,11 +42,14 @@ function CustomIcon(props) {
   );
 }
 
+const isMobile = () => {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)
+}
+
 class App extends React.Component {
   constructor(props) {
     super();
     this.state = {
-      mode: "normal",
       projects: [],
       selectedProject: {},
       selectedProjectName: "",
@@ -61,10 +66,16 @@ class App extends React.Component {
         keepLogin: false,
       },
       language: localStorage.getItem("lang") ?? "zh",
+      isMobile: isMobile(),
     };
     this.t = props.t;
   }
+
   componentDidMount() {
+    window.addEventListener('resize', () => {
+      this.setState({ isMobile: isMobile() });
+    })
+
     const loginInfo = getLoginInfo();
     var tenant = utils.getTenant();
     const hideLogo = queryString.parseUrl(window.location.href)?.query
@@ -161,12 +172,6 @@ class App extends React.Component {
     });
   }
 
-  setMode(mode) {
-    this.setState({
-      mode: mode,
-    });
-  }
-
   setLoginForm(form) {
     this.setState({
       loginForm: {
@@ -208,18 +213,7 @@ class App extends React.Component {
   }
 
   render() {
-    var {
-      mode,
-      device,
-      projects,
-      selectedProject,
-      dataUrl,
-      loading,
-      loginOpen,
-      loginForm,
-      hideLogo,
-      language,
-    } = this.state;
+    const { device, projects, dataUrl, loading, loginOpen, loginForm, hideLogo, language, isMobile } = this.state;
     const { t } = this.props;
 
     return (
@@ -277,44 +271,52 @@ class App extends React.Component {
             <Button onClick={() => this.login()}>{t("submit")}</Button>
           </DialogActions>
         </Dialog>
-        <Pane
-          mode={mode}
-          onModeChange={(_mode) => this.setMode(_mode)}
-          projects={projects}
-          device={device}
-          loading={loading}
-          hideLogo={hideLogo}
-          onProjectSelect={(project) => {
-            this.setSelectedProject(project);
-          }}
-          onDeviceChange={(_device) => this.setDevice(_device)}
-        />
-        <div className="language-select-container">
-          <div className="language-select-warpper">
-            <img className="language-icon" src={languageImg} style={{ width: "18px" }} alt="" />
-            <Select
-              className="language-select"
-              value={language}
-              label={t("language")}
-              IconComponent={CustomIcon}
-              onChange={(e) => {
-                let lang = e.target.value;
-                this.setState({
-                  language: lang,
-                });
-                i18n.changeLanguage(lang);
-                localStorage.setItem("lang", lang);
-              }}
-            >
-              <MenuItem style={{ fontSize: "14px" }} value="en">
-                English
-              </MenuItem>
-              <MenuItem style={{ fontSize: "14px" }} value="zh">
-                简体中文
-              </MenuItem>
-            </Select>
+
+        {
+          <Pane
+            isMobile={isMobile}
+            projects={projects}
+            device={device}
+            loading={loading}
+            hideLogo={hideLogo}
+            onProjectSelect={(project) => {
+              this.setSelectedProject(project);
+            }}
+            onDeviceChange={(_device) => this.setDevice(_device)}
+          />
+        }
+
+        {
+          !isMobile &&
+          <div className="language-select-container">
+            <div className="language-select-warpper">
+              <img className="language-icon" src={languageImg} style={{ width: "18px" }} alt="" />
+              <Select
+                className="language-select"
+                value={language}
+                label={t("language")}
+                IconComponent={CustomIcon}
+                onChange={(e) => {
+                  let lang = e.target.value;
+                  this.setState({
+                    language: lang,
+                  });
+                  i18n.changeLanguage(lang);
+                  localStorage.setItem("lang", lang);
+                }}
+              >
+                <MenuItem style={{ fontSize: "14px" }} value="en">
+                  English
+                </MenuItem>
+                <MenuItem style={{ fontSize: "14px" }} value="zh">
+                  简体中文
+                </MenuItem>
+              </Select>
+            </div>
           </div>
-        </div>
+        }
+
+
         <div
           style={{
             display: "flex",
@@ -326,20 +328,13 @@ class App extends React.Component {
             backgroundRepeat: "no-repeat",
           }}
         >
-          {mode === "normal" ? (
-            <DeviceFrame
-              htmlUrl={this.selectedProjectUrl}
-              device={device}
-              qrDataUrl={dataUrl}
-              refreshQrCode={() => this.refreshQrCode()}
-            />
-          ) : (
-            <SettingFrame
-              setting={selectedProject?.TextObjStr}
-              settingValue={this.projectSettingValue}
-              generate={(value) => this.UpdateSetting(value)}
-            />
-          )}
+          <DeviceFrame
+            isMobile={isMobile}
+            htmlUrl={this.selectedProjectUrl}
+            device={device}
+            qrDataUrl={dataUrl}
+            refreshQrCode={() => this.refreshQrCode()}
+          />
         </div>
       </div>
     );
diff --git a/src/Components/deviceFrame/index.css b/src/Components/deviceFrame/index.css
index 5c34e0d..5652748 100644
--- a/src/Components/deviceFrame/index.css
+++ b/src/Components/deviceFrame/index.css
@@ -15,6 +15,7 @@
   right: 24px;
   bottom: 24px;
   cursor: pointer;
+  z-index: 1000;
 }
 
 .qrCode {
diff --git a/src/Components/deviceFrame/index.js b/src/Components/deviceFrame/index.js
index 5ba9942..6cacefe 100644
--- a/src/Components/deviceFrame/index.js
+++ b/src/Components/deviceFrame/index.js
@@ -85,6 +85,7 @@ function DeviceFrame(props) {
 	var [cacheKey, setCacheKey] = useState(new Date().getTime());
 	var [openPopup, setOpenPopup] = useState(false);
 	var [absoluteUrl, setAbsoluteUrl] = useState("");
+	var [isMobile, setIsMobile] = useState(props.isMobile);
 	const { t } = useTranslation();
 
 	useEffect(() => {
@@ -134,8 +135,9 @@ function DeviceFrame(props) {
 
 	return (
 		<div className="deviceFrameContainer">
+
 			<img src={refreshButtonPng} alt="refresh" onClick={() => refresh()} className="refreshButton" />
-			{props.qrDataUrl && (
+			{props.qrDataUrl && !isMobile && (
 				<div className="qrCode">
 					<img src={props.qrDataUrl} alt="qr code" />
 					<p style={{ margin: "0", }}>
@@ -147,6 +149,8 @@ function DeviceFrame(props) {
 
 				</div>
 			)}
+
+
 			<Snackbar
 				open={openPopup}
 				onClose={() => setOpenPopup(false)}
@@ -159,36 +163,57 @@ function DeviceFrame(props) {
 					{t("copySuccess")}
 				</Alert>
 			</Snackbar>
-			<div>
-				<img src={config.bkg} alt="background" style={{
-					position: "absolute",
-					top: "50%",
-					left: "50%",
-					zIndex: 100,
-					transform: `translate(-50%, -50%) ${config.rotate ? "rotate(-90deg)" : ''}`,
-					pointerEvents: 'none',
-					...config.imgStyle
-				}} />
-				{props.htmlUrl && (
-					<iframe
-						id="deviceFrame"
-						style={{
+
+			{
+
+				!isMobile ?
+					<div>
+						<img src={config.bkg} alt="background" style={{
 							position: "absolute",
 							top: "50%",
 							left: "50%",
-							transform: "translate(-50%, -50%) scale(1.007)",
-							paddingBottom: config.offsetv,
-							...config.styles
-						}}
-						allow="clipboard-read; clipboard-write *"
-						title="preview"
-						src={absoluteUrl + "&cacheKey=" + cacheKey}
-						width={config.width}
-						height={config.height}
-						frameBorder={"0"}
-					/>
-				)}
-			</div>
+							zIndex: 100,
+							transform: `translate(-50%, -50%) ${config.rotate ? "rotate(-90deg)" : ''}`,
+							pointerEvents: 'none',
+							...config.imgStyle
+						}} />
+						{props.htmlUrl && (
+							<iframe
+								id="deviceFrame"
+								style={{
+									position: "absolute",
+									top: "50%",
+									left: "50%",
+									transform: "translate(-50%, -50%) scale(1.007)",
+									paddingBottom: config.offsetv,
+									...config.styles
+								}}
+								allow="clipboard-read; clipboard-write *"
+								title="preview"
+								src={absoluteUrl + "&cacheKey=" + cacheKey}
+								width={config.width}
+								height={config.height}
+								frameBorder={"0"}
+							/>
+						)}
+					</div> : <div>
+						{
+							props.htmlUrl && <iframe
+								id="deviceFrame_mobile"
+								allow="clipboard-read; clipboard-write *"
+								title="preview"
+								src={absoluteUrl + "&cacheKey=" + cacheKey}
+								style={{
+									position: 'fixed',
+									inset: 0,
+									width: '100vw',
+									height: window.innerHeight,
+								}}
+								frameBorder={"0"}
+							/>
+						}
+					</div>
+			}
 		</div>
 	);
 }
diff --git a/src/Components/pane/index.css b/src/Components/pane/index.css
index 6fab2af..6d41025 100644
--- a/src/Components/pane/index.css
+++ b/src/Components/pane/index.css
@@ -9,6 +9,56 @@
   position: relative;
 }
 
+.selectPager {
+  left: 25px !important;
+  /* width: 319px !important; */
+}
+
+.Pane.mobile {
+  position: relative;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 60vw;
+  height: 100vh;
+  background-color: #535353;
+  z-index: 1000;
+  overflow: hidden;
+  transition: width 0.2s linear;
+}
+
+.flod-menu-btn-warpper {
+  position: fixed;
+  right: 12px;
+  top: 10px;
+  padding: 6px;
+  border-radius: 6px;
+  z-index: 1000;
+  display: flex;
+  background-color: #535353;
+}
+
+.flod-menu-btn-warpper .flod-menu-btn {
+  width: 28px;
+  height: 28px;
+  transition: all 0.2s linear;
+}
+
+.Pane.mobile.fold {
+  padding: 0;
+  width: 0;
+}
+
+.logo_mobile {
+  position: absolute;
+  width: 90%;
+  bottom: 20px;
+  left: 0;
+  right: 0;
+  margin: auto;
+  display: block;
+}
+
 .modeSelect {
   width: 100%;
   border: none;
@@ -38,11 +88,6 @@
   cursor: pointer;
 }
 
-.selectPager {
-  left: 25px !important;
-  width: 319px !important;
-}
-
 .bottomLogo {
   position: absolute;
   width: 322px;
diff --git a/src/Components/pane/index.js b/src/Components/pane/index.js
index 9943304..094da3c 100644
--- a/src/Components/pane/index.js
+++ b/src/Components/pane/index.js
@@ -15,6 +15,7 @@ import horizentalButton from "../../images/horizental-button.png";
 import verticalChecked from "../../images/vertical-button-checked.png";
 import verticalButton from "../../images/vertical-button.png";
 import modeSelectPng from "../../images/mode-select.png";
+import menuIcon from "../../images/menu.png";
 import { useTranslation } from "react-i18next";
 import SvgIcon from '@mui/material/SvgIcon';
 
@@ -26,7 +27,7 @@ function CustomIcon(props) {
 	);
 }
 
-var deviceConfigs = [
+const deviceConfigs = [
 	{
 		name: "iPhone",
 		icon: iphonePng,
@@ -51,16 +52,12 @@ var deviceConfigs = [
 ];
 
 function Pane(props) {
-	var [mode, setMode] = useState(props.mode);
+	var [isMobile] = useState(props.isMobile);
 	var [device, setDevice] = useState(props.device);
 	var [project, setProject] = useState(props.project);
-	const { t } = useTranslation();
 
-	var modeChange = (e) => {
-		var _mode = e.target.value;
-		setMode(_mode);
-		props.onModeChange(e.target.value);
-	};
+	const [foldPanel, setFoldPanel] = useState(props.isMobile ? true : false);
+	const { t } = useTranslation();
 
 	var deviceChange = (_device) => {
 		setDevice(_device);
@@ -70,6 +67,7 @@ function Pane(props) {
 	var projectSelect = (e) => {
 		var projectName = e.target.value;
 		setProject(projectName);
+		setFoldPanel(true)
 		props.onProjectSelect(projectName);
 	};
 
@@ -77,8 +75,26 @@ function Pane(props) {
 		props.projects.length && !project && setProject(props.projects[0]);
 	}, [props.projects]);
 
+
 	return (
-		<div className="Pane">
+		<div className={`Pane ${isMobile ? 'mobile' : ''} ${foldPanel ? 'fold' : ''}`} style={{ height: window.innerHeight }}>
+			{
+				isMobile &&
+				<div className="flod-menu-btn-warpper">
+					<img
+						onClick={() => {
+							setFoldPanel(!foldPanel)
+						}}
+						src={menuIcon}
+						alt="menu"
+						className="flod-menu-btn"
+						style={{
+							transform: !foldPanel ? 'rotate(-90deg)' : '',
+						}}
+					/>
+				</div>
+			}
+
 			<div>
 				{props.loading ? (
 					<CircularProgress color="inherit" />
@@ -98,9 +114,6 @@ function Pane(props) {
 								borderRadius: '5px',
 								color: "white",
 								boxShadow: '0px 3px 0px 0px rgba(0, 0, 0, 0.3)',
-								// '&.MuiOutlinedInput-notchedOutline': {
-								// 		borderColor: '#757575', // 设置焦点时的边框颜色为红色
-								// 	},
 								'&.Mui-focused': {
 									borderColor: '#757575',
 									'&.MuiOutlinedInput-notchedOutline': {
@@ -124,48 +137,52 @@ function Pane(props) {
 				)}
 			</div>
 
-			<List
-				sx={{
-					paddingTop: '20px'
-				}}
-			>
-				{deviceConfigs.map((_device) => (
-					<ListItem
-						key={_device.name}
-						sx={{
-							display: "flex",
-							textAlign: "center",
-							justifyContent: "space-between",
-							borderRadius: '5px',
-							background: '#535353',
-							border: '1px solid #757575',
-							boxShadow: '0px 3px 0px 0px rgba(0, 0, 0, 0.3)',
-							paddingLeft: '23px',
-							paddingRight: '20px',
-							marginBottom: '14px'
 
-						}}>
-						<div style={{ display: "flex", flexDirection: 'column', justifyContent: 'center', alignItems: "center", width: '98px' }}>
-							<img className="deviceIcon" style={{ height: _device.name === 'iPad' ? '54px' : '76px' }} src={_device.icon} alt={_device.name} />
-							<img className="deviceText" src={_device.text} alt={_device.name} />
-						</div>
-						<div className="deviceContent">
-							<div className="deviceButtons">
-								<button className={`pane-btn  ${device === _device.horizental ? "checked" : ""}`} onClick={() => deviceChange(_device.horizental)}>
-									{t("horizontal")}
-								</button>
-								<button className={`pane-btn  ${device === _device.vertical ? "checked" : ""}`} onClick={() => deviceChange(_device.vertical)}>
-									{t("vertical")}
-								</button>
-								{/* <img src={device === _device.horizental ? horizentalChecked : horizentalButton} alt="horizental" onClick={() => deviceChange(_device.horizental)} />
-								<img src={device === _device.vertical ? verticalChecked : verticalButton} alt="vertical" onClick={() => deviceChange(_device.vertical)} /> */}
+			{
+				!isMobile && <List
+					sx={{
+						paddingTop: '20px'
+					}}
+				>
+					{deviceConfigs.map((_device) => (
+						<ListItem
+							key={_device.name}
+							sx={{
+								display: "flex",
+								textAlign: "center",
+								justifyContent: "space-between",
+								borderRadius: '5px',
+								background: '#535353',
+								border: '1px solid #757575',
+								boxShadow: '0px 3px 0px 0px rgba(0, 0, 0, 0.3)',
+								paddingLeft: '23px',
+								paddingRight: '20px',
+								marginBottom: '14px'
+
+							}}>
+							<div style={{ display: "flex", flexDirection: 'column', justifyContent: 'center', alignItems: "center", width: '98px' }}>
+								<img className="deviceIcon" style={{ height: _device.name === 'iPad' ? '54px' : '76px' }} src={_device.icon} alt={_device.name} />
+								<img className="deviceText" src={_device.text} alt={_device.name} />
 							</div>
-						</div>
-					</ListItem>
-				))}
-			</List>
+							<div className="deviceContent">
+								<div className="deviceButtons">
+									<button className={`pane-btn  ${device === _device.horizental ? "checked" : ""}`} onClick={() => deviceChange(_device.horizental)}>
+										{t("horizontal")}
+									</button>
+									<button className={`pane-btn  ${device === _device.vertical ? "checked" : ""}`} onClick={() => deviceChange(_device.vertical)}>
+										{t("vertical")}
+									</button>
+									{/* <img src={device === _device.horizental ? horizentalChecked : horizentalButton} alt="horizental" onClick={() => deviceChange(_device.horizental)} />
+							<img src={device === _device.vertical ? verticalChecked : verticalButton} alt="vertical" onClick={() => deviceChange(_device.vertical)} /> */}
+								</div>
+							</div>
+						</ListItem>
+					))}
+				</List>
+			}
 
-			{!props.hideLogo && <div className="bottomLogo"><img src={logoPanePng} alt="logo" width={"100%"} /></div>}
+			{(!props.hideLogo && !isMobile) && <div className="bottomLogo"><img src={logoPanePng} alt="logo" width={"100%"} /></div>}
+			{(!props.hideLogo && isMobile) && <img src={logoPanePng} className="logo_mobile" alt="logo" width={"100%"} />}
 		</div>
 	);
 }
diff --git a/src/apis/loginApi.js b/src/apis/loginApi.js
index 63115d3..990126a 100644
--- a/src/apis/loginApi.js
+++ b/src/apis/loginApi.js
@@ -1,6 +1,6 @@
-var BaseUrl = "https://api.soyootech.com/";
+// var BaseUrl = "https://api.soyootech.com/";
 
-// var BaseUrl = "api/";
+var BaseUrl = "api/";
 export async function UserLogin(loginForm) {
   try {
     var response = await fetch(BaseUrl + "SoyooUser/previewlogin", {
diff --git a/src/images/menu.png b/src/images/menu.png
new file mode 100644
index 0000000000000000000000000000000000000000..4413eb683233215933ce3e140bdc2c5d6375cda4
GIT binary patch
literal 2137
zcmdUxX;4#F7>2|3qL)x4iwh!#up|MI)gme&380Y5;sOmQ1XO56h9yK=Kmy#9y#g61
zP!>TDTM4TRTg4Cs2{Z^IWf>EN0RcCbpdpk%X|%ST>Hl`@k8|FcGxN>&<9+6tlXk?-
zNe!uqL?94qRA<LyitKuKp!JHo#;dkO5lYNsPWFh}Uac1h1caqJQaqyQGfyNTL(ZsV
z#_gQLq$4U$1g%^$$%phXEi0qPFy&sFZ=Yjt&s+{?seQM^W=_@>Ea;ytQU{=wY<{Mi
zA_@_dSZmahHULVb<ODo#9aN1DSN5Lxfvcj#{#51h_rV}^qtn$B3xGkGTjs+MDj=hX
zO9Y`u`e)D7qVZjtR-Ud9s)G8k(?^fYu?*!FqVUc+mor)pCE$a_9+o;}4w15*nSr1T
zHCLXqPr$pf_e^Ojv8x%!2NMyLLNKJq5&%D@g%!vMErGVEadoNbt7I-}$r28e^VTk@
z82E6Gr>iU83!=wk^yU-!O(CLW18o^gdre)Q_-+U_QCEL+0D|`c4w-#&UVO2UT-tw%
zttBw8)hI1@bI}G(P*H7j@@ZA+T3#{~VN%6ARLsFaAWDOl-Gmm_7*INM+iji5H%=s?
zH4fLvXtxilSk&Ssf^yY?uXW5y!fkzQ3k)ckRittpd=?lD8#0Y=Gqnn5;&xQU!C)t=
z>*{EZBed{^sL>R52udPvf=@ygv$i&O)6+dlodI=PX@D<}eK9C=B0LATt%|M#hBDM6
zkmKfI&J~3qrg`uTU0BTzXh7<OM@L)s>IS4m(hs(t!(>+xmB3jkw>t}Nt=2%*Y@tD7
zS>SzA_QlDe+iwQ3ZN6=orpKd%`K6yObW{=S*7)^=A!g3fH<hCgh8f?2^igdW<Bi-;
z;FB2VJ8W^pX;Km&RARgEBhK0Z;EVj0G?IcWAkRUL#yhw5xY|$>@Ys5-$5{x<a$xAV
z3IG-)Og@ZLU}wt2x})%2;I5QK1#fW$MNw=7h3LQUmbMc6tx(*71tAM1VcDvJNxvy#
z37*VR@!B}!lz?Bgu#)^YD>*w;)y@;M!=EGJ;U>7(@O}zYwK2DB5N~#PjG@{%SM(@O
zEMu+My~f5UUr+ne%S5vV-8@Gu5imy9#~6EfO2F9$wYM$R%bIpSW<tBrAK>5+h8S9<
zV&*R8N`ox^bZSW16>u9({X+S4Qq3D1Sd#ea6z_H0=A&#an!BSd&<`%M+E!M1V*Z2Z
z^VQ4B7!8@ugk)}kWY4h@HL|=9tV@EPp_`NN6HnW*)vcUJI%z&!N*$Us>e?%t*ekB6
zOSxu|#y6g&xKV7TT#??QK%gn6C%B-Y_{u$fAU~fr(Q2RPHSO6^MWj-LtzF0Hb%iT?
zS*AvA8!GX6e3swmvAW$}p?9qPY$YP;h-pG-A2urXiS77ccBv@E_<D(TSiIS!yx3(-
zx_Z~c0yTq<Ito<MI9o4us5{_c1O;>XoOcR>@-iSO8w5aV0yl6609NK)rD7nIz7jVt
zQqi$n9+9f(7`%33NMV}&-i7)f_uzXrFqnY_!@t?s!_b|_fVd`qInQuLz#0{-wI3*>
zp^BoCC(HXaVR`6yv{p*U<zaiz&F*7#5xG>zt&=ccrt&c`gAl#_x)|wwdWS&LZ7Vp&
zNne0sGe@@U|BS<s){|oBBm4WX8t%=wDdBG?(S$CB)bSTRl&k-!OgK6xR1+6F3AlcE
zn4xWfTQiB*1*30<i1H_QA4w(S{xrwWs@~I)f0=`6m)Y*R9Fw{;2NI9to^9$l^R$A~
z;7bgz613)d3-|4G(S2_YqYviD{_a-ez#rxqklh$R&q1D6`G+~OR)Ob>Hn3p$i5}hf
z*A~_Y=2gp^#SO=KeckW9L0H$1gSQemG0M^X)D<)Ef874R3hEky7ppm9)M0L^_$wf&
M2i+WN?fu!m19#VeBLDyZ

literal 0
HcmV?d00001

diff --git a/src/setupProxy.js b/src/setupProxy.js
index 2026793..9316ff4 100644
--- a/src/setupProxy.js
+++ b/src/setupProxy.js
@@ -1,12 +1,12 @@
 const { createProxyMiddleware } = require("http-proxy-middleware");
 
 module.exports = function (app) {
-	// app.use(
-	// 	"/api",
-	// 	createProxyMiddleware({
-	// 		target: "https://api.soyootech.com/",
-	// 		changeOrigin: true,
-	// 		pathRewrite: { "^/api": "" },
-	// 	})
-	// );
+	app.use(
+		"/api",
+		createProxyMiddleware({
+			target: "https://api.soyootech.com/",
+			changeOrigin: true,
+			pathRewrite: { "^/api": "" },
+		})
+	);
 };