From 2dedc2f2bca041a98b563088bf55547188bac86a Mon Sep 17 00:00:00 2001
From: Glauber Costa Vila Verde <glauber.vila.verde@gmail.com>
Date: Tue, 11 Jun 2024 16:47:11 +0000
Subject: [PATCH] feat(Enviroment-Alert): added an alert when portal running in
 development

---
 backend/common/views.py                       | 12 +++++--
 .../src/components/AlertEnvironment/index.js  | 19 ++++++++++
 frontend/src/pages/PredictionEvents/Detail.js | 11 ++++++
 .../src/pages/PublicPortal/Banner/index.js    | 36 +------------------
 frontend/src/pages/PublicPortal/Home/index.js | 19 ++++++++--
 5 files changed, 58 insertions(+), 39 deletions(-)
 create mode 100644 frontend/src/components/AlertEnvironment/index.js

diff --git a/backend/common/views.py b/backend/common/views.py
index cc90ab4f..3734c815 100755
--- a/backend/common/views.py
+++ b/backend/common/views.py
@@ -7,8 +7,9 @@
 from django.http import HttpResponse
 from django.shortcuts import redirect
 from rest_framework.decorators import action, api_view, permission_classes
+from rest_framework.permissions import AllowAny
 from rest_framework.response import Response
-from rest_framework.permissions import AllowAny 
+
 
 @api_view(["GET"])
 def teste(request):
@@ -64,13 +65,20 @@ def test_background_task(request):
         )
         return Response(result)
 
+
 @api_view(["GET"])
 @permission_classes([AllowAny])
 def which_environment(request):
+
     if request.method == "GET":
-        result={settings.ENVIRONMENT_NAME}
+        env_name = settings.ENVIRONMENT_NAME
+
+        dev_env = ["Development", "development", "dev", "Staging", "Homolog"]
+        is_dev = True if env_name in dev_env else False
+        result = {"enviroment_name": settings.ENVIRONMENT_NAME, "is_dev": is_dev}
         return Response(result)
 
+
 @action(detail=False, methods=["GET"])
 def logout_view(request):
     logout(request)
diff --git a/frontend/src/components/AlertEnvironment/index.js b/frontend/src/components/AlertEnvironment/index.js
new file mode 100644
index 00000000..996f6e05
--- /dev/null
+++ b/frontend/src/components/AlertEnvironment/index.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import Alert from '@mui/material/Alert'
+import AlertTitle from '@mui/material/AlertTitle'
+
+function AlertEnvironment() {
+  return (
+    <Alert severity='warning'>
+      <AlertTitle>This is a development and testing version of this platform.</AlertTitle>
+      Do not use its data or reference it in any way.
+      <br />
+      For the official product, visit the link &nbsp;
+      <a href='https://solarsystem.linea.org.br' target='blank' rel='noopener noreferrer'>
+        https://solarsystem.linea.org.br.
+      </a>
+    </Alert>
+  )
+}
+
+export default AlertEnvironment
diff --git a/frontend/src/pages/PredictionEvents/Detail.js b/frontend/src/pages/PredictionEvents/Detail.js
index 316960e3..ce474173 100644
--- a/frontend/src/pages/PredictionEvents/Detail.js
+++ b/frontend/src/pages/PredictionEvents/Detail.js
@@ -17,6 +17,8 @@ import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
 import { getOccultationById, getStarByOccultationId } from '../../services/api/Occultation'
 import PredictOccultationMap from './partials/PredictMap'
 import AladinV3 from '../../components/AladinV3/index'
+import AlertEnvironment from '../../components/AlertEnvironment/index'
+import { whichEnvironment } from '../../services/api/Auth'
 
 function PredictionEventDetail() {
   const { id } = useParams()
@@ -25,6 +27,7 @@ function PredictionEventDetail() {
   const [circumstances, setCircumstances] = useState([])
   const [star, setStar] = useState([])
   const [object, setObject] = useState([])
+  const [isDev, setIsDev] = useState(false)
 
   useEffect(() => {
     getOccultationById({ id }).then((res) => {
@@ -37,6 +40,13 @@ function PredictionEventDetail() {
         ...res
       })
     })
+    whichEnvironment()
+      .then((res) => {
+        setIsDev(res.is_dev)
+      })
+      .catch(() => {
+        // TODO: Aviso de erro
+      })
   }, [id])
 
   useEffect(() => {
@@ -248,6 +258,7 @@ function PredictionEventDetail() {
 
   return (
     <Container maxWidth='lg'>
+      {isDev && <AlertEnvironment />}
       <Typography variant='h4' align='center' sx={{ marginTop: 3 }}>
         Occultation by {occultation.name} {occultation.number ? `(${occultation.number})` : ''}
       </Typography>
diff --git a/frontend/src/pages/PublicPortal/Banner/index.js b/frontend/src/pages/PublicPortal/Banner/index.js
index 6a092a75..39c679de 100644
--- a/frontend/src/pages/PublicPortal/Banner/index.js
+++ b/frontend/src/pages/PublicPortal/Banner/index.js
@@ -1,48 +1,14 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import Grid from '@mui/material/Grid'
 import styles from './styles'
 import Box from '@mui/material/Box'
-import { Alert } from '../../../../node_modules/@mui/lab/index'
-import { whichEnvironment } from '../../../services/api/Auth' 
-//import { Typography } from '../../../../node_modules/@mui/material/index'
 
 function PublicBanner() {
   const classes = styles()
-  const [resultsDev, setResultsDev] = useState([])
-  
-  useEffect(() => {
-    // Get results by year
-    whichEnvironment()
-      .then((res) => {
-        setResultsDev(res)
-      })
-      .catch(() => {
-        setResultsDev([])
-      })
-  }, [])
 
-  
-  const verifyPage = resultsDev[0]
-  //const verifyPageM = verifyPage.toLowerCase()
-  //console.log(verifyPageM)
-  
   return (
     <Box className={classes.root}>
       <Grid container direction='row' justifyContent='space-between' spacing={2} className={classes.container}>
-        {verifyPage?.toLowerCase() === 'development' ? 
-        <Grid item xs={12}>
-          <Alert severity='warning'> 
-            {/*{verifyPage?.toLowerCase()}*/}
-            This is a development and testing version of this platform. Do not use its data or reference it in any way. 
-            <br></br>For the official product, visit the link &nbsp;
-            <a href="https://solarsystem.linea.org.br" target='blank' rel="noopener noreferrer">
-              https://solarsystem.linea.org.br.
-            </a>
-          </Alert>
-        </Grid>
-        :
-        ' '
-        }
         <img src={`${process.env.PUBLIC_URL}/img/tno_logo_projetos.png`} alt='Data Release Interface' className={classes.logo} />
         <Grid item xs={12} className={classes.titleWrapper}>
           <h1 className={classes.title}>LIneA Occultation Prediction Database</h1>
diff --git a/frontend/src/pages/PublicPortal/Home/index.js b/frontend/src/pages/PublicPortal/Home/index.js
index 58ffa87d..e907fb03 100644
--- a/frontend/src/pages/PublicPortal/Home/index.js
+++ b/frontend/src/pages/PublicPortal/Home/index.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import Grid from '@mui/material/Grid'
 import Box from '@mui/material/Box'
 import Card from '@mui/material/Card'
@@ -8,10 +8,24 @@ import PredictionEventsDataGrid from '../../../components/PredictionEventsDataGr
 import PredictionHighlights from '../../../components/PredictionHighlights/index'
 import PublicBanner from '../Banner/index'
 import Container from '@mui/material/Container'
-
+import { whichEnvironment } from '../../../services/api/Auth'
+import AlertEnvironment from '../../../components/AlertEnvironment/index'
 function Main() {
+  const [isDev, setIsDev] = useState(false)
+
+  useEffect(() => {
+    whichEnvironment()
+      .then((res) => {
+        setIsDev(res.is_dev)
+      })
+      .catch(() => {
+        // TODO: Aviso de erro
+      })
+  }, [])
+
   return (
     <>
+      {isDev && <AlertEnvironment />}
       <PublicBanner />
       <Container maxWidth='lg'>
         <PredictionHighlights />
@@ -26,6 +40,7 @@ function Main() {
                 </Card>
               </Grid>
               <Grid item xs={12}>
+                {isDev && <AlertEnvironment />}
                 <PredictionEventsDataGrid />
               </Grid>
             </Grid>