Merge pull request #6 from Astarosa/dev

Dev
Astarosa · Apr 30, 2020 · b44e6c4 · b44e6c4
2 parents 6ecad16 + 768e084
commit b44e6c4
Show file tree

Hide file tree

Showing 33 changed files with 571 additions and 63 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,17 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch Program",
+      "skipFiles": [
+        "<node_internals>/**"
+      ],
+      "program": "${file}"
+    }
+  ]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "axios": "^0.19.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",

diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="https://image.flaticon.com/icons/png/512/8/8913.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Evad'Art</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,13 +1,52 @@
 import React from 'react';
 import './Styles/App.css';
-import Home from './Pages/Home';
-
-function App() {
-  return (
-    <div className="App">
-      <Home />
-    </div>
-  );
+import Header from './Components/Header';
+import axios from 'axios';
+import PeriodsList from './Components/PeriodsList';
+
+class App extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      backgroundImageUrl: '',
+      isLoaded:false
+    };
+  }
+
+  getBackGroundImage = async () => {
+    const backgroundIndex = Math.round(Math.random() * 714);
+    const ids = await axios.get('https://collectionapi.metmuseum.org/public/collection/v1/search?q=a&departmentIds=9')
+      .then(res => res.data)
+      .then(data => data.objectIDs);
+
+    const url = await axios.get(`https://collectionapi.metmuseum.org/public/collection/v1/objects/${ids[backgroundIndex]}`)
+      .then(result => result.data)
+      .then(data => data.primaryImageSmall);
+    this.setState({ backgroundImageUrl: url, isLoaded: true });
+  }
+
+  componentDidMount () {
+    this.timerID = setInterval(() => {
+      this.getBackGroundImage();
+    }, 4000);
+    this.getBackGroundImage();
+  }
+
+  componentWillUnmount () {
+    clearInterval(this.timerID);
+  }
+
+  render () {
+    return (
+      <div className='App'>
+        <Header isLoaded={this.state.isLoaded} backgroundImageUrl={this.state.backgroundImageUrl} />
+        <h2 className='intro'>Au fil des époques, l'art s'est exprimé de différentes manières. S'il est difficile l'appréhender, rien n'est laissé au hasard. Pour voyager au sein du MetMuseum et découvrir l'art à différentes époques depuis votre canapé, suivez le guide !</h2>
+        <PeriodsList />
+        <h2 className='intro'>"L'histoire des artistes ne peut être racontée qu'une fois que sont devenues claires, après un certain laps de temps, l'influence que leur oeuvre a exercé sur d'autres et les contributions qu'ils ont faites à l'histoire de l'art en tant que telle"</h2>
+        <h3 className='author-quote'>Ernst Gombrich</h3>
+      </div>
+    );
+  }
 }
 
 export default App;
diff --git a/src/Components/Banner.js b/src/Components/Banner.js
diff --git a/src/Components/Button.js b/src/Components/Button.js
diff --git a/src/Components/Header.js b/src/Components/Header.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import '../Styles/Header.css';
+
+const Header = (props) => {
+  return (
+    <header className={props.isLoaded ? 'banner-background' : 'banner-background wait'} style={{ backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)), url(${props.backgroundImageUrl})` }}>
+      <h1>EVAD'ART</h1>
+      <h2>- Comprendre l'art au fil des époques -</h2>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/src/Components/Period.js b/src/Components/Period.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import '../Styles/Period.css';
+import GetPeriodObjects from '../Requests/GetPeriodObjects';
+
+// Ici class Period qui donne le squelette d'une periode affichée, avec les props title, date (remplacer le contneu du h3) plus le contenu
+
+class Period extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      open: false,
+      isLoaded: false,
+      periodObjects: []
+    };
+  }
+
+  handleOpen = async () => {
+    const open = !this.state.open;
+    this.setState({ open });
+    const periodObjects = await GetPeriodObjects(this.props.request, this.props.id);
+    console.log(periodObjects);
+    this.setState({ periodObjects, isLoaded: true });
+  }
+
+  render () {
+    return (
+      <div className='period-bloc-container'>
+        <div className={this.state.open ? 'period-bloc-banner opened' : 'period-bloc-banner closed'} style={{ backgroundImage: `linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)), url(${this.props.url})` }}>
+          <h2>{this.props.title}</h2>
+          <h3>{this.props.date}</h3>
+          <button onClick={this.handleOpen} className='open-content-container'>
+            <span className={this.state.open ? 'close-content' : 'open-content'} />
+          </button>
+        </div>
+        <div className={this.state.open ? 'period-bloc-content opened' : 'period-bloc-content closed'}>
+          <p className='period-content'>{this.props.content.text}</p>
+          <img className='period-illustration' src={this.props.content.illustration} alt={this.props.description} />
+          <p className='period-description'>{this.props.content.description}</p>
+          <div className='discover-object-container'>
+            <h4>Explorer des oeuvres de cette période</h4>
+            {this.state.isLoaded === false ? <div className='loading' />
+              : this.state.periodObjects.slice(0, 3).map(object => (
+                <div className='object-container' key={object.objectURL}>
+                  <a href={object.objectURL} target='_blank' rel='noopener noreferrer'><div className='object-image-container' style={{ backgroundImage: `url(${object.primaryImageSmall})` }} /></a>
+                  <h5>{object.title}</h5>
+                  <h6>{object.artistDisplayName !== '' ? object.artistDisplayName : 'artiste inconnu'}</h6>
+                </div>
+              ))}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Period;
diff --git a/src/Components/PeriodsList.js b/src/Components/PeriodsList.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import Period from './Period';
+import periods from '../Requests/periods';
+
+class PeriodsList extends React.Component {
+  render () {
+    return (
+      <div className='all-period-bloc-container'>
+        <div className='time-arrow' />
+        {periods.map(period => (
+          <Period key={period.id} title={period.title} date={period.date} content={period.content} url={period.url} request={period.request} id={period.id} />
+        ))}
+      </div>
+    );
+  }
+}
+
+export default PeriodsList;
diff --git a/src/Components/Timeline.js b/src/Components/Timeline.js
diff --git a/src/Images/art-antique.jpg b/src/Images/art-antique.jpg
diff --git a/src/Images/art-egyptien.jpg b/src/Images/art-egyptien.jpg
diff --git a/src/Images/art-medieval-illustration-1.jpg b/src/Images/art-medieval-illustration-1.jpg
diff --git a/src/Images/art-medieval.jpg b/src/Images/art-medieval.jpg
diff --git a/src/Images/art-moderne-illustration-1.jpg b/src/Images/art-moderne-illustration-1.jpg
diff --git a/src/Images/art-moderne.jpg b/src/Images/art-moderne.jpg
diff --git a/src/Images/loading-2.gif b/src/Images/loading-2.gif
diff --git a/src/Images/open-period.png b/src/Images/open-period.png
diff --git a/src/Images/violons_et_raisins.jpg b/src/Images/violons_et_raisins.jpg
diff --git a/src/Pages/Home.js b/src/Pages/Home.js
diff --git a/src/Requests/GetPeriodObjects.js b/src/Requests/GetPeriodObjects.js
@@ -0,0 +1,24 @@
+import axios from 'axios';
+
+const modernArtObjects = [488098, 488142, 485536, 490210];
+
+const GetPeriodObjects = async (q, deptId) => {
+  if (deptId === 9) {
+    const objectList = await Promise.all(modernArtObjects.map(objectId => {
+      return axios.get(`https://collectionapi.metmuseum.org/public/collection/v1/objects/${objectId}`)
+        .then(result => result.data);
+    }));
+    return objectList;
+  } else {
+    const objectIds = await axios.get(`https://collectionapi.metmuseum.org/public/collection/v1/search?q=${q}&departmentId=${deptId}`)
+      .then(res => res.data)
+      .then(data => data.objectIDs);
+    const objectList = await Promise.all(objectIds.map(objectId => {
+      return axios.get(`https://collectionapi.metmuseum.org/public/collection/v1/objects/${objectId}`)
+        .then(result => result.data);
+    }));
+    return objectList;
+  }
+};
+
+export default GetPeriodObjects;
diff --git a/src/Requests/periods.js b/src/Requests/periods.js
@@ -0,0 +1,67 @@
+import artEgyptien from '../Images/art-egyptien.jpg';
+import artGrecRomain from '../Images/art-antique.jpg';
+import artMedieval from '../Images/art-medieval.jpg';
+import artModerne from '../Images/art-moderne.jpg';
+import artMedievalIllustrationUne from '../Images/art-medieval-illustration-1.jpg';
+import artModerneIllustrationUne from '../Images/art-moderne-illustration-1.jpg';
+
+// Ici mettre un tableau en dur des periodes (periods) qu'on veut afficher, avec des objets {key=id:, title:, date:, content: }
+// Puis le composant PeriodList sous forme de fonction qui map periods, et qui pour chaque period , passe le composant
+// Period , en lui passant une key unique (l'id de la période,), le title la date, et le contenu.
+
+const periods = [
+  {
+    id: 10,
+    request: 'egypt',
+    title: 'Art Egyptien',
+    date: '3150 av. .J-C. - 150 av. .J-C.',
+    content:
+    {
+      text: "L'art Egyptien n'est pas \"primitif\" au sens des peintures rupestres. Si les bas-reliefs sont une représentation tronquée de la nature, c'est une volonté des Egyptiens. En effet, leur but n'est pas de faire une représentation exacte de la réalité, il est bien plus important d'en faire une représentation complète: la tête se voit mieux de profil, le torse de face, les bras et les jambes de profil, etc. Pour la première fois, on peut parler de \"style\".",
+      illustration: 'https://ekladata.com/3B7IUx3anXzGBOPMKFSpyuvXltE.jpg',
+      description: 'Le style Egyptien'
+    },
+    url: artEgyptien
+  },
+  {
+    id: 13,
+    request: 'sculpture',
+    title: 'Art Grec et Romain',
+    date: 'VIIème siècle av. .J-C. - Ier siècle ap. .J-C.',
+    content:
+    {
+      text: "L'art Grec apporte une grande nouveauté : le but n'est plus d'imiter avec la plus grande fidélité possible le style des anciens mais, pour chaque sculpteur, de décider par lui même comment il va représenter le corps, chacun reprenant les grands succès des autres : comment réussir un torse, réaliser que la statue est plus vivante si le pied est légèrement soulevé, remarquer qu'un léger sourire rend sympa. L'idée générale est : \"n'imitez pas, innovez\". On invente le raccourci.",
+      illustration: 'https://idata.over-blog.com/4/08/12/30/raccourci/Euthymides---detail2.JPG',
+      description: "L'invention du raccourci : un pied de profil et l'autre de face"
+    },
+    url: artGrecRomain
+  },
+  {
+    id: 17,
+    request: 'medieval',
+    title: 'Art Médiéval',
+    date: 'Vème siècle ap. .J-C. - XIIIème siècle ap. .J-C.',
+    content:
+    {
+      text: "Avec le christianisme, la question de la place des images dans la religion se pose de manière renouvelée. Si pour tous les premiers chrétiens, il ne doit pas y avoir de représentation dans les églises, le Pape Grégoire le Grand, au IVème siècle, inverse la tendance. D'après lui, les images peuvent avoir un rôle d'enseignement pour les fidèles ne sachant pas lire. Le but n'est donc plus de représenter la réalité mais d'aller à l'essentiel pour plus de clarté et, ainsi, mieux éduquer.",
+      illustration: artMedievalIllustrationUne,
+      description: 'Peu importe les proportions, le message doit être le plus clair possible'
+    },
+    url: artMedieval
+  },
+  {
+    id: 9,
+    request: 'abstract',
+    title: 'Art Moderne',
+    date: 'XXème siècle ap. .J-C.',
+    content:
+    {
+      text: "Faut il impérativement représenter une toile reconnaissable pour pouvoir exprimer ses sentiments.Le cap est franchit par le peintre russe Wassily Kandisky , pionnier de l'art abstrait connu également sous le nom d'art décoratif. Picasso lui emboîtera le pas en s'inspirant du fauvisme issu de l'impressionnisme de Monnet , comme peut l'illustrer son oeuvre intitulée violon et raisin.",
+      illustration: artModerneIllustrationUne,
+      description: 'Violon et raisins, Pablo Picasso, 1912'
+    },
+    url: artModerne
+  }
+];
+
+export default periods;
diff --git a/src/Styles/App.css b/src/Styles/App.css
@@ -1,5 +1,8 @@
 .App {
   text-align: center;
+  font-family:Montserrat;
+  margin:0 ;
+  padding: 0;
 }
 
 .App-logo {
@@ -35,4 +38,4 @@
   to {
     transform: rotate(360deg);
   }
-}
+}
diff --git a/src/Styles/Banner.css b/src/Styles/Banner.css
diff --git a/src/Styles/Button.css b/src/Styles/Button.css