Merge branch 'deployment-changes' of github.com:daritelska-platforma/…

…frontend into deployment-changes

.github/workflows/build.yml

@@ -18,8 +18,5 @@ jobs:
       - name: Install dependencies
         run: yarn
 
-      - name: Setup environment
-        run: cp .env.example .env
-
       - name: Build frontend
         run: yarn build

.github/workflows/docker-deploy.yml

@@ -75,6 +75,7 @@ jobs:
         uses: TapTap21/[email protected]
         env:
           JWT_SECRET: ${{ secrets.APP_JWT_SECRET }}
+          DISCORD_CLIENT_ID: ${{ secrets.APP_DISCORD_CLIENT_ID }}
           DISCORD_CLIENT_SECRET: ${{ secrets.APP_DISCORD_CLIENT_SECRET }}
           DEPLOY_TAG: ${{ steps.get-version.outputs.VERSION }}
           HOST_IPV4_ADDRESS: "172.14.0.4"

CONTRIBUTING.md

@@ -27,7 +27,7 @@ git clone [email protected]:daritelska-platforma/frontend.git
 cd frontend
 
 # Symlink dev environment
-ln -s .env.example .env
+ln -s .env.example .env.local
 
 # Install dependencies
 yarn
@@ -137,7 +137,7 @@ import styles from './advanced.module.scss'
 
 ### File structure
 
-Inherits AirBnb naming convention https://github.com/airbnb/javascript/tree/master/react#naming
+Inherits AirBnb naming convention <https://github.com/airbnb/javascript/tree/master/react#naming>
 
 Use PascalCase for React components and camelCase for their instances
 
@@ -185,7 +185,7 @@ export default function AdvancedForm({ title = 'Nice', children, age }: Advanced
 
 ### Components
 
-#### Preferred export style :sun_with_face:
+#### Preferred export style :sun_with_face
 
 - Nice IDE support and readability
 
@@ -237,7 +237,7 @@ export default function RegisterPage() {
 
   **Discouraged**
 
-  https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md
+  <https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md>
 
   ```tsx
   export default () => <div>page</div>
@@ -261,7 +261,7 @@ There are three common ways to style a component:
 
 #### Styles using the [`<Box />` component](https://material-ui.com/components/box/)
 
-Single component that inherits all sizing props from MUI https://material-ui.com/system/basics/#all-inclusive
+Single component that inherits all sizing props from MUI <https://material-ui.com/system/basics/#all-inclusive>
 
 :sun_with_face: Nice for quick layouts that should follow the theme
 

README.md

@@ -35,7 +35,7 @@ git clone [email protected]:daritelska-platforma/frontend.git
 cd frontend
 
 # Symlink dev environment
-ln -s .env.example .env
+ln -s .env.example .env.local
 ```
 
 ## Development

bin/act.sh

@@ -1,2 +1,10 @@
 #!/bin/bash
-act -s GHCR_TOKEN="${A_GHCR_TOKEN}" -s GHCR_USERNAME="${A_GHCR_USERNAME}" -s REMOTE_DOCKER_HOST="${A_REMOTE_DOCKER_HOST}" -s SSH_PUBLIC_KEY="${A_SSH_PUBLIC_KEY}" -s SSH_PRIVATE_KEY="${A_SSH_PRIVATE_KEY}" -s APP_JWT_SECRET="${APP_JWT_SECRET}" -s APP_DISCORD_CLIENT_SECRET="${APP_DISCORD_CLIENT_SECRET}" $@
+act \
+  -s GHCR_TOKEN="${A_GHCR_TOKEN}" \
+  -s GHCR_USERNAME="${A_GHCR_USERNAME}" \
+  -s REMOTE_DOCKER_HOST="${A_REMOTE_DOCKER_HOST}" \
+  -s SSH_PUBLIC_KEY="${A_SSH_PUBLIC_KEY}" \
+  -s SSH_PRIVATE_KEY="${A_SSH_PRIVATE_KEY}" \
+  -s APP_JWT_SECRET="${APP_JWT_SECRET}" \
+  -s APP_DISCORD_CLIENT_ID="${APP_DISCORD_CLIENT_ID}" \
+  -s APP_DISCORD_CLIENT_SECRET="${APP_DISCORD_CLIENT_SECRET}" $@

bin/logs.sh

@@ -1,2 +1,2 @@
 #!/bin/bash
-docker-compose --env-file=.env.local logs --tail 200 --follow
+docker-compose --env-file=.env.local logs --tail 200 --follow $@

docker-compose.prod.yml

@@ -12,7 +12,10 @@ services:
       timeout: 3s
       retries: 3
     environment:
+      API_URL: ${API_URL}
+      NEXTAUTH_URL: ${NEXTAUTH_URL}
       JWT_SECRET: ${JWT_SECRET}
+      DISCORD_CLIENT_ID: ${DISCORD_CLIENT_ID}
       DISCORD_CLIENT_SECRET: ${DISCORD_CLIENT_SECRET}
 networks:
   pub1:

docker-compose.yml

@@ -1,6 +1,6 @@
 version: '3.8'
 services:
-  frontend:
+  app:
     container_name: ${COMPOSE_PROJECT_NAME?}-frontend
 
     build:
@@ -30,6 +30,9 @@ services:
     environment:
       API_URL: ${API_URL}
       NEXTAUTH_URL: ${NEXTAUTH_URL}
+      JWT_SECRET: ${JWT_SECRET}
+      DISCORD_CLIENT_ID: ${DISCORD_CLIENT_ID}
+      DISCORD_CLIENT_SECRET: ${DISCORD_CLIENT_SECRET}
 
 networks:
   net-frontend:

next.config.js

@@ -6,6 +6,11 @@ module.exports = {
   sassOptions: {
     includePaths: [path.join(__dirname, 'src/styles')],
   },
+  serverRuntimeConfig: {
+    JWT_SECRET: process.env.JWT_SECRET,
+    DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,
+    DISCORD_CLIENT_SECRET: process.env.DISCORD_CLIENT_SECRET,
+  },
   publicRuntimeConfig: {
     API_URL: process.env.API_URL,
     APP_URL: process.env.APP_URL,

package.json

@@ -16,6 +16,8 @@
     "@material-ui/core": "^4.11.2",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
+    "@nivo/core": "^0.67.0",
+    "@nivo/pie": "^0.67.0",
     "formik": "^2.2.6",
     "i18next": "^19.8.4",
     "mobx": "^6.0.4",

public/locales/bg/index.json

@@ -1,32 +1,50 @@
 {
-    "title": "Подкрепи",
-    "jumbotron": {
-      "heading": "Онлайн дарителска платформа",
-      "maximum-transparency": "с максимална степен на прозрачност",
-      "zero-commission": "с 0% комисионна",
-      "community-for-community": "създадена от общността за общността",
-      "open-source": "с отворен за ползване код",
-      "support-us-button": "Подкрепи ни"
-    },
-    "activity-section": {
-      "heading": "Какво правим?",
-      "content": "Подкрепи.БГ е сдружение от професионалисти, обединени от идеята да създадем безплатна и напълно прозрачна онлайн платформа за дарения, която да може да се ползва свободно от граждани и организации."
-    },
-    "team-section": {
-      "heading": "Кои сме ние?",
-      "content": "Ние сме група доброволци, обединени от идеята да подобрим благотворителността в България и да подпомогнем добрите каузи и борбата за по-добър живот."
-    },
-    "support-us-section": {
-      "heading": "Подкрепи ни",
-      "financial-support": "финансово",
-      "labour-support": "с труд",
-      "media-support": "медийно",
-      "become-a-partner": "стани партньор"
-    },
-    "problems-to-solve-section": {
-      "heading": "Какъв е проблемът, който се опитваме да решим:",
-      "high-commissions": "Високи комисионни",
-      "low-transparency": "Ниска (липса на) прозрачност",
-      "timeliness": "Навременност на даренията"
+  "title": "Подкрепи",
+  "jumbotron": {
+    "heading": "Онлайн дарителска платформа",
+    "maximum-transparency": "с максимална степен на прозрачност",
+    "zero-commission": "с 0% комисионна",
+    "community-for-community": "създадена от общността за общността",
+    "open-source": "с отворен за ползване код",
+    "support-us-button": "Подкрепи ни"
+  },
+  "activity-section": {
+    "heading": "Какво правим?",
+    "content": "Подкрепи.БГ е сдружение от професионалисти, обединени от идеята да създадем безплатна и напълно прозрачна онлайн платформа за дарения, която да може да се ползва свободно от граждани и организации."
+  },
+  "team-section": {
+    "heading": "Кои сме ние?",
+    "content": "Ние сме група доброволци, обединени от идеята да подобрим благотворителността в България и да подпомогнем добрите каузи и борбата за по-добър живот."
+  },
+  "team-chart-section": {
+    "heading": "Как започна всичко?",
+    "content": "700 доброволеца от IT средите, юристи, счетоводители, маркетолози, медици, НПО представители",
+    "data": {
+      "back-end": "BACK-END (146)",
+      "frontend": "FRONT-END (89)",
+      "full-stack": "FULL-STACK (82)",
+      "dev-ops": "DEV-OPS (78)",
+      "qa": "QA (61)",
+      "design": "ДИЗАЙН (35)",
+      "law": "ПРАВО (16)",
+      "management": "УПРАВЛЕНИЕ (88)",
+      "accounting": "СЧЕТОВОДСТВО И ФИНАНСИ (16)",
+      "marketing": "МАРКЕТИНГ И PR (72)",
+      "ngo": "НПО/ДОБРОВОЛЧЕСТВО (37)",
+      "others": "ДРУГИ (16)"
     }
+  },
+  "support-us-section": {
+    "heading": "Подкрепи ни",
+    "financial-support": "финансово",
+    "labour-support": "с труд",
+    "media-support": "медийно",
+    "become-a-partner": "стани партньор"
+  },
+  "problems-to-solve-section": {
+    "heading": "Какъв е проблемът, който се опитваме да решим:",
+    "high-commissions": "Високи комисионни",
+    "low-transparency": "Ниска (липса на) прозрачност",
+    "timeliness": "Навременност на даренията"
+  }
 }

public/locales/en/index.json

@@ -16,6 +16,24 @@
     "heading": "Who are we?",
     "content": "We are a group of volunteers united by the idea of improveing charity in Bulgaria and supporting good causes and the fight for a better life."
   },
+  "team-chart-section": {
+    "heading": "How it all started?",
+    "content": "700 volunteers from the IT community, lawyers, accountants, marketers, medics, NGO representatives.",
+    "data": {
+      "back-end": "BACK-END (146)",
+      "frontend": "FRONT-END (89)",
+      "full-stack": "FULL-STACK (82)",
+      "dev-ops": "DEV-OPS (78)",
+      "qa": "QA (61)",
+      "design": "DESIGN (35)",
+      "law": "LAW (16)",
+      "management": "MANAGEMENT (88)",
+      "accounting": "ACCOUNTING AND FINANCE (16)",
+      "marketing": "MARKETING AND PR (72)",
+      "ngo": "NGO/VOLUNTEERING (37)",
+      "others": "OTHERS (16)"
+    }
+  },
   "support-us-section": {
     "heading": "Support us",
     "financial-support": "financially",

src/components/chart/TeamPie.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { ResponsivePie } from '@nivo/pie'
+import { teamPieData, TeamPieData } from 'components/chart/pieData'
+
+const styles = {
+  height: '380px',
+  width: '99%',
+  paddingTop: '20px',
+}
+
+const TeamPie = () => {
+  const { t } = useTranslation()
+  teamPieData.forEach((item: TeamPieData): void => {
+    item.label = t(`index:team-chart-section.data.${item.id}`)
+  })
+
+  return (
+    <div style={styles}>
+      <ResponsivePie
+        data={teamPieData}
+        margin={{ top: 30, right: 100, bottom: 30, left: 100 }}
+        innerRadius={0.4}
+        padAngle={0.7}
+        radialLabelsLinkDiagonalLength={20}
+        radialLabelsLinkHorizontalLength={5}
+        sliceLabelsRadiusOffset={0.65}
+        colors={{ scheme: 'set2' }}
+        radialLabel="label"
+        isInteractive={false}
+        defs={[
+          {
+            id: 'dots',
+            type: 'patternDots',
+            background: 'inherit',
+            color: 'rgba(255, 255, 255, 0.3)',
+            size: 4,
+            padding: 1,
+            stagger: true,
+          },
+          {
+            id: 'lines',
+            type: 'patternLines',
+            background: 'inherit',
+            color: 'rgba(255, 255, 255, 0.3)',
+            rotation: -45,
+            lineWidth: 6,
+            spacing: 10,
+          },
+        ]}
+        fill={[
+          { match: { id: 'back-end' }, id: 'dots' },
+          { match: { id: 'frontend' }, id: 'lines' },
+          { match: { id: 'full-stack' }, id: 'dots' },
+          { match: { id: 'dev-ops' }, id: 'lines' },
+          { match: { id: 'qa' }, id: 'dots' },
+          { match: { id: 'ngo' }, id: 'lines' },
+          { match: { id: 'design' }, id: 'dots' },
+          { match: { id: 'law' }, id: 'lines' },
+          { match: { id: 'management' }, id: 'dots' },
+          { match: { id: 'accounting' }, id: 'lines' },
+          { match: { id: 'marketing' }, id: 'dots' },
+          { match: { id: 'others' }, id: 'lines' },
+        ]}
+      />
+    </div>
+  )
+}
+
+export default TeamPie

src/components/chart/pieData.ts

@@ -0,0 +1,18 @@
+import { DefaultRawDatum } from '@nivo/pie'
+
+export type TeamPieData = DefaultRawDatum & { label?: string }
+
+export const teamPieData: TeamPieData[] = [
+  { id: 'back-end', value: 19.8 },
+  { id: 'frontend', value: 12.1 },
+  { id: 'full-stack', value: 11.1 },
+  { id: 'dev-ops', value: 10.6 },
+  { id: 'qa', value: 8.3 },
+  { id: 'ngo', value: 5.0 },
+  { id: 'design', value: 4.7 },
+  { id: 'law', value: 2.2 },
+  { id: 'management', value: 12.0 },
+  { id: 'accounting', value: 2.2 },
+  { id: 'marketing', value: 9.8 },
+  { id: 'others', value: 2.2 },
+]

src/components/index/IndexPage.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import Jumbotron from './sections/Jumbotron'
 import ActivitySection from './sections/ActivitySection'
 import TeamSection from './sections/TeamSection'
+import TeamChartSection from './sections/TeamChartSection'
 import SupportUsSection from './sections/SupportUsSection'
 import ProblemsToSolveSection from './sections/ProblemsToSolveSection'
 
@@ -15,6 +16,7 @@ export default function Index() {
       <Jumbotron />
       <ActivitySection />
       <TeamSection />
+      <TeamChartSection />
       <SupportUsSection />
       <ProblemsToSolveSection />
     </Layout>

src/components/index/sections/TeamChartSection.tsx

@@ -0,0 +1,25 @@
+import { Grid, Typography, Box } from '@material-ui/core'
+import { useTranslation } from 'react-i18next'
+import TeamPie from 'components/chart/TeamPie'
+
+const TeamChartSection = () => {
+  const { t } = useTranslation()
+
+  return (
+    <Box component="section" mb={10} textAlign="center">
+      <Grid container direction="column" alignItems="center" justify="center">
+        <Grid item>
+          <Typography variant="h5" paragraph>
+            {t('index:team-chart-section.heading')}
+          </Typography>
+          <Typography variant="subtitle1" paragraph>
+            {t('index:team-chart-section.content')}
+          </Typography>
+          <TeamPie />
+        </Grid>
+      </Grid>
+    </Box>
+  )
+}
+
+export default TeamChartSection

src/pages/api/auth/[...nextauth].ts

@@ -1,17 +1,22 @@
 import NextAuth from 'next-auth'
+import getConfig from 'next/config'
 import Providers from 'next-auth/providers'
 
+const {
+  serverRuntimeConfig: { DISCORD_CLIENT_ID, DISCORD_CLIENT_SECRET, JWT_SECRET },
+} = getConfig()
+
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 export default NextAuth({
   // Configure one or more authentication providers
   providers: [
     Providers.Discord({
-      clientId: `${process.env.DISCORD_CLIENT_ID}`,
-      clientSecret: `${process.env.DISCORD_CLIENT_SECRET}`,
+      clientId: DISCORD_CLIENT_ID,
+      clientSecret: DISCORD_CLIENT_SECRET,
     }),
   ],
 
-  secret: `${process.env.JWT_SECRET}`,
+  secret: JWT_SECRET,
   session: { jwt: true },
 })