Merge pull request #36 from sciencemesh/account-for-infrastructure-st…

…atus

Distinguish between test/production providers

.node_version

@@ -0,0 +1 @@
+16

package.json

@@ -1,6 +1,6 @@
 {
   "name": "meshdirectory-web",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "authors": [
     "Miroslav Bauer @ CESNET <https://github.com/mirekys>"
   ],
@@ -27,7 +27,6 @@
     "@headlessui/react": "^1.7.4",
     "@react-three/drei": "^9.40.0",
     "@react-three/fiber": "^8.9.0",
-    "glsl-random": "^0.0.5",
     "next": "^13.0.4",
     "next-pwa": "^5.6.0",
     "react": "^18.2.0",
@@ -48,8 +47,6 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-tailwind": "^0.2.1",
     "file-loader": "^6.2.0",
-    "glslify": "^7.1.1",
-    "glslify-loader": "^2.0.0",
     "mapshaper": "^0.6.9",
     "next-secure-headers": "^2.2.0",
     "postcss": "^8.4.18",
@@ -58,4 +55,4 @@
     "tailwindcss": "^3.2.1",
     "url-loader": "^4.1.1"
   }
-}
+}

src/components/dom/AcceptInvite.jsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { useRouter } from 'next/router'
+import { AiTwotoneExperiment } from 'react-icons/ai'
 import ProviderSelect from '@/components/dom/ProviderSelect'
 import ErrorBanner from '@/components/dom/ErrorBanner'
 
@@ -9,7 +10,7 @@ export default function AcceptInvite({ from, withProvider, setWithProvider, prov
 
   function acceptInvite() {
     if (!withProvider) {
-      setClientError({ message: 'Please choose a valid ScienceMesh site' })
+      setError({ message: 'Please choose a valid ScienceMesh site' })
       return
     }
 
@@ -40,22 +41,30 @@ export default function AcceptInvite({ from, withProvider, setWithProvider, prov
 
   return (
     <div className='left-0 z-20 h-full px-6 mx-auto sm:absolute md:px-10 bg-white/80 backdrop-blur-md'>
-      <section className='flex flex-col items-center justify-center my-24 text-center sm:items-start sm:text-left sm:py-6 grow text-md text-secondary gap-6'>
+      <section className='flex flex-col items-center justify-center h-full text-center sm:items-start sm:text-left sm:py-6 grow text-md text-secondary gap-6'>
         <span className='inline-block font-light'>Accept an invitation to collaborate from</span>
         <span className='py-2 text-4xl font-medium border-b-2 border-dotted border-b-primary text-primary-dark'>
-          {from?.fullName || <div className='w-48 h-8 rounded-sm animate-pulse bg-slate-300' />}
+          {from?.fullName || from?.name || <div className='w-48 h-8 rounded-sm animate-pulse bg-slate-300' />}
         </span>
         <span className='inline-block font-light'>using your</span>
         <div className='w-auto min-w-[25rem] max-w-7xl'>
           <ProviderSelect providers={providers} selected={withProvider} onChange={onProviderChange} />
           {error && <ErrorBanner className='mt-2' error={error} />}
         </div>
-        <span className='inline-block font-extralight'>ScienceMesh site account.</span>
+        <span className='inline-block font-extralight'>
+          {from?.properties?.INFRASTRUCTURE === 'Test' && (
+            <span className='py-1 mr-2 font-bold text-red-800 bg-red-100 rounded px-2.5'>
+              <AiTwotoneExperiment className='inline-block w-5 h-5 my-2 mr-2' />
+              TESTING
+            </span>
+          )}
+          ScienceMesh site account.
+        </span>
         <button
           onClick={acceptInvite}
           title='Accept invite'
           aria-label='Accept invite'
-          className='px-4 py-2 mt-10 text-2xl font-medium text-white shadow-lg w-72 rounded-md bg-gradient-to-br from-primary to-secondary-dark hover:from-orange-600 hover:to-primary-dark focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2'>
+          className='px-4 py-2 mt-4 text-2xl font-medium text-white shadow-lg w-72 rounded-md bg-gradient-to-br from-primary to-secondary-dark hover:from-orange-600 hover:to-primary-dark focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2'>
           Accept
         </button>
       </section>

src/components/dom/ProviderModal.jsx

@@ -49,9 +49,9 @@ export default function ProviderModal({ provider, close }) {
                   <Dialog.Panel className='w-full max-w-md p-6 overflow-hidden text-left align-middle bg-white shadow-xl transform rounded-2xl transition-all'>
                     <Dialog.Title as='h3' className='text-xl font-medium text-gray-900 border-b-2 leading-6'>
                       <span className='mr-2 font-bold'>{fullName}</span>
-                      <span className='font-light text-gray-500'> site info</span>
+                      <span className='font-light text-gray-500'>Site info</span>
                     </Dialog.Title>
-                    <div className='mt-2 text-sm text-gray-500 space-y-4'>
+                    <div className='px-2 mt-2 text-sm text-gray-500 space-y-4'>
                       <p className='text-lg'>{description}</p>
                       {homepage && (
                         <div>

src/pages/_app.jsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import dynamic from 'next/dynamic'
 import Header, { titleDefault } from '@/config'
 import Layout from '@/components/dom/Layout'
@@ -7,18 +7,51 @@ import { ErrorBoundary } from 'react-error-boundary'
 import { useRouter } from 'next/router'
 import '@/styles/index.css'
 import GlobeError from '@/components/dom/GlobeError'
+import { areEqual } from '@/util'
 
 const Scene = dynamic(() => import('@/components/canvas/Scene'), { ssr: true, suspense: true })
 
 export default function App({ Component, pageProps = { title: 'index' } }) {
-  const ref = useRef()
   const { query, isReady } = useRouter()
   const { providerDomain, token } = query
 
   const [withProvider, setWithProvider] = useState(null)
   const [fromProvider, setFromProvider] = useState(null)
+  const providers = pageProps.providers?.filter(
+    (p) => p.properties?.INFRASTRUCTURE === fromProvider?.properties?.INFRASTRUCTURE,
+  )
   const propsReady = isReady && pageProps.providers
-  const propsValid = propsReady && fromProvider && token
+  const propsValid = propsReady && fromProvider && providers && token
+
+  // Used by Mesh Globe
+  const randomProviderConnections = useMemo(
+    () =>
+      providers
+        ? providers
+            .sort(() => 0.5 - Math.random())
+            .map((p1, i) =>
+              Math.random() > 0.5
+                ? providers
+                    .slice(i, Math.floor(Math.random() * 1000) % providers.length)
+                    .map((p2) => (Math.random() > 0.5 ? [p1, p2] : [p1, p2]))
+                : [],
+            )
+            .flat()
+            .filter(([p1, p2]) => !areEqual(p1, p2) && p1.location && p2.location)
+            .map(([p1, p2]) => {
+              const { lat: startLat, lng: startLng } = p1.location
+              const { lat: endLat, lng: endLng } = p2.location
+              return {
+                startLat,
+                startLng,
+                endLat,
+                endLng,
+                color: '#c7e8f9',
+              }
+            })
+        : {},
+    [providers],
+  )
 
   useEffect(() => {
     if (propsReady) {
@@ -30,7 +63,7 @@ export default function App({ Component, pageProps = { title: 'index' } }) {
   return (
     <>
       <Header title={`${titleDefault} | ${pageProps.title}`} />
-      <Layout ref={ref}>
+      <Layout>
         {propsReady && fromProvider === false && (
           <Error
             status={400}
@@ -44,6 +77,7 @@ export default function App({ Component, pageProps = { title: 'index' } }) {
         {propsValid && (
           <Component
             {...pageProps}
+            providers={providers}
             setWithProvider={setWithProvider}
             withProvider={withProvider}
             fromProvider={fromProvider}
@@ -53,7 +87,7 @@ export default function App({ Component, pageProps = { title: 'index' } }) {
         {propsValid && Component?.canvas && (
           <ErrorBoundary FallbackComponent={GlobeError} onReset={() => {}}>
             <Scene className='hidden sm:block !absolute !top-0 !left-0  !overflow-visible !h-[100vh] !w-screen'>
-              {Component.canvas({ ...pageProps, fromProvider, withProvider })}
+              {Component.canvas({ ...pageProps, providers, fromProvider, withProvider, randomProviderConnections })}
             </Scene>
           </ErrorBoundary>
         )}

src/pages/index.jsx

@@ -98,47 +98,20 @@ export async function getStaticProps() {
         }
       }),
     )
-
-    // Used by Mesh Globe
-    randomProviderConnections = providers
-      .sort(() => 0.5 - Math.random())
-      .map((p1, i) =>
-        Math.random() > 0.5
-          ? providers
-              .slice(i, Math.floor(Math.random() * 1000) % providers.length)
-              .map((p2) => (Math.random() > 0.5 ? [p1, p2] : [p1, p2]))
-          : [],
-      )
-      .flat()
-      .filter(([p1, p2]) => !areEqual(p1, p2) && p1.location && p2.location)
-      .map(([p1, p2]) => {
-        const { lat: startLat, lng: startLng } = p1.location
-        const { lat: endLat, lng: endLng } = p2.location
-        return {
-          startLat,
-          startLng,
-          endLat,
-          endLng,
-          color: '#c7e8f9',
-        }
-      })
   }
 
   return {
     props: {
       title: 'Accept invite',
       providers,
-      randomProviderConnections,
       error: isRejected(status)
         ? { status: 500, code: error.code, message: error.message, details: error.details, stack: error.stack }
         : null,
       status,
     },
     // Next.js will attempt to re-generate the page:
     // - When a request comes in
-    // - At most once every 1min
-    // TODO: raise revalidation interval when intensive debugging won't be
-    // needed anymore
-    revalidate: 60,
+    // - At most once every 30min
+    revalidate: 1800,
   }
 }