Fw 6094 update apps page (#640)

* brought site object in to apps page. did some formatting

* added icon files and added content to cards

* added icons to getIcon, new colour to tailwind

* completed styling and added proper orange colour for button, just need global variable now

* removed console.logs

* added environment variable so that code links to whichever environment you are currently in

* clean up code

* formatted legacy apps and removed apps that have already gone to production

* refactoring as per review

* removed hard coded styling from svgs

README.md

@@ -78,6 +78,7 @@ $ npm run start
 - OIDC_AUTHORITY_URL - Authority URL for retrieving OIDC metadata
 - OAUTH2_REDIRECT_URL - Destination to redirect after signing in
 - END_SESSION_URL - OAuth2 end session (or logout) endpoint, if not included in the OIDC metadata
+- APP_ENV - denotes environment for app, possible values are dev, preprod, and prod
 
 8. Visit [localhost:3000](http://localhost:3000) in your web browser to view the FirstVoices app.
 

src/GlobalConfiguration.js

@@ -1,7 +1,8 @@
-/* global CONFIGURATION_SOURCE, ENV_API_URL, ENV_AWS_CLIENT_ID, ENV_OIDC_AUTHORITY_URL, ENV_OAUTH2_REDIRECT_URL, ENV_END_SESSION_URL, ENV_SENTRY_DSN, ENV_SENTRY_ENVIRONMENT, ENV_SENTRY_RELEASE, ENV_SENTRY_TRACES_SAMPLE_RATE, ENV_SENTRY_ERROR_SAMPLE_RATE */
-/* global SSI_API_URL, SSI_AWS_CLIENT_ID, SSI_OIDC_AUTHORITY_URL, SSI_OAUTH2_REDIRECT_URL, SSI_END_SESSION_URL, SSI_SENTRY_DSN, SSI_SENTRY_ENVIRONMENT, SSI_SENTRY_RELEASE, SSI_SENTRY_TRACES_SAMPLE_RATE, SSI_SENTRY_ERROR_SAMPLE_RATE */
+/* global CONFIGURATION_SOURCE, ENV_API_URL, ENV_APP_ENV, ENV_AWS_CLIENT_ID, ENV_OIDC_AUTHORITY_URL, ENV_OAUTH2_REDIRECT_URL, ENV_END_SESSION_URL, ENV_SENTRY_DSN, ENV_SENTRY_ENVIRONMENT, ENV_SENTRY_RELEASE, ENV_SENTRY_TRACES_SAMPLE_RATE, ENV_SENTRY_ERROR_SAMPLE_RATE */
+/* global SSI_API_URL, SSI_APP_ENV, SSI_AWS_CLIENT_ID, SSI_OIDC_AUTHORITY_URL, SSI_OAUTH2_REDIRECT_URL, SSI_END_SESSION_URL, SSI_SENTRY_DSN, SSI_SENTRY_ENVIRONMENT, SSI_SENTRY_RELEASE, SSI_SENTRY_TRACES_SAMPLE_RATE, SSI_SENTRY_ERROR_SAMPLE_RATE */
 
 let API_URL
+let ENV_APP
 let AWS_CLIENT_ID
 let OIDC_AUTHORITY_URL
 let OAUTH2_REDIRECT_URL
@@ -17,6 +18,7 @@ switch (CONFIGURATION_SOURCE) {
   case 'Caddy':
     // they have been injected into the HTML
     API_URL = SSI_API_URL
+    ENV_APP = SSI_APP_ENV
     AWS_CLIENT_ID = SSI_AWS_CLIENT_ID
     OIDC_AUTHORITY_URL = SSI_OIDC_AUTHORITY_URL
     OAUTH2_REDIRECT_URL = SSI_OAUTH2_REDIRECT_URL
@@ -30,6 +32,7 @@ switch (CONFIGURATION_SOURCE) {
   case 'Webpack':
   default:
     API_URL = ENV_API_URL
+    ENV_APP = ENV_APP_ENV
     AWS_CLIENT_ID = ENV_AWS_CLIENT_ID
     OIDC_AUTHORITY_URL = ENV_OIDC_AUTHORITY_URL
     OAUTH2_REDIRECT_URL = ENV_OAUTH2_REDIRECT_URL
@@ -44,6 +47,7 @@ switch (CONFIGURATION_SOURCE) {
 
 const GlobalConfiguration = {
   API_URL,
+  ENV_APP,
   AWS_CLIENT_ID,
   OIDC_AUTHORITY_URL,
   OAUTH2_REDIRECT_URL,

src/common/icons/Mobile.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+function Mobile({ styling }) {
+  return (
+    <svg
+      viewBox="0 0 13 20"
+      xmlns="http://www.w3.org/2000/svg"
+      className={styling}
+    >
+      <path d="M9.59844 0H2.94194C2.19253 0 1.47389 0.305439 0.943964 0.848947C0.413871 1.39263 0.115747 2.13 0.115234 2.89895V17.1011C0.115747 17.87 0.413871 18.6074 0.943964 19.1511C1.47406 19.6946 2.1927 20 2.94194 20H9.59844C10.3475 20 11.066 19.6946 11.5957 19.1509C12.1255 18.6072 12.4231 17.8698 12.4231 17.1011V2.89895C12.4231 2.13018 12.1255 1.39281 11.5957 0.849123C11.066 0.305614 10.3475 0 9.59844 0ZM1.14089 17.0526V3.78947H11.3974V17.0526H1.14089Z" />
+    </svg>
+  )
+}
+// PROPTYPES
+const { string } = PropTypes
+Mobile.propTypes = {
+  styling: string,
+}
+
+export default Mobile

src/common/icons/PC.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+function PC({ styling }) {
+  return (
+    <svg
+      viewBox="0 0 24 20"
+      xmlns="http://www.w3.org/2000/svg"
+      className={styling}
+    >
+      <path d="M3.37197 16.25H9.98833L9.69659 18.3334H7.64529C7.17304 18.3334 6.79058 18.7062 6.79058 19.1667C6.79058 19.6271 7.17304 20 7.64529 20H17.0471C17.5194 20 17.9018 19.6271 17.9018 19.1667C17.9018 18.7062 17.5194 18.3334 17.0471 18.3334H14.9958L14.7041 16.25H21.3204C22.7349 16.25 23.8845 15.1292 23.8845 13.7501V2.49997C23.8845 1.12088 22.7349 0 21.3204 0H3.37175C1.95726 0 0.807617 1.12088 0.807617 2.49997V13.7501C0.807617 15.1292 1.95726 16.25 3.37175 16.25H3.37197ZM13.2704 18.3334H11.4222L11.7139 16.25H12.98L13.2718 18.3334H13.2706H13.2704ZM21.3209 14.5836H3.37197C2.90086 14.5836 2.51726 14.2096 2.51726 13.7503V13.3336H22.1756V13.7503C22.1756 14.2096 21.792 14.5836 21.3209 14.5836ZM3.37197 1.66687H21.3209C21.792 1.66687 22.1756 2.04087 22.1756 2.50019V11.6668H2.51726V2.50019C2.51726 2.04087 2.90086 1.66687 3.37197 1.66687Z" />
+    </svg>
+  )
+}
+// PROPTYPES
+const { string } = PropTypes
+PC.propTypes = {
+  styling: string,
+}
+
+export default PC

src/common/icons/Tablet.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+function Tablet({ styling }) {
+  return (
+    <svg
+      viewBox="0 0 16 20"
+      xmlns="http://www.w3.org/2000/svg"
+      className={styling}
+    >
+      <path d="M13.9855 0H2.24241C1.23908 0 0.422852 0.821579 0.422852 1.82807V18.1719C0.422852 19.1786 1.23926 20 2.24241 20H13.9879C14.9912 20 15.8075 19.1784 15.8075 18.1719V1.82807C15.805 0.821403 14.9886 0 13.9855 0ZM8.62994 18.6158H7.60038C7.32585 18.6158 7.10361 18.393 7.10361 18.1198C7.10361 17.8467 7.32568 17.6189 7.60038 17.6189H8.62994C8.90446 17.6189 9.12671 17.8418 9.12671 18.1198C9.12671 18.3979 8.90464 18.6158 8.62994 18.6158ZM14.3878 16.7039C14.3878 16.9768 14.1657 17.1998 13.891 17.1998L2.33893 17.2007C2.06441 17.2007 1.84217 16.9779 1.84217 16.7047V2.10596C1.84217 1.82807 2.06423 1.60509 2.33893 1.60509H13.8924C14.167 1.60509 14.3892 1.82789 14.3892 2.10596V16.7039H14.3878Z" />
+    </svg>
+  )
+}
+// PROPTYPES
+const { string } = PropTypes
+Tablet.propTypes = {
+  styling: string,
+}
+
+export default Tablet

src/common/utils/getIcon.js

@@ -56,12 +56,14 @@ import MapLocation from 'common/icons/MapLocation'
 import Microphone from 'common/icons/Microphone'
 import MicrophoneOff from 'common/icons/MicrophoneOff'
 import Minus from 'common/icons/Minus'
+import Mobile from 'common/icons/Mobile'
 import More from 'common/icons/More'
 import Mute from 'common/icons/Mute'
 import Next from 'common/icons/Next'
 import OrderedList from 'common/icons/OrderedList'
 import Pause from 'common/icons/Pause'
 import PauseCircle from 'common/icons/PauseCircle'
+import PC from 'common/icons/PC'
 import Pencil from 'common/icons/Pencil'
 import PlaceHolder from 'common/icons/PlaceHolder'
 import Play from 'common/icons/Play'
@@ -84,6 +86,7 @@ import Star from 'common/icons/Star'
 import Stop from 'common/icons/Stop'
 import StopCircle from 'common/icons/StopCircle'
 import Resources from 'common/icons/Resources'
+import Tablet from 'common/icons/Tablet'
 import TimesCircle from 'common/icons/TimesCircle'
 import TimesCircleSolid from 'common/icons/TimesCircleSolid'
 import Translate from 'common/icons/Translate'
@@ -188,12 +191,14 @@ function getIcon(iconName, iconStyling, title) {
     Microphone,
     MicrophoneOff,
     Minus,
+    Mobile,
     More,
     Mute,
     Next,
     OrderedList,
     Pause,
     PauseCircle,
+    PC,
     Pencil,
     Phrase,
     PlaceHolder,
@@ -221,6 +226,7 @@ function getIcon(iconName, iconStyling, title) {
     Stop,
     StopCircle,
     Story,
+    Tablet,
     Team,
     TimesCircle,
     TimesCircleSolid,

src/components/App/AppContainer.js

@@ -61,7 +61,7 @@ function AppContainer() {
                 path="apps"
                 element={
                   <AppWrapper>
-                    <FVApps />
+                    <FVApps.Container />
                   </AppWrapper>
                 }
               />

src/components/FVApps/FVAppsContainer.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+// FPCC
+import FVAppsData from 'components/FVApps/FVAppsData'
+import FVAppsPresentation from './FVAppsPresentation'
+
+function FVAppsContainer() {
+  const { sitesWithApps } = FVAppsData()
+
+  return <FVAppsPresentation sitesWithApps={sitesWithApps} />
+}
+
+export default FVAppsContainer

src/components/FVApps/FVAppsData.js

@@ -0,0 +1,19 @@
+import { useSites } from 'common/dataHooks/useSites'
+
+function FVAppsData() {
+  const sites = useSites()
+
+  function features(site) {
+    return site.enabledFeatures.find(
+      (feature) => feature.key.toLowerCase() === 'has_app',
+    )
+  }
+
+  const sitesWithApps = sites?.data?.results?.filter(features)
+
+  return {
+    sitesWithApps,
+  }
+}
+
+export default FVAppsData