Merge pull request #21 from atls-academy/feat/landing-seventh-step

.gitignore

@@ -47,3 +47,5 @@ dist/
 .idea
 
 .next
+.env*.local
+.env

globals/data/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@globals/data",
+  "version": "0.0.1",
+  "main": "src/index.ts",
+  "devDependencies": {
+    "@apollo/client": "3.8.4",
+    "@types/react": "18.2.6",
+    "graphql": "16.8.1",
+    "react": "18.2.0"
+  },
+  "peerDependencies": {
+    "@apollo/client": "*",
+    "react": "*"
+  }
+}

globals/data/src/helpers/get-client.helper.ts

@@ -0,0 +1,8 @@
+import { ApolloClient }  from '@apollo/client'
+import { InMemoryCache } from '@apollo/client'
+
+export const getClient = () =>
+  new ApolloClient({
+    uri: process.env.NEXT_PUBLIC_ENV_LOCAL_GQL_URI ?? 'https://wp.api.atls.academy/graphql',
+    cache: new InMemoryCache(),
+  })

globals/data/src/helpers/index.ts

@@ -0,0 +1 @@
+export * from './get-client.helper'

globals/data/src/index.ts

@@ -0,0 +1 @@
+export * from './helpers'

landing/entrypoints/renderer/package.json

@@ -4,30 +4,35 @@
   "license": "BSD-3-Clause",
   "files": [
     "dist/",
-    "next.config.js"
+    "src/next.config.js"
   ],
   "scripts": {
-    "build": "yarn next build src --no-lint",
+    "build": "yarn next build src --no-lint ",
     "dev": "yarn next dev src",
     "extract": "formatjs extract",
     "start": "yarn next start src"
   },
   "dependencies": {
+    "@apollo/client": "3.8.4",
     "@emotion/css": "11.9.0",
     "@emotion/react": "11.9.3",
     "@emotion/styled": "11.9.3",
+    "@next/env": "12.3.4",
     "@ui/animate": "workspace:0.0.1",
+    "express": "4.18.1",
+    "graphql": "16.8.1",
     "next": "12.3.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-intl": "6.0.8",
     "react-scroll-parallax": "3.3.2"
   },
   "devDependencies": {
     "@formatjs/cli": "6.1.3",
     "@formatjs/ts-transformer": "3.13.3",
+    "@globals/data": "workspace:0.0.1",
     "@landing/index-page": "workspace:0.0.1",
     "@landing/library-page": "workspace:0.0.1",
+    "@types/express": "4.17.17",
     "@types/node": "18",
     "@types/react": "18.2.9",
     "@types/react-dom": "18.2.4",

landing/entrypoints/renderer/src/index.ts

@@ -0,0 +1,22 @@
+import express from 'express'
+import next    from 'next'
+import path    from 'path'
+
+const bootstrap = async () => {
+  const app = next({
+    dev: process.env.NODE_ENV !== 'production',
+    dir: process.env.NODE_ENV !== 'production' ? path.join(__dirname, '../src') : __dirname,
+  })
+
+  const handle = app.getRequestHandler()
+
+  await app.prepare()
+
+  const server = express()
+
+  server.get('*', (req, res) => handle(req, res))
+
+  server.listen(process.env.PORT || 3000)
+}
+
+bootstrap()

landing/entrypoints/renderer/src/pages/_app.tsx

@@ -1,19 +1,23 @@
-import * as messages        from '../../locales/ru.json'
+import { ApolloProvider }   from '@apollo/client'
 
 import React                from 'react'
-import { IntlProvider }     from 'react-intl'
 import { ParallaxProvider } from 'react-scroll-parallax'
 
 import { ThemeProvider }    from '@ui/theme'
+import { getClient }        from '@globals/data'
 
-const App = ({ Component, pageProps, ...props }) => (
-  <IntlProvider messages={messages} locale='ru' defaultLocale='ru'>
-    <ThemeProvider>
-      <ParallaxProvider>
-        <Component {...pageProps} {...props} />
-      </ParallaxProvider>
-    </ThemeProvider>
-  </IntlProvider>
-)
+const App = ({ Component, pageProps, ...props }) => {
+  const client = getClient()
+
+  return (
+    <ApolloProvider client={client}>
+      <ThemeProvider>
+        <ParallaxProvider>
+          <Component {...pageProps} {...props} />
+        </ParallaxProvider>
+      </ThemeProvider>
+    </ApolloProvider>
+  )
+}
 
 export default App

landing/fragments/landing-about/package.json

@@ -10,13 +10,14 @@
     "@ui/text": "workspace: 0.0.1"
   },
   "devDependencies": {
+    "@apollo/client": "3.8.4",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-intl": "6.0.8"
+    "react-dom": "18.2.0"
   },
   "peerDependencies": {
+    "@apollo/client": "*",
+    "graphql": "*",
     "react": "*",
-    "react-dom": "*",
-    "react-intl": "*"
+    "react-dom": "*"
   }
 }

landing/fragments/landing-about/src/about.component.tsx

@@ -1,73 +1,61 @@
 import React                from 'react'
 
-import { Delimiter }        from '@ui/delimiter'
 import { Box }              from '@ui/layout'
 import { Row }              from '@ui/layout'
 import { Layout }           from '@ui/layout'
 import { Column }           from '@ui/layout'
-import { Space }            from '@ui/text'
+import { Text }             from '@ui/text'
 
 import { DesktopTextBlock } from './text-block'
-import { MobileTextBlock }  from './text-block'
+import { useAbout }         from './data'
 
-export const About = () => (
-  <Column flexGrow='1'>
-    <Layout flexBasis={[64, 160]} />
+export const About = () => {
+  const about = useAbout()
 
-    <Row>
-      <Layout flexBasis={[20, 230]} />
+  const problemMobile: string = about?.data?.section.content.split('\n')[1]
+  const sloganMobile: string = about?.data?.section.content.split('\n')[2]
+  const problemDesktop: string[] = problemMobile?.split('.').slice(0, 2)
+  const sloganDesktop: string = sloganMobile?.slice(0, -1)
 
-      <Column flexBasis={[335, 1460]} flexGrow='1' flexShrink='0'>
-        <Box display={['none', 'inline']}>
-          <DesktopTextBlock id='about.intro-desktop' />
+  return (
+    <Column flexGrow='1'>
+      <Layout flexBasis={[64, 160]} />
 
-          <Space count='6' />
+      <Row>
+        <Layout flexBasis={[20, 230]} />
 
-          <Delimiter />
-
-          <Space count='6' />
-
-          <DesktopTextBlock id='about.problem-desktop' />
-
-          <Space count='6' />
-
-          <Delimiter />
-        </Box>
-
-        <Column display={['flex', 'none']}>
-          <MobileTextBlock id='about.intro-digital-mobile' />
-
-          <MobileTextBlock id='about.intro-not-decrease-mobile' />
-
-          <MobileTextBlock id='about.intro-for-your-decisions-mobile' />
-
-          <Layout flexBasis={28} />
-
-          <MobileTextBlock id='about.central-idea-atlantis-teach-mobile' />
-
-          <MobileTextBlock id='about.central-idea-make-engineers-mobile' />
-
-          <MobileTextBlock id='about.central-idea-architects-mobile' />
+        <Column flexBasis={[335, 1460]} flexGrow='1' flexShrink='0'>
+          <Box display={['none', 'inline']}>
+            {problemDesktop?.map((el) => (
+              <DesktopTextBlock key={el[0]} text={el.trim()} />
+            ))}
+          </Box>
 
-          <MobileTextBlock id='about.central-idea-not-programmers-mobile' />
-        </Column>
+          <Column display={['flex', 'none']}>
+            <Text color='text.white' fontSize='small' lineHeight='huge'>
+              {problemMobile}
+            </Text>
 
-        <Layout flexBasis={[0, 40]} />
+            <Layout flexBasis={28} />
 
-        <Box display={['none', 'inline']}>
-          <Box display='inline'>
-            <DesktopTextBlock id='about.central-idea-desktop' />
+            <Text color='text.white' fontSize='small' lineHeight='huge'>
+              {sloganMobile}
+            </Text>
+          </Column>
 
-            <Space count='6' />
+          <Layout flexBasis={[0, 40]} />
 
-            <Delimiter />
+          <Box display={['none', 'inline']}>
+            <Box display='inline'>
+              <DesktopTextBlock text={sloganDesktop} />
+            </Box>
           </Box>
-        </Box>
-      </Column>
+        </Column>
 
-      <Layout flexBasis={[20, 230]} />
-    </Row>
+        <Layout flexBasis={[20, 230]} />
+      </Row>
 
-    <Layout flexBasis={[128, 240]} />
-  </Column>
-)
+      <Layout flexBasis={[128, 240]} />
+    </Column>
+  )
+}

landing/fragments/landing-about/src/data/index.ts

@@ -0,0 +1 @@
+export * from './queries'

landing/fragments/landing-about/src/data/queries/about.query.ts

@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client'
+
+export const GET_ABOUT = gql`
+  query About {
+    section(id: "cG9zdDoyMjY=") {
+      content
+    }
+  }
+`

landing/fragments/landing-about/src/data/queries/index.ts

@@ -0,0 +1 @@
+export * from './useAbout'

landing/fragments/landing-about/src/data/queries/useAbout.ts

@@ -0,0 +1,5 @@
+import { useQuery }  from '@apollo/client'
+
+import { GET_ABOUT } from './about.query'
+
+export const useAbout = () => useQuery(GET_ABOUT)