theoludwig/FunctionProject
theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

Merge pull request #10 from Divlo/release/v2.2

Browse Source 
Release/v2.2
This commit is contained in:
Divlo 2020-10-30 17:28:58 +01:00 committed by GitHub
commit cbe82f74a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
38 changed files with 5060 additions and 4518 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
README.md
View File

@ -5,10 +5,9 @@
</p> </p>
<p align="center"> <p align="center">
<a href="https://gitmoji.carloscuesta.me/"><img src="https://camo.githubusercontent.com/2a4924a23bd9ef18afe793f4999b1b9ec474e48f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6769746d6f6a692d253230f09f989c253230f09f988d2d4646444436372e7376673f7374796c653d666c61742d737175617265" alt="Gitmoji"/></a>
<a href="https://standardjs.com"><img alt="JavaScript Style Guide" src="https://img.shields.io/badge/code_style-standard-brightgreen.svg"/></a> <a href="https://standardjs.com"><img alt="JavaScript Style Guide" src="https://img.shields.io/badge/code_style-standard-brightgreen.svg"/></a>
<a href="https://conventionalcommits.org"><img src="https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg" alt="Conventional Commits" /></a>
<a href="./LICENSE"><img src="https://img.shields.io/badge/licence-MIT-blue.svg" alt="Licence MIT"/></a> <a href="./LICENSE"><img src="https://img.shields.io/badge/licence-MIT-blue.svg" alt="Licence MIT"/></a>
<img src="https://img.shields.io/github/stars/Divlo/FunctionProject?style=social" alt="Stars">
<br/> <br/> <br/> <br/>
<a href="https://function.divlo.fr/"><img src="https://raw.githubusercontent.com/Divlo/FunctionProject/master/.github/FunctionProject.png" alt="FunctionProject" /></a> <a href="https://function.divlo.fr/"><img src="https://raw.githubusercontent.com/Divlo/FunctionProject/master/.github/FunctionProject.png" alt="FunctionProject" /></a>
</p> </p>
@ -23,7 +22,7 @@ Si vous aimez le projet, vous pouvez aider à **le faire connaître** en utilisa
Les dernières versions publiées : [https://github.com/Divlo/FunctionProject/releases](https://github.com/Divlo/FunctionProject/releases) Les dernières versions publiées : [https://github.com/Divlo/FunctionProject/releases](https://github.com/Divlo/FunctionProject/releases)
Le projet est disponible sur [function.divlo.fr](https://function.divlo.fr/) (actuellement en version 2.1). Le projet est disponible sur [function.divlo.fr](https://function.divlo.fr/) (actuellement en version 2.2).
## 🚀 Open Source ## 🚀 Open Source
@ -39,8 +38,9 @@ Si vous voulez avoir les données des catégories et des fonctions, vous pouvez
### Prérequis : ### Prérequis :
- NodeJS (et npm) → version récente - [Node.js](https://nodejs.org/) >= 14
- Base de donnée MySQL → J'utilise Wamp ce qui me permet d'avoir phpmyadmin. - [npm](https://www.npmjs.com/) >= 6
- [MySQL](https://www.mysql.com/) >= 5.7
### Commandes (à suivre dans l'ordre) : ### Commandes (à suivre dans l'ordre) :
@ -62,6 +62,24 @@ Vous devrez ensuite configurer l'API en créant un fichier `.env` à la racine d
### Lancer l'environnement de développement : ### Lancer l'environnement de développement :
#### Avec [docker](https://www.docker.com/) :
```sh
# Setup and run all the services for you
docker-compose up --build
```
**Services started :**
- api : `http://localhost:8080`
- s.divlo.fr : `http://localhost:7000`
- website : `http://localhost:3000`
- [phpmyadmin](https://www.phpmyadmin.net/) : `http://localhost:8000`
- [MailDev](https://maildev.github.io/maildev/) : `http://localhost:1080`
- [MySQL database](https://www.mysql.com/) (with PORT 3006)
#### Sans docker :
Dans deux terminals séparés : Dans deux terminals séparés :
- Lancer le front-end en allant dans `/website` - Lancer le front-end en allant dans `/website`

2
api/.dockerignore Normal file
View File

@ -0,0 +1,2 @@
node_modules
build

27
api/.env.example
View File

@ -1,12 +1,15 @@
HOST = "http://localhost:8080" HOST="http://localhost:8080"
FRONT_END_HOST = "http://localhost:3000" FRONT_END_HOST="http://localhost:3000"
OpenWeatherMap_API_KEY = "" OpenWeatherMap_API_KEY=""
Scraper_API_KEY = "" Scraper_API_KEY=""
DB_HOST = "" DATABASE_HOST="functionproject-database"
DB_NAME = "" DATABASE_NAME="functionproject"
DB_USER = "" DATABASE_USER="root"
DB_PASS = "" DATABASE_PASSWORD="password"
JWT_SECRET = "" DATABASE_PORT=3306
EMAIL_HOST = "" JWT_SECRET=""
EMAIL_USER = "" EMAIL_HOST="functionproject-maildev"
EMAIL_PASSWORD = "" EMAIL_USER="no-reply@functionproject.fr"
EMAIL_PASSWORD="password"
EMAIL_PORT=25
COMPOSE_PROJECT_NAME="function.divlo.fr-api"

6
api/.gitignore vendored
View File

@ -11,14 +11,16 @@
# production # production
/build /build
# misc # envs
.DS_Store
.env .env
.env.local .env.local
.env.development.local .env.development.local
.env.test.local .env.test.local
.env.production.local .env.production.local
.env.production .env.production
# misc
.DS_Store
/temp /temp
/assets/images/ /assets/images/

13
api/Dockerfile Normal file
View File

@ -0,0 +1,13 @@
FROM node:14.15.0-alpine3.12
WORKDIR /app
COPY ./package*.json ./
RUN npm install
COPY ./ ./
# docker-compose-wait
ADD https://github.com/ufoscout/docker-compose-wait/releases/download/2.7.3/wait /wait
RUN chmod +x /wait
CMD /wait && npm run dev

24
api/app.js
View File

@ -6,6 +6,7 @@ const helmet = require('helmet')
const cors = require('cors') const cors = require('cors')
const morgan = require('morgan') const morgan = require('morgan')
const { redirectToHTTPS } = require('express-http-to-https') const { redirectToHTTPS } = require('express-http-to-https')
const rateLimit = require('express-rate-limit')
/* Files Imports & Variables */ /* Files Imports & Variables */
const sequelize = require('./assets/utils/database') const sequelize = require('./assets/utils/database')
@ -16,11 +17,27 @@ const isAdmin = require('./middlewares/isAdmin')
const app = express() const app = express()
/* Middlewares */ /* Middlewares */
if (process.env.NODE_ENV === 'development') {
app.use(morgan('dev'))
} else if (process.env.NODE_ENV === 'production') {
app.use(redirectToHTTPS())
const requestPerSecond = 2
const seconds = 60
const windowMs = seconds * 1000
app.enable('trust proxy')
app.use(
rateLimit({
windowMs,
max: seconds * requestPerSecond,
handler: (_req, res) => {
return res.status(429).json({ message: 'Too many requests' })
}
})
)
}
app.use(helmet()) app.use(helmet())
app.use(cors()) app.use(cors())
app.use(morgan('dev'))
app.use(express.json()) app.use(express.json())
app.use(redirectToHTTPS([/localhost:(\d{4})/]))
/* Routes */ /* Routes */
app.use('/images', express.static(path.join(__dirname, 'assets', 'images'))) app.use('/images', express.static(path.join(__dirname, 'assets', 'images')))
@ -37,7 +54,7 @@ app.use('/links', require('./routes/links_shortener'))
/* Errors Handling */ /* Errors Handling */
app.use((_req, _res, next) => app.use((_req, _res, next) =>
errorHandling(next, { statusCode: 404, message: "La route n'existe pas!" }) errorHandling(next, { statusCode: 404, message: "La route n'existe pas!" })
) // 404 )
app.use((error, _req, res, _next) => { app.use((error, _req, res, _next) => {
console.log(error) console.log(error)
const { statusCode, message } = error const { statusCode, message } = error
@ -83,7 +100,6 @@ Users.hasMany(ShortLinks)
ShortLinks.belongsTo(Users, { constraints: false }) ShortLinks.belongsTo(Users, { constraints: false })
/* Server */ /* Server */
// sequelize.sync({ force: true })
sequelize sequelize
.sync() .sync()
.then(() => { .then(() => {

21
api/assets/config/config.js
View File

@ -1,3 +1,8 @@
const dotenv = require('dotenv')
dotenv.config()
const EMAIL_PORT = parseInt(process.env.EMAIL_PORT ?? '465', 10)
const config = { const config = {
PORT: process.env.PORT || 8080, PORT: process.env.PORT || 8080,
HOST: process.env.HOST, HOST: process.env.HOST,
@ -5,20 +10,22 @@ const config = {
WEATHER_API_KEY: process.env.OpenWeatherMap_API_KEY, WEATHER_API_KEY: process.env.OpenWeatherMap_API_KEY,
SCRAPER_API_KEY: process.env.Scraper_API_KEY, SCRAPER_API_KEY: process.env.Scraper_API_KEY,
DATABASE: { DATABASE: {
host: process.env.DB_HOST, host: process.env.DATABASE_HOST,
name: process.env.DB_NAME, name: process.env.DATABASE_NAME,
user: process.env.DB_USER, user: process.env.DATABASE_USER,
password: process.env.DB_PASS password: process.env.DATABASE_PASSWORD,
port: parseInt(process.env.DATABASE_PORT ?? '3306', 10)
}, },
JWT_SECRET: process.env.JWT_SECRET, JWT_SECRET: process.env.JWT_SECRET,
EMAIL_INFO: { EMAIL_INFO: {
host: process.env.EMAIL_HOST, host: process.env.EMAIL_HOST,
port: 465, port: EMAIL_PORT,
secure: true, // true for 465, false for other ports secure: EMAIL_PORT === 465,
auth: { auth: {
user: process.env.EMAIL_USER, user: process.env.EMAIL_USER,
pass: process.env.EMAIL_PASSWORD pass: process.env.EMAIL_PASSWORD
} },
ignoreTLS: process.env.NODE_ENV !== 'production'
}, },
TOKEN_LIFE: '1 week' TOKEN_LIFE: '1 week'
} }

3
api/assets/utils/database.js
View File

@ -7,7 +7,8 @@ const sequelize = new Sequelize(
DATABASE.password, DATABASE.password,
{ {
dialect: 'mysql', dialect: 'mysql',
host: DATABASE.host host: DATABASE.host,
port: DATABASE.port
} }
) )

1656
api/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

45
api/package.json
View File

@ -1,37 +1,38 @@
{ {
"name": "api", "name": "api",
"version": "2.1.0", "version": "2.2.0",
"description": "Backend REST API for FunctionProject", "description": "Backend REST API for FunctionProject",
"scripts": { "scripts": {
"start": "node app.js", "start": "node app.js",
"dev": "nodemon app.js", "dev": "nodemon app.js",
"format": "standard \"./**/*.js\" --fix | snazzy || exit 0" "format": "standard \"./**/*.js\" --fix | snazzy"
}, },
"dependencies": { "dependencies": {
"axios": "^0.19.2", "axios": "^0.21.0",
"bcryptjs": "^2.4.3", "bcryptjs": "^2.4.3",
"cors": "^2.8.5", "cors": "^2.8.5",
"express": "^4.17.1",
"express-fileupload": "^1.1.6",
"express-http-to-https": "^1.1.4",
"express-validator": "^6.4.0",
"helmet": "^3.21.3",
"jsdom": "^16.2.2",
"jsonwebtoken": "^8.5.1",
"moment": "^2.24.0",
"ms": "^2.1.2",
"mysql2": "^2.1.0",
"nodemailer": "^6.4.6",
"sequelize": "^5.21.5",
"smart-request-balancer": "^2.1.1",
"uuid": "^7.0.2",
"validator": "^13.0.0",
"dotenv": "^8.2.0", "dotenv": "^8.2.0",
"morgan": "^1.9.1" "express": "^4.17.1",
"express-fileupload": "^1.2.0",
"express-http-to-https": "^1.1.4",
"express-rate-limit": "^5.1.3",
"express-validator": "^6.6.1",
"helmet": "^4.1.1",
"jsdom": "^16.4.0",
"jsonwebtoken": "^8.5.1",
"moment": "^2.29.1",
"morgan": "^1.10.0",
"ms": "^2.1.2",
"mysql2": "^2.2.5",
"nodemailer": "^6.4.14",
"sequelize": "^6.3.5",
"smart-request-balancer": "^2.1.1",
"uuid": "^8.3.1",
"validator": "^13.1.17"
}, },
"devDependencies": { "devDependencies": {
"nodemon": "^2.0.4", "nodemon": "^2.0.6",
"snazzy": "^8.0.0", "snazzy": "^9.0.0",
"standard": "^14.3.4" "standard": "^16.0.0"
} }
} }

73
docker-compose.yml Normal file
View File

@ -0,0 +1,73 @@
version: '3.0'
services:
functionproject-api:
build:
context: './api'
ports:
- '8080:8080'
depends_on:
- 'functionproject-database'
- 'functionproject-maildev'
volumes:
- './api:/app'
- '/app/node_modules'
environment:
WAIT_HOSTS: 'functionproject-database:3306'
container_name: 'functionproject-api'
s.divlo.fr-website:
build:
context: './s.divlo.fr'
ports:
- '7000:7000'
depends_on:
- 'functionproject-database'
volumes:
- './s.divlo.fr:/app'
- '/app/node_modules'
environment:
WAIT_HOSTS: 'functionproject-database:3306'
container_name: 's.divlo.fr-website'
functionproject-website:
build:
context: './website'
ports:
- '3000:3000'
volumes:
- './website:/app'
- '/app/node_modules'
container_name: 'functionproject-website'
functionproject-phpmyadmin:
image: 'phpmyadmin/phpmyadmin:5.0.2'
environment:
PMA_HOST: 'functionproject-database'
PMA_USER: 'root'
PMA_PASSWORD: 'password'
ports:
- '8000:80'
depends_on:
- 'functionproject-database'
container_name: 'functionproject-phpmyadmin'
functionproject-database:
image: 'mysql:5.7'
command: '--default-authentication-plugin=mysql_native_password --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci'
environment:
MYSQL_ROOT_PASSWORD: 'password'
MYSQL_DATABASE: 'functionproject'
ports:
- '3306:3306'
volumes:
- 'database-volume:/var/lib/mysql'
container_name: 'functionproject-database'
functionproject-maildev:
image: 'maildev/maildev:1.1.0'
ports:
- '1080:80'
container_name: 'functionproject-maildev'
volumes:
database-volume:

2
s.divlo.fr/.dockerignore Normal file
View File

@ -0,0 +1,2 @@
node_modules
build

10
s.divlo.fr/.env.example
View File

@ -1,4 +1,6 @@
DB_HOST = "" DATABASE_HOST="functionproject-database"
DB_NAME = "" DATABASE_NAME="functionproject"
DB_USER = "" DATABASE_USER="root"
DB_PASS = "" DATABASE_PASSWORD="password"
DATABASE_PORT=3306
COMPOSE_PROJECT_NAME="s.divlo.fr-website"

13
s.divlo.fr/Dockerfile Normal file
View File

@ -0,0 +1,13 @@
FROM node:14.15.0-alpine3.12
WORKDIR /app
COPY ./package*.json ./
RUN npm install
COPY ./ ./
# docker-compose-wait
ADD https://github.com/ufoscout/docker-compose-wait/releases/download/2.7.3/wait /wait
RUN chmod +x /wait
CMD /wait && npm run dev

19
s.divlo.fr/app.js
View File

@ -10,18 +10,21 @@ const mysql = require('mysql')
/* Files Imports & Variables */ /* Files Imports & Variables */
const app = express() const app = express()
const database = mysql.createPool({ const database = mysql.createPool({
host: process.env.DB_HOST, host: process.env.DATABASE_HOST,
user: process.env.DB_USER, user: process.env.DATABASE_USER,
password: process.env.DB_PASS, password: process.env.DATABASE_PASS,
database: process.env.DB_NAME, database: process.env.DATABASE_NAME,
port: process.env.DB_PORT port: process.env.DATABASE_PORT
}) })
/* Middlewares */ /* Middlewares */
if (process.env.NODE_ENV === 'development') {
app.use(morgan('dev'))
} else if (process.env.NODE_ENV === 'production') {
app.use(redirectToHTTPS())
}
app.use(helmet()) app.use(helmet())
app.use(morgan('dev'))
app.use(express.json()) app.use(express.json())
app.use(redirectToHTTPS([/localhost:(\d{4})/]))
/* EJS Template Engines */ /* EJS Template Engines */
app.set('view engine', 'ejs') app.set('view engine', 'ejs')
@ -77,7 +80,7 @@ app.use((error, _req, res) => {
}) })
/* Server */ /* Server */
const PORT = process.env.PORT || 8000 const PORT = process.env.PORT || 7000
app.listen(PORT, () => { app.listen(PORT, () => {
console.log('\x1b[36m%s\x1b[0m', `Started on port ${PORT}.`) console.log('\x1b[36m%s\x1b[0m', `Started on port ${PORT}.`)
}) })

1707
s.divlo.fr/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
s.divlo.fr/package.json
View File

@ -9,16 +9,16 @@
}, },
"dependencies": { "dependencies": {
"dotenv": "^8.2.0", "dotenv": "^8.2.0",
"ejs": "^3.1.3", "ejs": "^3.1.5",
"express": "^4.17.1", "express": "^4.17.1",
"express-http-to-https": "^1.1.4", "express-http-to-https": "^1.1.4",
"helmet": "^4.0.0", "helmet": "^4.1.1",
"morgan": "^1.10.0", "morgan": "^1.10.0",
"mysql": "^2.18.1" "mysql": "^2.18.1"
}, },
"devDependencies": { "devDependencies": {
"nodemon": "^2.0.4", "nodemon": "^2.0.6",
"snazzy": "^8.0.0", "snazzy": "^9.0.0",
"standard": "^14.3.4" "standard": "^16.0.0"
} }
} }

2
website/.dockerignore Normal file
View File

@ -0,0 +1,2 @@
node_modules
build

2
website/.env.example
View File

@ -1 +1,3 @@
NEXT_PUBLIC_API_URL = "http://localhost:8080" NEXT_PUBLIC_API_URL = "http://localhost:8080"
CONTAINER_API_URL="http://functionproject-api:8080"
COMPOSE_PROJECT_NAME="function.divlo.fr-website"

9
website/Dockerfile Normal file
View File

@ -0,0 +1,9 @@
FROM node:14.15.0-alpine3.12
WORKDIR /app
COPY ./package*.json ./
RUN npm install
COPY ./ ./
CMD ["npm", "run", "dev"]

2
website/components/Footer/Footer.jsx
View File

@ -8,7 +8,7 @@ export default function Footer () {
<Link href='/about'> <Link href='/about'>
<a>FunctionProject</a> <a>FunctionProject</a>
</Link> </Link>
&nbsp;- Version 2.1 <br /> &nbsp;- Version 2.2 <br />
<a href='https://divlo.fr/' target='_blank' rel='noopener noreferrer'> <a href='https://divlo.fr/' target='_blank' rel='noopener noreferrer'>
Divlo Divlo
</a>{' '} </a>{' '}

16
website/components/FunctionCard/FunctionCard.jsx
View File

@ -23,15 +23,15 @@ const FunctionCard = memo(
<Link <Link
{...(props.isAdmin {...(props.isAdmin
? { ? {
href: '/admin/[slug]', href: '/admin/[slug]',
as: `/admin/${props.slug}` as: `/admin/${props.slug}`
} }
: { : {
href: isFormOrArticle href: isFormOrArticle
? '/functions/[slug]' ? '/functions/[slug]'
: `/functions/${props.slug}`, : `/functions/${props.slug}`,
as: `/functions/${props.slug}` as: `/functions/${props.slug}`
})} })}
> >
{/* FunctionCard a une hauteur pendant chargement */} {/* FunctionCard a une hauteur pendant chargement */}
<a <a

106
website/components/FunctionPage/CommentCard/CommentCard.jsx
View File

@ -82,62 +82,68 @@ const CommentCard = forwardRef((props, ref) => {
<a>{props.user.name}</a> <a>{props.user.name}</a>
</Link> </Link>
&nbsp;-{' '} &nbsp;-{' '}
{date.format(new Date(props.createdAt), 'DD/MM/YYYY à HH:mm', false)} {date.format(
new Date(props.createdAt),
'DD/MM/YYYY à HH:mm',
false
)}
</span> </span>
</div> </div>
<div className='row'> <div className='row'>
<div className='col-24'> <div className='col-24'>
{!isEditing ? ( {!isEditing
<> ? (
<div className='CommentCard__message'> <>
<ReactMarkdown <div className='CommentCard__message'>
source={editInput} <ReactMarkdown
renderers={{ code: CodeBlock }} source={editInput}
/> renderers={{ code: CodeBlock }}
</div> />
{isAuth && user.name === props.user.name && ( </div>
<p {isAuth && user.name === props.user.name && (
style={{ <p
fontSize: '15px', style={{
margin: '15px 0 0 0', fontSize: '15px',
fontStyle: 'italic' margin: '15px 0 0 0',
}} fontStyle: 'italic'
> }}
<a onClick={deleteCommentById} href='#'> >
supprimer <a onClick={deleteCommentById} href='#'>
</a> supprimer
</a>
&nbsp;-&nbsp; &nbsp;-&nbsp;
<a style={{ cursor: 'pointer' }} onClick={editComment}> <a style={{ cursor: 'pointer' }} onClick={editComment}>
modifier modifier
</a> </a>
</p> </p>
)}
</>
)
: (
<form onSubmit={handleSubmit}>
<div className='form-group FunctionComments__post-group'>
<label className='form-label' htmlFor='commentEdit'>
Modifier le commentaire :
</label>
<textarea
style={{ height: 'auto' }}
value={editInput}
onChange={handleChange}
name='commentEdit'
id='commentEdit'
className='form-control'
rows='5'
placeholder="Idée d'amélioration, avis, remarque, partage d'expérience personnel, ... (Markdown autorisé)"
/>
</div>
<div className='form-group' style={{ marginTop: '0.7em' }}>
<button type='submit' className='btn btn-dark'>
Envoyer
</button>
</div>
<div className='text-center'>{htmlParser(message)}</div>
</form>
)} )}
</>
) : (
<form onSubmit={handleSubmit}>
<div className='form-group FunctionComments__post-group'>
<label className='form-label' htmlFor='commentEdit'>
Modifier le commentaire :
</label>
<textarea
style={{ height: 'auto' }}
value={editInput}
onChange={handleChange}
name='commentEdit'
id='commentEdit'
className='form-control'
rows='5'
placeholder="Idée d'amélioration, avis, remarque, partage d'expérience personnel, ... (Markdown autorisé)"
/>
</div>
<div className='form-group' style={{ marginTop: '0.7em' }}>
<button type='submit' className='btn btn-dark'>
Envoyer
</button>
</div>
<div className='text-center'>{htmlParser(message)}</div>
</form>
)}
</div> </div>
</div> </div>
</div> </div>

12
website/components/FunctionPage/FunctionArticle.jsx
View File

@ -3,11 +3,13 @@ import htmlParser from 'html-react-parser'
const FunctionArticle = ({ article }) => { const FunctionArticle = ({ article }) => {
return ( return (
<div style={{ marginBottom: '50px' }} className='container-fluid'> <div style={{ marginBottom: '50px' }} className='container-fluid'>
{article != null ? ( {article != null
htmlParser(article) ? (
) : ( htmlParser(article)
<p className='text-center'>L'article n'est pas encore disponible.</p> )
)} : (
<p className='text-center'>L'article n'est pas encore disponible.</p>
)}
</div> </div>
) )
} }

62
website/components/FunctionPage/FunctionComments/FunctionComments.jsx
View File

@ -90,36 +90,38 @@ const FunctionComments = ({ functionId }) => {
<div className='FunctionComments__post container-fluid'> <div className='FunctionComments__post container-fluid'>
<div className='row FunctionComments__row'> <div className='row FunctionComments__row'>
<div className='col-24'> <div className='col-24'>
{isAuth ? ( {isAuth
<form onSubmit={handleSubmit}> ? (
<div className='form-group FunctionComments__post-group'> <form onSubmit={handleSubmit}>
<label className='form-label' htmlFor='commentPost'> <div className='form-group FunctionComments__post-group'>
Ajouter un commentaire : <label className='form-label' htmlFor='commentPost'>
</label> Ajouter un commentaire :
<textarea </label>
className='FunctionComments__textarea form-control' <textarea
value={inputState.commentPost} className='FunctionComments__textarea form-control'
onChange={handleChange} value={inputState.commentPost}
name='commentPost' onChange={handleChange}
id='commentPost' name='commentPost'
placeholder="Idée d'amélioration, avis, remarque, partage d'expérience personnel, ... (Markdown autorisé)" id='commentPost'
/> placeholder="Idée d'amélioration, avis, remarque, partage d'expérience personnel, ... (Markdown autorisé)"
</div> />
<div className='form-group' style={{ marginTop: '0.7em' }}> </div>
<button type='submit' className='btn btn-dark'> <div className='form-group' style={{ marginTop: '0.7em' }}>
Envoyer <button type='submit' className='btn btn-dark'>
</button> Envoyer
</div> </button>
</form> </div>
) : ( </form>
<p className='text-center'> )
Vous devez être{' '} : (
<Link href='/users/login'> <p className='text-center'>
<a>connecté</a> Vous devez être{' '}
</Link>{' '} <Link href='/users/login'>
pour poster un commentaire. <a>connecté</a>
</p> </Link>{' '}
)} pour poster un commentaire.
</p>
)}
</div> </div>
</div> </div>
</div> </div>

52
website/components/Header/Header.jsx
View File

@ -51,35 +51,37 @@ export default function Header () {
<NavigationLink name='Accueil' path='/' /> <NavigationLink name='Accueil' path='/' />
<NavigationLink name='Fonctions' path='/functions' /> <NavigationLink name='Fonctions' path='/functions' />
<NavigationLink name='Utilisateurs' path='/users' /> <NavigationLink name='Utilisateurs' path='/users' />
{!isAuth ? ( {!isAuth
<> ? (
<NavigationLink name="S'inscrire" path='/users/register' /> <>
<NavigationLink name='Connexion' path='/users/login' /> <NavigationLink name="S'inscrire" path='/users/register' />
</> <NavigationLink name='Connexion' path='/users/login' />
) : ( </>
<> )
<li className='navbar-item'> : (
<Link href='/users/[name]' as={`/users/${user.name}`}> <>
<a <li className='navbar-item'>
className={`navbar-link ${ <Link href='/users/[name]' as={`/users/${user.name}`}>
<a
className={`navbar-link ${
pathname === '/users/[name]' pathname === '/users/[name]'
? 'navbar-link-active' ? 'navbar-link-active'
: null : null
}`} }`}
> >
Mon Profil Mon Profil
</a> </a>
</Link> </Link>
</li> </li>
<li className='navbar-item'> <li className='navbar-item'>
<Link href='/'> <Link href='/'>
<a onClick={logoutUser} className='navbar-link'> <a onClick={logoutUser} className='navbar-link'>
Se déconnecter Se déconnecter
</a> </a>
</Link> </Link>
</li> </li>
</> </>
)} )}
{isAuth && user.isAdmin && ( {isAuth && user.isAdmin && (
<NavigationLink name='Admin' path='/admin' /> <NavigationLink name='Admin' path='/admin' />
)} )}

4270
website/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

52
website/package.json
View File

@ -1,47 +1,49 @@
{ {
"name": "website", "name": "website",
"version": "2.1.0", "version": "2.2.0",
"description": "Website frontend for FunctionProject", "description": "Website frontend for FunctionProject",
"main": "server.js", "main": "server.js",
"scripts": { "scripts": {
"dev": "cross-env NODE_ENV=development node server", "dev:custom": "cross-env NODE_ENV=development node server",
"start:custom": "cross-env NODE_ENV=production node server",
"dev": "next",
"start": "next start",
"build": "next build", "build": "next build",
"export": "next export", "export": "next export",
"start": "cross-env NODE_ENV=production node server", "format": "standard \"./**/*.{js,jsx}\" --fix | snazzy"
"format": "standard \"./**/*.{js,jsx}\" --fix | snazzy || exit 0"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.28", "@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-brands-svg-icons": "^5.13.0", "@fortawesome/free-brands-svg-icons": "^5.15.1",
"@fortawesome/free-regular-svg-icons": "^5.13.0", "@fortawesome/free-regular-svg-icons": "^5.15.1",
"@fortawesome/free-solid-svg-icons": "^5.13.0", "@fortawesome/free-solid-svg-icons": "^5.15.1",
"@fortawesome/react-fontawesome": "^0.1.9", "@fortawesome/react-fontawesome": "^0.1.12",
"@zeit/next-css": "^1.0.1", "@zeit/next-css": "^1.0.1",
"axios": "^0.19.2", "axios": "^0.21.0",
"date-and-time": "^0.13.1", "date-and-time": "^0.14.1",
"date-fns": "^2.12.0", "date-fns": "^2.16.1",
"express": "^4.17.1", "express": "^4.17.1",
"express-http-to-https": "^1.1.4", "express-http-to-https": "^1.1.4",
"html-react-parser": "^0.10.2", "html-react-parser": "^0.14.0",
"next": "^9.5.4", "next": "^10.0.0",
"next-fonts": "^1.0.3", "next-fonts": "^1.4.0",
"notyf": "^3.6.0", "notyf": "^3.9.0",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"react": "16.13.0", "react": "17.0.1",
"react-codepen-embed": "^1.0.1", "react-codepen-embed": "^1.0.1",
"react-color": "^2.18.0", "react-color": "^2.19.3",
"react-datepicker": "^2.14.1", "react-datepicker": "^3.3.0",
"react-dom": "16.13.0", "react-dom": "17.0.1",
"react-markdown": "^4.3.1", "react-markdown": "^5.0.2",
"react-swipeable-views": "^0.13.9", "react-swipeable-views": "^0.13.9",
"react-swipeable-views-utils": "^0.13.9", "react-swipeable-views-utils": "^0.13.9",
"react-syntax-highlighter": "^12.2.1", "react-syntax-highlighter": "^15.3.0",
"suneditor-react": "^2.8.0", "suneditor-react": "^2.8.0",
"universal-cookie": "^4.0.3" "universal-cookie": "^4.0.4"
}, },
"devDependencies": { "devDependencies": {
"cross-env": "^7.0.2", "cross-env": "^7.0.2",
"snazzy": "^8.0.0", "snazzy": "^9.0.0",
"standard": "^14.3.4" "standard": "^16.0.0"
} }
} }

106
website/pages/admin/index.jsx
View File

@ -23,64 +23,66 @@ const Admin = props => {
/> />
{/* Création d'une fonction */} {/* Création d'une fonction */}
{isOpen ? ( {isOpen
<Modal toggleModal={toggleModal}> ? (
<div className='Admin__Modal__container container-fluid'> <Modal toggleModal={toggleModal}>
<div className='Admin__Modal__row row'> <div className='Admin__Modal__container container-fluid'>
<div className='col-24'> <div className='Admin__Modal__row row'>
<div className='Admin__Modal-top-container row'> <div className='col-24'>
<div className='col-24'> <div className='Admin__Modal-top-container row'>
<span <div className='col-24'>
onClick={toggleModal} <span
style={{ onClick={toggleModal}
cursor: 'pointer', style={{
position: 'absolute', cursor: 'pointer',
left: 0 position: 'absolute',
}} left: 0
> }}
<FontAwesomeIcon >
icon={faTimes} <FontAwesomeIcon
style={{ width: '1.5rem', color: 'red' }} icon={faTimes}
/> style={{ width: '1.5rem', color: 'red' }}
</span> />
<h2 className='text-center'>Crée une nouvelle fonction</h2> </span>
<h2 className='text-center'>Crée une nouvelle fonction</h2>
</div>
</div> </div>
</div> </div>
</div>
<div className='col-24'> <div className='col-24'>
<AddEditFunction <AddEditFunction
defaultInputState={{ type: 'form' }} defaultInputState={{ type: 'form' }}
{...props} {...props}
/> />
</div>
</div> </div>
</div> </div>
</div> </Modal>
</Modal> )
) : ( : (
<FunctionsList isAdmin token={props.user.token}> <FunctionsList isAdmin token={props.user.token}>
<div className='col-24'> <div className='col-24'>
<h1 className='Functions__title'>Administration</h1> <h1 className='Functions__title'>Administration</h1>
<button <button
onClick={toggleModal} onClick={toggleModal}
style={{ margin: '0 0 40px 0' }} style={{ margin: '0 0 40px 0' }}
className='btn btn-dark' className='btn btn-dark'
> >
Crée une nouvelle fonction Crée une nouvelle fonction
</button>
<Link href='/admin/manageCategories'>
<button style={{ margin: '0 0 0 20px' }} className='btn btn-dark'>
Gérer les catégories
</button> </button>
</Link> <Link href='/admin/manageCategories'>
<Link href='/admin/manageQuotes'> <button style={{ margin: '0 0 0 20px' }} className='btn btn-dark'>
<button style={{ margin: '0 0 0 20px' }} className='btn btn-dark'> Gérer les catégories
Gérer les citations </button>
</button> </Link>
</Link> <Link href='/admin/manageQuotes'>
</div> <button style={{ margin: '0 0 0 20px' }} className='btn btn-dark'>
</FunctionsList> Gérer les citations
)} </button>
</Link>
</div>
</FunctionsList>
)}
</> </>
) )
} }

218
website/pages/admin/manageCategories.jsx
View File

@ -159,119 +159,121 @@ const manageCategories = props => {
description="Page d'administration de FunctionProject. Gérer les catégories." description="Page d'administration de FunctionProject. Gérer les catégories."
/> />
{isOpen ? ( {isOpen
<Modal> ? (
<AddEditCategory <Modal>
handleToggleModal={toggleModal} <AddEditCategory
defaultInputState={defaultInputState} handleToggleModal={toggleModal}
{...props} defaultInputState={defaultInputState}
isEditing={isEditing} {...props}
/> isEditing={isEditing}
</Modal> />
) : ( </Modal>
<div className='container-fluid text-center'> )
<div className='row justify-content-center'> : (
<div className='col-24'> <div className='container-fluid text-center'>
<h1>Gérer les catégories</h1> <div className='row justify-content-center'>
<button <div className='col-24'>
onClick={() => { <h1>Gérer les catégories</h1>
setDefaultInputState(defaultCategoryState) <button
toggleModal() onClick={() => {
setIsEditing(false) setDefaultInputState(defaultCategoryState)
}} toggleModal()
style={{ margin: '0 0 40px 0' }} setIsEditing(false)
className='btn btn-dark' }}
> style={{ margin: '0 0 40px 0' }}
Ajouter une catégorie className='btn btn-dark'
</button> >
Ajouter une catégorie
</button>
</div>
</div> </div>
</div> <div className='row justify-content-center'>
<div className='row justify-content-center'> <div className='container-fluid'>
<div className='container-fluid'> <div className='col-24 table-column'>
<div className='col-24 table-column'> <table className='table'>
<table className='table'> <thead>
<thead> <tr>
<tr> <th className='table-row' scope='col'>
<th className='table-row' scope='col'> id
id </th>
</th> <th className='table-row' scope='col'>
<th className='table-row' scope='col'> name
name </th>
</th> <th className='table-row' scope='col'>
<th className='table-row' scope='col'> color
color </th>
</th> <th className='table-row' scope='col'>
<th className='table-row' scope='col'> createdAt
createdAt </th>
</th> <th className='table-row' scope='col'>
<th className='table-row' scope='col'> updatedAt
updatedAt </th>
</th> <th className='table-row' scope='col'>
<th className='table-row' scope='col'> Modifier
Modifier </th>
</th> <th className='table-row' scope='col'>
<th className='table-row' scope='col'> Supprimer
Supprimer </th>
</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> {categories.map(category => {
{categories.map(category => { return (
return ( <tr
<tr key={category.id}
key={category.id} style={{ backgroundColor: category.color }}
style={{ backgroundColor: category.color }}
>
<td className='table-row'>{category.id}</td>
<td className='table-row'>{category.name}</td>
<td className='table-row'>{category.color}</td>
<td className='table-row'>
{date.format(
new Date(category.createdAt),
'DD/MM/YYYY à HH:mm',
false
)}
</td>
<td className='table-row'>
{date.format(
new Date(category.updatedAt),
'DD/MM/YYYY à HH:mm',
false
)}
</td>
<td
style={{ cursor: 'pointer' }}
onClick={() =>
handleEditCategory({
name: category.name,
color: category.color,
id: category.id
})}
> >
<FontAwesomeIcon <td className='table-row'>{category.id}</td>
icon={faPen} <td className='table-row'>{category.name}</td>
style={{ width: '1.5rem' }} <td className='table-row'>{category.color}</td>
/> <td className='table-row'>
</td> {date.format(
<td new Date(category.createdAt),
style={{ cursor: 'pointer' }} 'DD/MM/YYYY à HH:mm',
onClick={() => handleRemoveCategory(category.id)} false
> )}
<FontAwesomeIcon </td>
icon={faTrash} <td className='table-row'>
style={{ width: '1.5rem' }} {date.format(
/> new Date(category.updatedAt),
</td> 'DD/MM/YYYY à HH:mm',
</tr> false
) )}
})} </td>
</tbody> <td
</table> style={{ cursor: 'pointer' }}
onClick={() =>
handleEditCategory({
name: category.name,
color: category.color,
id: category.id
})}
>
<FontAwesomeIcon
icon={faPen}
style={{ width: '1.5rem' }}
/>
</td>
<td
style={{ cursor: 'pointer' }}
onClick={() => handleRemoveCategory(category.id)}
>
<FontAwesomeIcon
icon={faTrash}
style={{ width: '1.5rem' }}
/>
</td>
</tr>
)
})}
</tbody>
</table>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> )}
)}
</> </>
) )
} }

258
website/pages/functions/linkShortener.jsx
View File

@ -266,144 +266,146 @@ const LinksList = ({
</div> </div>
<div className='row justify-content-center'> <div className='row justify-content-center'>
<div className='container-fluid'> <div className='container-fluid'>
{!isEditing ? ( {!isEditing
<div className='col-24 table-column'> ? (
<table className='table' style={{ marginBottom: '40px' }}> <div className='col-24 table-column'>
<thead> <table className='table' style={{ marginBottom: '40px' }}>
<tr> <thead>
<th className='table-row' scope='col'> <tr>
Liens <th className='table-row' scope='col'>
</th> Liens
<th className='table-row' scope='col'> </th>
Nom <th className='table-row' scope='col'>
</th> Nom
<th className='table-row' scope='col'> </th>
Compteur de clics <th className='table-row' scope='col'>
</th> Compteur de clics
<th className='table-row' scope='col'> </th>
Modifier <th className='table-row' scope='col'>
</th> Modifier
<th className='table-row' scope='col'> </th>
Supprimer <th className='table-row' scope='col'>
</th> Supprimer
</tr> </th>
</thead> </tr>
<tbody> </thead>
{linksData.rows.map((link, index) => { <tbody>
const linkJSX = ( {linksData.rows.map((link, index) => {
<> const linkJSX = (
<td className='table-row'> <>
<a href={link.url}>{link.url}</a> <td className='table-row'>
</td> <a href={link.url}>{link.url}</a>
<td className='table-row'> </td>
<a href={`https://s.divlo.fr/${link.shortcut}`}> <td className='table-row'>
{link.shortcut} <a href={`https://s.divlo.fr/${link.shortcut}`}>
</a> {link.shortcut}
</td> </a>
<td className='table-row'>{link.count}</td> </td>
<td <td className='table-row'>{link.count}</td>
style={{ cursor: 'pointer' }} <td
onClick={() => handleEditLink(link)} style={{ cursor: 'pointer' }}
> onClick={() => handleEditLink(link)}
<FontAwesomeIcon >
icon={faPen} <FontAwesomeIcon
style={{ width: '1.5rem' }} icon={faPen}
/> style={{ width: '1.5rem' }}
</td> />
<td </td>
style={{ cursor: 'pointer' }} <td
onClick={() => handleRemoveLink(link.id)} style={{ cursor: 'pointer' }}
> onClick={() => handleRemoveLink(link.id)}
<FontAwesomeIcon >
icon={faTrash} <FontAwesomeIcon
style={{ width: '1.5rem' }} icon={faTrash}
/> style={{ width: '1.5rem' }}
</td> />
</> </td>
) </>
// Si c'est le dernier élément
if (linksData.rows.length === index + 1) {
return (
<tr key={index} ref={lastLinkRef}>
{linkJSX}
</tr>
) )
} // Si c'est le dernier élément
return <tr key={index}>{linkJSX}</tr> if (linksData.rows.length === index + 1) {
})} return (
</tbody> <tr key={index} ref={lastLinkRef}>
</table> {linkJSX}
</div> </tr>
) : ( )
<Modal> }
<div className='Admin__Modal__container container-fluid'> return <tr key={index}>{linkJSX}</tr>
<div className='Admin__Modal__row row'> })}
<div className='col-24'> </tbody>
<div className='Admin__Modal-top-container row'> </table>
<div className='col-24'> </div>
<span )
onClick={toggleModal} : (
style={{ <Modal>
cursor: 'pointer', <div className='Admin__Modal__container container-fluid'>
position: 'absolute', <div className='Admin__Modal__row row'>
left: 0 <div className='col-24'>
}} <div className='Admin__Modal-top-container row'>
> <div className='col-24'>
<FontAwesomeIcon <span
icon={faTimes} onClick={toggleModal}
style={{ width: '1.5rem', color: 'red' }} style={{
/> cursor: 'pointer',
</span> position: 'absolute',
left: 0
}}
>
<FontAwesomeIcon
icon={faTimes}
style={{ width: '1.5rem', color: 'red' }}
/>
</span>
</div>
</div> </div>
</div> </div>
</div>
<div className='col-24'> <div className='col-24'>
<form onSubmit={handleEditSubmit}> <form onSubmit={handleEditSubmit}>
<div className='form-group'> <div className='form-group'>
<label className='form-label' htmlFor='url'> <label className='form-label' htmlFor='url'>
Entrez le lien à raccourcir : Entrez le lien à raccourcir :
</label> </label>
<input <input
value={defaultInputState.url} value={defaultInputState.url}
onChange={handleChange} onChange={handleChange}
type='text' type='text'
name='url' name='url'
id='url' id='url'
placeholder='(e.g : https://divlo.fr)' placeholder='(e.g : https://divlo.fr)'
className='form-control' className='form-control'
/> />
</div> </div>
<div className='form-group'> <div className='form-group'>
<label className='form-label' htmlFor='shortcutName'> <label className='form-label' htmlFor='shortcutName'>
Entrez le nom du raccourci : Entrez le nom du raccourci :
</label> </label>
<input <input
value={defaultInputState.shortcutName} value={defaultInputState.shortcutName}
onChange={handleChange} onChange={handleChange}
type='text' type='text'
name='shortcutName' name='shortcutName'
id='shortcutName' id='shortcutName'
placeholder='(e.g : divlo)' placeholder='(e.g : divlo)'
className='form-control' className='form-control'
/> />
</div> </div>
<div className='form-group text-center'> <div className='form-group text-center'>
<button type='submit' className='btn btn-dark'> <button type='submit' className='btn btn-dark'>
Envoyer Envoyer
</button> </button>
</div>
</form>
<div className='form-result text-center'>
{isLoading ? <Loader /> : htmlParser(message)}
</div> </div>
</form>
<div className='form-result text-center'>
{isLoading ? <Loader /> : htmlParser(message)}
</div> </div>
</div> </div>
</div> </div>
</div> </Modal>
</Modal> )}
)}
</div> </div>
</div> </div>
</div> </div>

188
website/pages/functions/rightPrice.jsx
View File

@ -54,104 +54,110 @@ const PlayRightPrice = () => {
return ( return (
<div className='container-fluid'> <div className='container-fluid'>
{!isPlaying ? ( {!isPlaying
<div className='row justify-content-center'> ? (
<div className='form-group text-center'>
<button
onClick={handlePlaying}
type='submit'
className='btn btn-dark'
>
Jouer
</button>
</div>
</div>
) : isLoadingProduct ? (
<div className='row justify-content-center'>
<Loader />
</div>
) : (
<>
<div className='row justify-content-center'> <div className='row justify-content-center'>
<div <div className='form-group text-center'>
style={{ marginBottom: '20px' }} <button
className='col-24 text-center' onClick={handlePlaying}
> type='submit'
<h4>{productToGuess.name}</h4> className='btn btn-dark'
<img >
src={productToGuess.image} Jouer
alt={productToGuess.name} </button>
className='Product__image'
/>
</div> </div>
</div> </div>
)
<div className='row justify-content-center'> : isLoadingProduct
<div style={{ marginBottom: '25px' }} className='col-24'> ? (
{attemptsArray.length > 0 && <div className='row justify-content-center'>
attemptsArray[0].message === <Loader />
'Bravo, vous avez trouvé le juste prix !' ? (
<div className='form-group text-center'>
<button
onClick={handlePlaying}
type='submit'
className='btn btn-dark'
>
Rejouer ?
</button>
</div>
) : (
<form onSubmit={handleSubmit}>
<div className='text-center'>
<input
value={enteredPrice}
onChange={handleChange}
name='enteredPrice'
id='enteredPrice'
type='number'
step='0.01'
className='form-control'
autoComplete='off'
placeholder='Devinez le prix (prix à virgule possible!)'
/>
</div>
<div className='form-group text-center'>
<button type='submit' className='btn btn-dark'>
Deviner
</button>
</div>
</form>
)}
</div> </div>
</div> )
: (
<div <>
style={{ marginBottom: '30px' }} <div className='row justify-content-center'>
className='row justify-content-center'
>
{attemptsArray.map((attempt, index) => {
const { message } = attempt
let priceResultClass
if (message === "C'est moins !") {
priceResultClass = 'Price__result-moins'
} else if (message === "C'est plus !") {
priceResultClass = 'Price__result-plus'
} else {
priceResultClass = 'Price__result-success'
}
return (
<div <div
key={index} style={{ marginBottom: '20px' }}
className={`col-24 Price__result ${priceResultClass}`} className='col-24 text-center'
> >
# {attempt.numberTry} ({attempt.guessedPrice}) {message} <h4>{productToGuess.name}</h4>
<img
src={productToGuess.image}
alt={productToGuess.name}
className='Product__image'
/>
</div> </div>
) </div>
})}
</div> <div className='row justify-content-center'>
</> <div style={{ marginBottom: '25px' }} className='col-24'>
)} {attemptsArray.length > 0 &&
attemptsArray[0].message ===
'Bravo, vous avez trouvé le juste prix !'
? (
<div className='form-group text-center'>
<button
onClick={handlePlaying}
type='submit'
className='btn btn-dark'
>
Rejouer ?
</button>
</div>
)
: (
<form onSubmit={handleSubmit}>
<div className='text-center'>
<input
value={enteredPrice}
onChange={handleChange}
name='enteredPrice'
id='enteredPrice'
type='number'
step='0.01'
className='form-control'
autoComplete='off'
placeholder='Devinez le prix (prix à virgule possible!)'
/>
</div>
<div className='form-group text-center'>
<button type='submit' className='btn btn-dark'>
Deviner
</button>
</div>
</form>
)}
</div>
</div>
<div
style={{ marginBottom: '30px' }}
className='row justify-content-center'
>
{attemptsArray.map((attempt, index) => {
const { message } = attempt
let priceResultClass
if (message === "C'est moins !") {
priceResultClass = 'Price__result-moins'
} else if (message === "C'est plus !") {
priceResultClass = 'Price__result-plus'
} else {
priceResultClass = 'Price__result-success'
}
return (
<div
key={index}
className={`col-24 Price__result ${priceResultClass}`}
>
# {attempt.numberTry} ({attempt.guessedPrice}) {message}
</div>
)
})}
</div>
</>
)}
</div> </div>
) )
} }

538
website/pages/users/[name].jsx
View File

@ -84,299 +84,301 @@ const Profile = props => {
/> />
{/* Édition du profil */} {/* Édition du profil */}
{isOpen ? ( {isOpen
<Modal toggleModal={toggleModal}> ? (
<div className='Profile__container container-fluid'> <Modal toggleModal={toggleModal}>
<div className='Profile__row row'> <div className='Profile__container container-fluid'>
<div className='col-24'> <div className='Profile__row row'>
<div className='Profile__Modal-top-container row'> <div className='col-24'>
<div className='col-24'> <div className='Profile__Modal-top-container row'>
<span <div className='col-24'>
<span
onClick={toggleModal}
style={{
cursor: 'pointer',
position: 'absolute',
left: 0
}}
>
<FontAwesomeIcon
icon={faTimes}
style={{ width: '1.5rem', color: 'red' }}
/>
</span>
<h2 className='text-center'>Éditer le profil</h2>
<p className='text-center'>
<em>
(Vous devrez vous reconnecter après la sauvegarde){' '}
<br /> Si vous changez votre adresse email, vous devrez
la confirmer comme à l'inscription (vérifier vos
emails).
</em>
</p>
</div>
</div>
</div>
<div className='col-24'>
<form onSubmit={handleSubmit}>
<div className='form-group'>
<label className='form-label' htmlFor='name'>
Nom :
</label>
<input
value={inputState.name}
onChange={handleChange}
type='text'
name='name'
id='name'
className='form-control'
placeholder='Divlo'
/>
</div>
<div className='form-group'>
<label className='form-label' htmlFor='email'>
Email :
</label>
<input
value={inputState.email}
onChange={handleChange}
type='email'
name='email'
id='email'
className='form-control'
placeholder='email@gmail.com'
/>
</div>
<div className='form-group custom-control custom-switch'>
<input
onChange={event => handleChange(event, true)}
type='checkbox'
name='isPublicEmail'
checked={inputState.isPublicEmail}
className='custom-control-input'
id='isPublicEmail'
/>
<label
className='custom-control-label'
htmlFor='isPublicEmail'
>
Email Public
</label>
</div>
<div className='form-group'>
<label className='form-label' htmlFor='biography'>
Biographie :
</label>
<textarea
style={{ height: 'auto' }}
value={inputState.biography}
onChange={handleChange}
name='biography'
id='biography'
className='form-control'
rows='5'
/>
</div>
<div className='form-group'>
<label className='form-label' htmlFor='logo'>
Logo <em>(400x400 recommandé)</em> :
</label>
<p style={{ margin: 0 }}>
<em>
Si aucun fichier est choisi, le logo ne sera pas
modifié.
</em>
</p>
<input
onChange={handleChange}
accept='image/jpeg,image/jpg,image/png,image/gif'
type='file'
name='logo'
id='logo'
/>
</div>
<div className='form-group text-center'>
<button type='submit' className='btn btn-dark'>
Sauvegarder
</button>
</div>
</form>
<div className='form-result text-center'>
{isLoading ? <Loader /> : htmlParser(message)}
</div>
</div>
</div>
</div>
</Modal>
)
: (
<div className='container-fluid Profile__container'>
<div className='row Profile__row'>
<div className='col-20'>
<div className='text-center'>
<h1>
Profil de <span className='important'>{props.name}</span>
</h1>
</div>
<div className='row justify-content-center'>
<div className='col-24 text-center'>
<img
className='Profile__logo'
src={API_URL + props.logo}
alt={props.name}
/>
</div>
<div className='col-24 text-center'>
{props.biography != null && <p>{props.biography}</p>}
{props.email != null && (
<p>
<span className='important'>Email :</span> {props.email}
</p>
)}
<p>
<span className='important'>
Date de création du compte :
</span>{' '}
{date.format(
new Date(props.createdAt),
'DD/MM/YYYY à HH:mm',
false
)}
</p>
</div>
{isAuth && user.name === props.name && (
<button
onClick={toggleModal} onClick={toggleModal}
style={{ style={{ marginBottom: '25px' }}
cursor: 'pointer', className='btn btn-dark'
position: 'absolute',
left: 0
}}
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faTimes} icon={faPen}
style={{ width: '1.5rem', color: 'red' }} style={{ cursor: 'pointer', width: '1rem' }}
/> />
</span> &nbsp; Éditez le profil
<h2 className='text-center'>Éditer le profil</h2>
<p className='text-center'>
<em>
(Vous devrez vous reconnecter après la sauvegarde){' '}
<br /> Si vous changez votre adresse email, vous devrez
la confirmer comme à l'inscription (vérifier vos
emails).
</em>
</p>
</div>
</div>
</div>
<div className='col-24'>
<form onSubmit={handleSubmit}>
<div className='form-group'>
<label className='form-label' htmlFor='name'>
Nom :
</label>
<input
value={inputState.name}
onChange={handleChange}
type='text'
name='name'
id='name'
className='form-control'
placeholder='Divlo'
/>
</div>
<div className='form-group'>
<label className='form-label' htmlFor='email'>
Email :
</label>
<input
value={inputState.email}
onChange={handleChange}
type='email'
name='email'
id='email'
className='form-control'
placeholder='email@gmail.com'
/>
</div>
<div className='form-group custom-control custom-switch'>
<input
onChange={event => handleChange(event, true)}
type='checkbox'
name='isPublicEmail'
checked={inputState.isPublicEmail}
className='custom-control-input'
id='isPublicEmail'
/>
<label
className='custom-control-label'
htmlFor='isPublicEmail'
>
Email Public
</label>
</div>
<div className='form-group'>
<label className='form-label' htmlFor='biography'>
Biographie :
</label>
<textarea
style={{ height: 'auto' }}
value={inputState.biography}
onChange={handleChange}
name='biography'
id='biography'
className='form-control'
rows='5'
/>
</div>
<div className='form-group'>
<label className='form-label' htmlFor='logo'>
Logo <em>(400x400 recommandé)</em> :
</label>
<p style={{ margin: 0 }}>
<em>
Si aucun fichier est choisi, le logo ne sera pas
modifié.
</em>
</p>
<input
onChange={handleChange}
accept='image/jpeg,image/jpg,image/png,image/gif'
type='file'
name='logo'
id='logo'
/>
</div>
<div className='form-group text-center'>
<button type='submit' className='btn btn-dark'>
Sauvegarder
</button> </button>
</div> )}
</form>
<div className='form-result text-center'>
{isLoading ? <Loader /> : htmlParser(message)}
</div> </div>
</div> </div>
</div> </div>
</div>
</Modal> {props.favoritesArray.length > 0 && (
) : (
<div className='container-fluid Profile__container'>
<div className='row Profile__row'>
<div className='col-20'>
<div className='text-center'>
<h1>
Profil de <span className='important'>{props.name}</span>
</h1>
</div>
<div className='row justify-content-center'> <div className='row justify-content-center'>
<div className='col-24 text-center'> <div className='col-24 text-center'>
<img <h2>
className='Profile__logo' Dernières fonctions ajoutées aux{' '}
src={API_URL + props.logo} <span className='important'>favoris</span> :
alt={props.name} </h2>
/>
</div> </div>
<div className='col-24'>
<div className='row justify-content-center'>
{props.favoritesArray.map(favorite => {
return <FunctionCard key={favorite.id} {...favorite} />
})}
</div>
</div>
</div>
)}
{props.commentsArray.length > 0 && (
<div className='row justify-content-center'>
<div className='col-24 text-center'> <div className='col-24 text-center'>
{props.biography != null && <p>{props.biography}</p>} <h2>
{props.email != null && ( Derniers <span className='important'>commentaires</span> :
<p> </h2>
<span className='important'>Email :</span> {props.email}
</p>
)}
<p>
<span className='important'>
Date de création du compte :
</span>{' '}
{date.format(
new Date(props.createdAt),
'DD/MM/YYYY à HH:mm',
false
)}
</p>
</div> </div>
<div className='col-24'>
{isAuth && user.name === props.name && ( {props.commentsArray.map(comment => (
<button <div
onClick={toggleModal} key={comment.id}
style={{ marginBottom: '25px' }} className='row Profile__row Profile__comment'
className='btn btn-dark' >
> <div className='col-20'>
<FontAwesomeIcon <p style={{ textAlign: 'center', marginTop: '30px' }}>
icon={faPen} Posté sur la fonction&nbsp;
style={{ cursor: 'pointer', width: '1rem' }} <Link
/> href={
&nbsp; Éditez le profil
</button>
)}
</div>
</div>
</div>
{props.favoritesArray.length > 0 && (
<div className='row justify-content-center'>
<div className='col-24 text-center'>
<h2>
Dernières fonctions ajoutées aux{' '}
<span className='important'>favoris</span> :
</h2>
</div>
<div className='col-24'>
<div className='row justify-content-center'>
{props.favoritesArray.map(favorite => {
return <FunctionCard key={favorite.id} {...favorite} />
})}
</div>
</div>
</div>
)}
{props.commentsArray.length > 0 && (
<div className='row justify-content-center'>
<div className='col-24 text-center'>
<h2>
Derniers <span className='important'>commentaires</span> :
</h2>
</div>
<div className='col-24'>
{props.commentsArray.map(comment => (
<div
key={comment.id}
className='row Profile__row Profile__comment'
>
<div className='col-20'>
<p style={{ textAlign: 'center', marginTop: '30px' }}>
Posté sur la fonction&nbsp;
<Link
href={
comment.function.type === 'form' || comment.function.type === 'form' ||
comment.function.type === 'article' comment.function.type === 'article'
? '/functions/[slug]' ? '/functions/[slug]'
: `/functions/${comment.function.slug}` : `/functions/${comment.function.slug}`
} }
as={`/functions/${comment.function.slug}`} as={`/functions/${comment.function.slug}`}
> >
<a>{comment.function.title}</a> <a>{comment.function.title}</a>
</Link> </Link>
&nbsp;le{' '} &nbsp;le{' '}
{date.format( {date.format(
new Date(comment.createdAt), new Date(comment.createdAt),
'DD/MM/YYYY à HH:mm', 'DD/MM/YYYY à HH:mm',
false false
)} )}
</p> </p>
<ReactMarkdown <ReactMarkdown
source={comment.message} source={comment.message}
renderers={{ code: CodeBlock }} renderers={{ code: CodeBlock }}
/> />
</div>
</div> </div>
</div> ))}
))} </div>
</div> </div>
</div> )}
)}
{props.quotesArray.length > 0 && ( {props.quotesArray.length > 0 && (
<div className='row justify-content-center'> <div className='row justify-content-center'>
<div className='col-24 text-center'> <div className='col-24 text-center'>
<h2> <h2>
Dernières <span className='important'>citations</span>{' '} Dernières <span className='important'>citations</span>{' '}
proposées (et validées) : proposées (et validées) :
</h2> </h2>
<p> <p>
Citations pour la fonction{' '} Citations pour la fonction{' '}
<Link href='/functions/randomQuote'> <Link href='/functions/randomQuote'>
<a>Générateur de citations</a> <a>Générateur de citations</a>
</Link> </Link>
. .
</p> </p>
</div>
<div className='col-24 table-column'>
<table style={{ marginBottom: '50px' }}>
<thead>
<tr>
<th className='table-row' scope='col'>
Citation/Proverbe
</th>
<th className='table-row' scope='col'>
Auteur
</th>
</tr>
</thead>
<tbody>
{props.quotesArray.map((currentQuote, index) => {
return (
<tr key={index}>
<td className='table-row text-center'>
{currentQuote.quote}
</td>
<td className='table-row text-center'>
{currentQuote.author}
</td>
</tr>
)
})}
</tbody>
</table>
</div>
</div> </div>
<div className='col-24 table-column'> )}
<table style={{ marginBottom: '50px' }}> </div>
<thead>
<tr>
<th className='table-row' scope='col'>
Citation/Proverbe
</th>
<th className='table-row' scope='col'>
Auteur
</th>
</tr>
</thead>
<tbody>
{props.quotesArray.map((currentQuote, index) => {
return (
<tr key={index}>
<td className='table-row text-center'>
{currentQuote.quote}
</td>
<td className='table-row text-center'>
{currentQuote.author}
</td>
</tr>
)
})}
</tbody>
</table>
</div>
</div>
)} )}
</div>
)}
</> </>
) )
} }

16
website/utils/api.js
View File

@ -2,11 +2,15 @@ import axios from 'axios'
export const API_URL = process.env.NEXT_PUBLIC_API_URL export const API_URL = process.env.NEXT_PUBLIC_API_URL
const api = axios.create({ const api = (() => {
baseURL: API_URL, const baseURL =
headers: { typeof window === 'undefined' ? process.env.CONTAINER_API_URL : API_URL
'Content-Type': 'application/json' return axios.create({
} baseURL,
}) headers: {
'Content-Type': 'application/json'
}
})
})()
export default api export default api