Merge pull request #278 from Program-AR/env-vite

Vite prefix + Acerca de mas lindo

.github/workflows/build.yml

@@ -31,10 +31,10 @@ jobs:
   pack-linux: # When there is a tag, pack the installers and upload to Github.
       runs-on: ubuntu-latest
       env:
-        API_URL: ${{ secrets.API_URL }}
-        PB_APP_URL: ${{ secrets.APP_URL }}
-        GOOGLE_ANALYTICS_KEY: ${{ secrets.GOOGLE_ANALYTICS_KEY }}
-        APP_VERSION: ${{github.ref_name}}
+        VITE_API_URL: ${{ secrets.API_URL }}
+        VITE_PB_APP_URL: ${{ secrets.APP_URL }}
+        VITE_GOOGLE_ANALYTICS_KEY: ${{ secrets.GOOGLE_ANALYTICS_KEY }}
+        VITE_APP_VERSION: ${{github.ref_name}}
       if: startsWith(github.ref, 'refs/tags')
       needs: test
       steps:
@@ -55,10 +55,10 @@ jobs:
   pack-macos: # When there is a tag, pack the installers and upload to Github.
     runs-on: macos-latest
     env:
-      API_URL: ${{ secrets.API_URL }}
-      PB_APP_URL: ${{ secrets.APP_URL }}
-      GOOGLE_ANALYTICS_KEY: ${{ secrets.GOOGLE_ANALYTICS_KEY }}
-      APP_VERSION: ${{github.ref_name}}
+      VITE_API_URL: ${{ secrets.API_URL }}
+      VITE_PB_APP_URL: ${{ secrets.APP_URL }}
+      VITE_GOOGLE_ANALYTICS_KEY: ${{ secrets.GOOGLE_ANALYTICS_KEY }}
+      VITE_APP_VERSION: ${{github.ref_name}}
     if: startsWith(github.ref, 'refs/tags')
     needs: test
     steps:
@@ -78,10 +78,10 @@ jobs:
   pack-windows: # When there is a tag, pack the installers and upload to Github.
     runs-on: ubuntu-latest
     env:
-      API_URL: ${{ secrets.API_URL }}
-      PB_APP_URL: ${{ secrets.APP_URL }}
-      GOOGLE_ANALYTICS_KEY: ${{ secrets.GOOGLE_ANALYTICS_KEY }}
-      APP_VERSION: ${{github.ref_name}}
+      VITE_API_URL: ${{ secrets.API_URL }}
+      VITE_PB_APP_URL: ${{ secrets.APP_URL }}
+      VITE_GOOGLE_ANALYTICS_KEY: ${{ secrets.GOOGLE_ANALYTICS_KEY }}
+      VITE_APP_VERSION: ${{github.ref_name}}
     if: startsWith(github.ref, 'refs/tags')
     needs: test
     steps:
@@ -101,10 +101,10 @@ jobs:
   publish-surge: # When there is a push in develop, publish on surge
     runs-on: ubuntu-latest
     env:
-      API_URL: ${{ secrets.API_URL }}
-      PB_APP_URL: ${{ secrets.APP_URL }}
-      GOOGLE_ANALYTICS_KEY: ${{ secrets.GOOGLE_ANALYTICS_KEY }}
-      APP_VERSION: ${{github.ref_name}}
+      VITE_API_URL: ${{ secrets.API_URL }}
+      VITE_PB_APP_URL: ${{ secrets.APP_URL }}
+      VITE_GOOGLE_ANALYTICS_KEY: ${{ secrets.GOOGLE_ANALYTICS_KEY }}
+      VITE_APP_VERSION: ${{github.ref_name}}
     if: false 
     #github.event_name == 'push' && github.ref == 'refs/heads/develop'
     needs: test

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pilasbloques",
-  "version": "2.5.8",
+  "version": "2.5.12",
   "productName": "Pilas Bloques",
   "genericName": "Programacion con bloques",
   "description": "Una herramienta para aprender a programar utilizando bloques",

sample.env

@@ -1,4 +1,4 @@
-API_URL=http://localhost:3001
-PB_APP_URL=http://localhost:3000
-APP_VERSION=$npm_package_version
-GOOGLE_ANALYTICS_KEY=G-xxxxxx #Not necessary, can be omitted for development
+VITE_API_URL=http://localhost:3001
+VITE_PB_APP_URL=http://localhost:3000
+VITE_APP_VERSION=$npm_package_version
+VITE_GOOGLE_ANALYTICS_KEY=G-xxxxxx #Not necessary, can be omitted for development

src/components/about/About.tsx

@@ -1,19 +1,19 @@
 import { Typography } from "@mui/material"
-import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Header } from "../header/Header"
 import styles from "./about.module.css"
-import { Container } from "@mui/material";
+import { UserCard } from "../users/userForm";
+import { PBLink } from "../footer/Footer";
 
-export const About = () =>{
-    const {t} = useTranslation("about")
+export const About = () => {
+    const { t } = useTranslation("about")
     return <>
-    <Header/>
-    <Container className={styles.about}>
-        <Typography className={styles.title} variant="h4">{t("title")}</Typography>
-        <Typography>{t("text")}
-            <Link to="https://pilasbloques.program.ar/acerca-de-pilas-bloques/" target="_blank">{t("redirect")}</Link>
-        </Typography>
-    </Container>
+        <Header />
+        <UserCard title={t("title")} handleSubmit={() => { }}>
+            <Typography className={styles.title} variant="h4"></Typography>
+            <Typography>{t("text")}
+                <PBLink to="https://pilasbloques.program.ar/acerca-de-pilas-bloques/" target="_blank">{t("redirect")}</PBLink>
+            </Typography>
+        </UserCard>
     </>
 }

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

@@ -34,7 +34,7 @@ const ShareDialog = ({ open, setDialogOpen }: { open: boolean, setDialogOpen: (o
 export const ShareModal = () => {
     const { sharedId } = useContext(CreatorContext)
 
-    const sharedLink = process.env.PB_APP_URL  + `/#/desafio/guardado/${sharedId}`
+    const sharedLink = process.env.VITE_PB_APP_URL  + `/#/desafio/guardado/${sharedId}`
 
     return <Stack>
         {sharedId ?

src/components/footer/Footer.tsx

@@ -17,10 +17,10 @@ export const PBLink = (props: LinkProps & PBLinkProps) => <Link {...props} style
 
 
 const Version = () => {
-  if(!process.env.APP_VERSION) throw new Error("Missing Pilas Bloques version. ENV not set")
+  if(!process.env.VITE_APP_VERSION) throw new Error("Missing Pilas Bloques version. ENV not set")
   const {t} = useTranslation("footer")
 
-  const appVersion = process.env.APP_VERSION
+  const appVersion = process.env.VITE_APP_VERSION
   const newsUrl = new URL(`/novedades`, siteUrl).toString()
   const lastCommitHash = process.env.VITE_GIT_SHORT_COMMIT_HASH
   const repoUrl = `https://github.com/Program-AR/pilas-bloques-app/tree/${process.env.VITE_GIT_COMMIT_HASH}`

src/index.tsx

@@ -9,8 +9,8 @@ import { ThemeContextProvider } from './theme/ThemeContext';
 import { PBProgress } from "./components/PBProgress";
 
 
-if (process.env.GOOGLE_ANALYTICS_KEY) {
-  ReactGA.initialize(process.env.GOOGLE_ANALYTICS_KEY);
+if (process.env.VITE_GOOGLE_ANALYTICS_KEY) {
+  ReactGA.initialize(process.env.VITE_GOOGLE_ANALYTICS_KEY);
 }
 
 const root = ReactDOM.createRoot(

src/pbApi.ts

@@ -96,7 +96,7 @@ export namespace PilasBloquesApi{
       return isValid
     }
 
-    export const baseURL = window.PBRuntime?.apiURL || process.env.API_URL
+    export const baseURL = window.PBRuntime?.apiURL || process.env.VITE_API_URL
 
     async function bodyWithContext<T>(body?: T) {
       return body ? {
@@ -114,9 +114,6 @@ export namespace PilasBloquesApi{
         headers.append('Content-Type', 'application/json');
         if(user) headers.append('Authorization', `Bearer ${user.token}`)
 
-        console.log(url)
-        console.log(body)
-
         return _doFetch(url, {
           method,
           body: JSON.stringify(await bodyWithContext<T>(body)),

src/pbSession.ts

@@ -27,7 +27,7 @@ export namespace PBSession {
           online: online(),
           browserId: null,
           userId: LocalStorage.getUser(),
-          version: process.env.APP_VERSION,
+          version: process.env.VITE_APP_VERSION,
           experimentGroup: 'off',
           url: window.location.href,
           ip: await userIp(),

src/test/shareByUrl.test.tsx

@@ -102,7 +102,7 @@ describe("Share by url", () => {
             await shareChallenge()
             const urlText = await screen.findByRole('textbox')
 
-            expect(urlText.getAttribute('value')).toBe(`${process.env.PB_APP_URL}/#/desafio/guardado/shared`)
+            expect(urlText.getAttribute('value')).toBe(`${process.env.VITE_PB_APP_URL}/#/desafio/guardado/shared`)
         })
 
         test("Should change to save button on challenge share", async () => {
@@ -130,7 +130,7 @@ describe("Share by url", () => {
             const urlText = await screen.findByRole('textbox')
 
             //The url text is not changing in the text
-            expect(urlText.getAttribute('value')).toBe(`${process.env.PB_APP_URL}/#/desafio/guardado/newShared`)
+            expect(urlText.getAttribute('value')).toBe(`${process.env.VITE_PB_APP_URL}/#/desafio/guardado/newShared`)
         })
 
     })