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

frontend: Preloader & 404 Error page

Browse Source
This commit is contained in:
Divlo
2020-03-21 23:03:30 +01:00
parent 3debd85a70
commit fd7fc44fe7
12 changed files with 98 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/pages/404.js Normal file
View File

@ -0,0 +1,29 @@
import { Fragment } from 'react';
import Link from 'next/link';
import HeadTag from '../components/HeadTag';
import '../public/css/pages/404.css';
const Error404 = () => (
<Fragment>
<HeadTag
title="Erreur 404"
description="Cette page n'existe pas!"
image="/images/error404.png"
/>
<div className="Error404__container">
<h1>Erreur <span className="important">404</span></h1>
<p className="text-center">
Cette page n'existe pas! <Link href={"/"}><a>Revenir à la page d'accueil ?</a></Link>
</p>
</div>
<style>
{`
#__next {
padding-top: 0;
}
`}
</style>
</Fragment>
);
export default Error404;

8
frontend/pages/_document.js
View File

@ -1,4 +1,5 @@
import Document, { Html, Head, Main, NextScript } from "next/document";
import Loader from '../components/Loader';
class MyDocument extends Document {
static async getInitialProps(ctx) {
@ -11,7 +12,12 @@ class MyDocument extends Document {
<Html lang="fr">
<Head />
<body>
<Main />
<div id="preloader">
<Loader />
</div>
<div className="isLoading">
<Main />
</div>
<NextScript />
</body>
</Html>

4
frontend/pages/functions.js
View File

@ -1,7 +1,7 @@
import { Fragment, useState, useEffect, useRef, useCallback } from 'react';
import HeadTag from '../components/HeadTag';
import FunctionCard from '../components/FunctionCard/FunctionCard';
import Loader from '../components/Loader/Loader';
import Loader from '../components/Loader';
import '../public/css/pages/functions.css';
import { API_URL } from '../config/config';
import api from '../config/api';
@ -91,7 +91,7 @@ const Functions = () => {
return <FunctionCard key={f.id} slug={f.slug} image={API_URL + f.image} title={f.title} description={f.description} category={f.categorie} publicationDate={new Date(f.createdAt).toLocaleDateString('fr-FR')} />;
})}
</div>
{isLoadingFunctions && <Loader width="100px" height="100px" />}
{isLoadingFunctions && <Loader />}
</div>
</Fragment>
);