Browse Source

Merge branch 'feature/94-add-an-about-menu-item' into 'develop'

Feature/94 add an about menu item

See merge request ecentrics/concordia!10
develop
Apostolos Fanakis 4 years ago
parent
commit
432931f990
  1. 1
      .dockerignore
  2. 10
      docker/README.md
  3. 1
      packages/concordia-app/.env.development.example
  4. 10
      packages/concordia-app/package.json
  5. 1
      packages/concordia-app/public/locales/en/translation.json
  6. 5
      packages/concordia-app/src/Routes.jsx
  7. 35
      packages/concordia-app/src/assets/About.md
  8. 1
      packages/concordia-app/src/assets/images/app_logo_circle.svg
  9. 17
      packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx
  10. 43
      packages/concordia-app/src/views/About/index.jsx

1
.dockerignore

@ -13,6 +13,7 @@ docker/
packages/*/node_modules packages/*/node_modules
packages/*/dist packages/*/dist
packages/*/coverage packages/*/coverage
packages/*/*.env*
# TO-NEVER-DO: exclude the build folder of the contracts package, it's needed for building the application image. # TO-NEVER-DO: exclude the build folder of the contracts package, it's needed for building the application image.
packages/concordia-app/build packages/concordia-app/build

10
docker/README.md

@ -36,7 +36,7 @@ Furthermore, we provide an image that builds the contracts and handles their mig
### Ganache ### Ganache
The Dockerfile is provided in the path `./ganache`. The image makes use of the environment variables described The Dockerfile is provided in the path `./ganache`. The image makes use of the environment variables described
bellow. below.
| Environment variable | Default value | Usage | | Environment variable | Default value | Usage |
| --- | --- | --- | | --- | --- | --- |
@ -66,7 +66,7 @@ This is a provision system that compiles and deploys the contracts to any Ethere
A Dockerfile is provided in the path `./concordia-contracts` that will build the contracts used by Concordia and A Dockerfile is provided in the path `./concordia-contracts` that will build the contracts used by Concordia and
handle their deployment to any Ethereum network defined using env-vars upon container run. Dockerfile contains three handle their deployment to any Ethereum network defined using env-vars upon container run. Dockerfile contains three
useful stages, described in the table bellow. useful stages, described in the table below.
| Stage name | Entrypoint | Usage | | Stage name | Entrypoint | Usage |
| --- | --- | --- | | --- | --- | --- |
@ -74,7 +74,7 @@ useful stages, described in the table bellow.
| test | Runs contract tests | Compiles contracts and runs tests using blockchain defined by env vars | | test | Runs contract tests | Compiles contracts and runs tests using blockchain defined by env vars |
| runtime | Migrates contracts | Compiles contracts and migrates to the blockchain defined by env vars. Does **not** run tests | | runtime | Migrates contracts | Compiles contracts and migrates to the blockchain defined by env vars. Does **not** run tests |
The image makes use of the environment variables described bellow. The image makes use of the environment variables described below.
| Environment variable | Default value | Usage | | Environment variable | Default value | Usage |
| --- | --- | --- | | --- | --- | --- |
@ -92,7 +92,7 @@ the image.
### Application ### Application
The Dockerfile provided in the path `./concordia-application` builds the application for production and serves The Dockerfile provided in the path `./concordia-application` builds the application for production and serves
the resulting build using an nginx server. Dockerfile contains two useful stages, described in the table bellow. the resulting build using an nginx server. Dockerfile contains two useful stages, described in the table below.
| Stage name | Entrypoint | Usage | | Stage name | Entrypoint | Usage |
| --- | --- | --- | | --- | --- | --- |
@ -100,7 +100,7 @@ the resulting build using an nginx server. Dockerfile contains two useful stages
| runtime | Serves application | Builds for production and serves it through nginx | | runtime | Serves application | Builds for production and serves it through nginx |
The image makes use of the environment variables described bellow. The image makes use of the environment variables described below.
| Environment variable | Default value | Usage | | Environment variable | Default value | Usage |
| --- | --- | --- | | --- | --- | --- |

1
packages/concordia-app/.env.development.example

@ -7,6 +7,5 @@ HOST=localhost
PORT=7000 PORT=7000
# Variables needed in runtime (in browser) # Variables needed in runtime (in browser)
# Carefull, IPFS won't accept localhost as a valid hostname
REACT_APP_RENDEZVOUS_HOST=127.0.0.1 REACT_APP_RENDEZVOUS_HOST=127.0.0.1
REACT_APP_RENDEZVOUS_PORT=9090 REACT_APP_RENDEZVOUS_PORT=9090

10
packages/concordia-app/package.json

@ -3,9 +3,9 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"start": "react-scripts start", "start": "cross-env REACT_APP_VERSION=$npm_package_version REACT_APP_NAME=$npm_package_name react-scripts start",
"build": "react-scripts build", "build": "cross-env REACT_APP_VERSION=$npm_package_version REACT_APP_NAME=$npm_package_name react-scripts build",
"test": "react-scripts test", "test": "cross-env REACT_APP_VERSION=$npm_package_version REACT_APP_NAME=$npm_package_name react-scripts test",
"eject": "react-scripts eject", "eject": "react-scripts eject",
"postinstall": "patch-package", "postinstall": "patch-package",
"analyze": "react-scripts build && source-map-explorer 'build/static/js/*.js' --gzip", "analyze": "react-scripts build && source-map-explorer 'build/static/js/*.js' --gzip",
@ -38,18 +38,20 @@
"react": "~16.13.1", "react": "~16.13.1",
"react-dom": "~16.13.1", "react-dom": "~16.13.1",
"react-i18next": "^11.7.3", "react-i18next": "^11.7.3",
"react-markdown": "^5.0.3",
"react-particles-js": "^3.4.0", "react-particles-js": "^3.4.0",
"react-redux": "~7.2.1", "react-redux": "~7.2.1",
"react-router": "^5.2.0", "react-router": "^5.2.0",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-scripts": "~3.4.3", "react-scripts": "~3.4.3",
"redux-saga": "~1.1.3",
"react-timeago": "~5.2.0", "react-timeago": "~5.2.0",
"redux-saga": "~1.1.3",
"semantic-ui-css": "~2.4.1", "semantic-ui-css": "~2.4.1",
"semantic-ui-react": "~1.2.1", "semantic-ui-react": "~1.2.1",
"web3": "1.3.0" "web3": "1.3.0"
}, },
"devDependencies": { "devDependencies": {
"cross-env": "^7.0.3",
"eslint": "^6.8.0", "eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0", "eslint-config-airbnb": "^18.1.0",
"eslint-plugin-import": "^2.20.2", "eslint-plugin-import": "^2.20.2",

1
packages/concordia-app/public/locales/en/translation.json

@ -62,6 +62,7 @@
"register.form.sign.up.step.error.message.header": "Form contains errors", "register.form.sign.up.step.error.message.header": "Form contains errors",
"register.form.sign.up.step.title": "Sign Up", "register.form.sign.up.step.title": "Sign Up",
"register.p.account.address": "Account address:", "register.p.account.address": "Account address:",
"topbar.button.about": "About",
"topbar.button.clear.databases": "Clear databases", "topbar.button.clear.databases": "Clear databases",
"topbar.button.create.topic": "Create topic", "topbar.button.create.topic": "Create topic",
"topbar.button.profile": "Profile", "topbar.button.profile": "Profile",

5
packages/concordia-app/src/Routes.jsx

@ -39,6 +39,11 @@ const routesConfig = [
path: '/home', path: '/home',
component: lazy(() => import('./views/Home')), component: lazy(() => import('./views/Home')),
}, },
{
exact: true,
path: '/about',
component: lazy(() => import('./views/About')),
},
{ {
exact: true, exact: true,
path: '/topics/:id(\\bnew\\b|\\d+)', path: '/topics/:id(\\bnew\\b|\\d+)',

35
packages/concordia-app/src/assets/About.md

@ -0,0 +1,35 @@
# About Concordia
## What
Concordia is a forum platform (remember forums? 🤩) that focuses on user privacy and direct democratic voting. It is a
FOSS distributed via its Gitlab [repository][concordia-repository] and Docker [repository][concordia-docker-hub] under
the [MIT][concordia-license] license.
## Why
The value of privacy, freedom of speech and democracy are diminishing in modern software. Even more so in social media
platforms. Users are called to select between being the product of companies that sell their personal information and
being shut out of the modern, digital society.
Concordia, much like other projects of this kind, provides an alternative to this predicament.
## How
Concordia uses decentralized technologies, namely the Ethereum blockchain and its smart contracts, as well as the
distributed database OrbitDB that's based on the decentralized network IPFS. These technologies make Concordia
impervious to censorship and guaranty the immutability of user information and anonymity while enabling user
authentication that makes trusted, direct voting possible.
You can read more about the technological stack in Concordia's [whitepaper][concordia-whitepaper].
---
Developed by [apostolof][devs-apostolof-profile], [ezerous][devs-ezerous-profile]
[concordia-repository]: https://gitlab.com/ecentrics/apella
[concordia-docker-hub]: https://hub.docker.com/repository/docker/ecentrics/apella-app
[concordia-license]: https://gitlab.com/ecentrics/apella/-/blob/master/LICENSE.md
[devs-apostolof-profile]: https://gitlab.com/Apostolof
[devs-ezerous-profile]: https://gitlab.com/Ezerous
[concordia-whitepaper]: https://whitepaper.concordia.ecentrics.net

1
packages/concordia-app/src/assets/images/app_logo_circle.svg

@ -0,0 +1 @@
<svg id="b37e941a-4c43-4ef7-9a51-e1598f898259" data-name="Main" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 537.4 537.4"><defs><style>.ac1237be-2158-4fc0-ae9f-071b2ff57398{fill:#0b2540;}.b45f1c22-1b20-401d-9f53-3289cddfc3c4,.be317747-31f7-43a4-9fba-03772684f044,.be531e54-2bea-4919-990d-82f88a84fa29{fill:#ea6954;}.a4966b61-2d1b-4dfd-b016-51913d3feac9,.b45f1c22-1b20-401d-9f53-3289cddfc3c4,.be317747-31f7-43a4-9fba-03772684f044,.be531e54-2bea-4919-990d-82f88a84fa29,.e5dfb83f-a67f-4542-9762-d2465cc0a2c6{stroke:#ea6954;stroke-miterlimit:10;}.b45f1c22-1b20-401d-9f53-3289cddfc3c4{stroke-width:4px;}.a4966b61-2d1b-4dfd-b016-51913d3feac9,.e5dfb83f-a67f-4542-9762-d2465cc0a2c6{fill:none;}.a4966b61-2d1b-4dfd-b016-51913d3feac9{stroke-width:8px;}.e5dfb83f-a67f-4542-9762-d2465cc0a2c6{stroke-width:5px;}.be317747-31f7-43a4-9fba-03772684f044{stroke-width:6px;}.be531e54-2bea-4919-990d-82f88a84fa29{stroke-width:10px;}</style></defs><title>concordia_logo_clean</title><g id="aa7412e7-d10f-4a17-bb5d-8cce7f8be73c" data-name="Background"><circle class="ac1237be-2158-4fc0-ae9f-071b2ff57398" cx="268.7" cy="268.7" r="268.7"/></g><g id="b4a70f8e-cb9b-4d04-a6af-3bbf6423659c" data-name="Thin lines"><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="110.22" y1="241.47" x2="317.86" y2="121.92"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="371.69" y1="148.92" x2="111.87" y2="298.91"/><path class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" d="M166,329.18"/><path class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" d="M111.87,359.31"/><path class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" d="M213.08,358.08"/><path class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" d="M162,387.77"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="267.76" y1="389.44" x2="322.41" y2="358.21"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="267.76" y1="389.44" x2="267.76" y2="389.44"/><path class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" d="M269.1,89.17"/><path class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" d="M269.1,149.77"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="317.86" y1="121.92" x2="317.53" y2="180.07"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="371.75" y1="154.56" x2="371.75" y2="210.37"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="165.3" y1="329.98" x2="164.44" y2="333.16"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="213.08" y1="358.08" x2="213.08" y2="358.08"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="164.44" y1="267.78" x2="164.44" y2="328.38"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="267.76" y1="389.44" x2="111.81" y2="298.88"/><line class="b45f1c22-1b20-401d-9f53-3289cddfc3c4" x1="268.07" y1="90.08" x2="267.76" y2="389.44"/></g><g id="ad2424b4-f499-4d57-ba69-57371a617f7c" data-name="Thick lines"><polyline class="a4966b61-2d1b-4dfd-b016-51913d3feac9" points="111.87 299.08 112.61 181.66 267.76 90.08"/><polyline class="a4966b61-2d1b-4dfd-b016-51913d3feac9" points="426.2 179.98 372.06 211.97 267.76 151.37 165.24 210.37 165.24 267.97"/><polyline class="a4966b61-2d1b-4dfd-b016-51913d3feac9" points="322.41 358.21 425.97 297.59 425.18 358.68 267.76 451.17 111.87 359.08"/></g><g id="b157ebcc-6b21-403c-8fdd-bc0b20aa202f" data-name="Medium lines"><polyline class="e5dfb83f-a67f-4542-9762-d2465cc0a2c6" points="267.76 90.08 267.76 150.67 317.86 121.92 317.86 180.07 371.96 149.77 371.96 212.17"/><polyline class="e5dfb83f-a67f-4542-9762-d2465cc0a2c6" points="111.87 359.08 165.3 329.98 165.3 386.17 213.08 358.08 213.08 418.17 267.74 389.44 267.74 451.17"/></g><g id="bab675c2-16d2-4e69-a23f-8e6406c1997e" data-name="Small nodes"><circle class="be317747-31f7-43a4-9fba-03772684f044" cx="371.96" cy="149.77" r="3.19"/><circle class="be317747-31f7-43a4-9fba-03772684f044" cx="213.08" cy="358.08" r="3.19"/></g><g id="b3217dd3-e6fd-4786-bb13-4cd0eac59017" data-name="Big nodes"><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="165.24" cy="267.97" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="267.76" cy="90.08" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="267.76" cy="389.44" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="111.87" cy="298.91" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="165.3" cy="329.98" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="426.3" cy="179.98" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="317.86" cy="121.92" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="322.41" cy="358.21" r="3.19"/><circle class="be531e54-2bea-4919-990d-82f88a84fa29" cx="111.87" cy="359.08" r="3.19"/></g></svg>

After

Width:  |  Height:  |  Size: 4.5 KiB

17
packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx

@ -35,7 +35,7 @@ const MainLayoutMenu = () => {
link link
name="home" name="home"
key="home" key="home"
onClick={() => { history.push('/'); }} onClick={() => history.push('/')}
> >
<img src={appLogo} alt="app_logo" /> <img src={appLogo} alt="app_logo" />
</Menu.Item> </Menu.Item>
@ -45,7 +45,7 @@ const MainLayoutMenu = () => {
link link
name="create-topic" name="create-topic"
key="create-topic" key="create-topic"
onClick={() => { history.push('/topics/new'); }} onClick={() => history.push('/topics/new')}
position="right" position="right"
> >
{t('topbar.button.create.topic')} {t('topbar.button.create.topic')}
@ -57,7 +57,7 @@ const MainLayoutMenu = () => {
link link
name="profile" name="profile"
key="profile" key="profile"
onClick={() => { history.push('/profile'); }} onClick={() => history.push('/profile')}
> >
{t('topbar.button.profile')} {t('topbar.button.profile')}
</Menu.Item> </Menu.Item>
@ -67,16 +67,23 @@ const MainLayoutMenu = () => {
link link
name="register" name="register"
key="register" key="register"
onClick={() => { history.push('/auth/register'); }} onClick={() => history.push('/auth/register')}
> >
{t('topbar.button.register')} {t('topbar.button.register')}
</Menu.Item> </Menu.Item>
)} )}
<Menu.Item
link
name="about"
key="about"
onClick={() => history.push('/about')}
>
{t('topbar.button.about')}
</Menu.Item>
</Menu.Menu> </Menu.Menu>
<Dropdown key="overflow" item direction="left"> <Dropdown key="overflow" item direction="left">
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item <Dropdown.Item
link
name="clear-databases" name="clear-databases"
key="clear-databases" key="clear-databases"
onClick={handleClearDatabasesClick} onClick={handleClearDatabasesClick}

43
packages/concordia-app/src/views/About/index.jsx

@ -0,0 +1,43 @@
import React, {
memo, useEffect, useState,
} from 'react';
import ReactMarkdown from 'react-markdown';
import { Container, Image } from 'semantic-ui-react';
import AboutMd from '../../assets/About.md';
import appLogo from '../../assets/images/app_logo_circle.svg';
const targetBlank = () => ({ href, children }) => (
<a href={href} target="_blank" rel="noopener noreferrer">
{children}
</a>
);
const About = () => {
const [aboutMd, setAboutMd] = useState('');
useEffect(() => {
fetch(AboutMd)
.then((response) => response.text())
.then((text) => {
setAboutMd(text);
});
}, []);
return (
<Container id="about-container">
<div style={{ textAlign: 'center' }}>
<Image src={appLogo} size="small" centered />
{`v${process.env.REACT_APP_VERSION}`}
</div>
<ReactMarkdown
source={aboutMd}
renderers={{
link: targetBlank(),
linkReference: targetBlank(),
}}
/>
</Container>
);
};
export default memo(About);
Loading…
Cancel
Save