add images for slider, file-loader config

trukhilio · Jul 26, 2017 · 24de985 · 24de985
1 parent f9de929
commit 24de985
Show file tree

Hide file tree

Showing 16 changed files with 56 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -1,8 +1,10 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
     <title>Memories_app</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 </head>
 <body>
     <script>

diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "css-loader": "0.23.1",
     "express": "4.13.4",
     "extract-text-webpack-plugin": "3.0.0",
+    "file-loader": "0.11.2",
     "isomorphic-style-loader": "3.0.0",
     "node-sass": "4.5.3",
     "npm-install-webpack-plugin": "2.0.2",

diff --git a/src/components/button.js → src/components/button/index.js b/src/components/button.js → src/components/button/index.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 
 import withStyles from 'isomorphic-style-loader/lib/withStyles';
-import s from '../styles/button.scss';
+import s from './styles.scss';
 
 export class Button extends Component{
     render(){

diff --git a/src/components/button/styles.scss b/src/components/button/styles.scss
@@ -0,0 +1,3 @@
+.btncolor {
+  color: blueviolet;
+}
diff --git a/src/components/image/index.js b/src/components/image/index.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+
+import withStyles from 'isomorphic-style-loader/lib/withStyles';
+import s from './styles.scss';
+
+export class Image extends Component{
+    render(){
+        return(
+            <img
+                src={this.props.src}
+                alt="image here"/>
+        )
+    }
+}
+
+export default withStyles(s)(Image);
diff --git a/src/components/image/styles.scss b/src/components/image/styles.scss
diff --git a/src/components/page.js → src/components/page/page.js b/src/components/page.js → src/components/page/page.js
@@ -1,6 +1,7 @@
 import React, { PropTypes, Component } from 'react';
 
-import Button from './button';
+import Button from '../button/index';
+import Image from '../image/index';
 
 export default class Page extends Component {
 
@@ -21,12 +22,9 @@ export default class Page extends Component {
                 {buttonArr.map((item, index) =>
                     <Button key={index} title={item} onClick={e => {e.preventDefault();filterPhotos(item)}}/>)}
                 {photos.map((entry, index) =>
-                <div key={index}>
-                    <img src={entry.source}
-                         width="300"
-                         height="auto"
-                    />
-                </div>)}
+                    <div key={index}>
+                        <Image src={entry.source} />
+                    </div>)}
             </div>;
         return (
             <div>

diff --git a/src/components/user/styles.scss b/src/components/user/styles.scss
@@ -0,0 +1,3 @@
+.user__appName{
+  color: palevioletred;
+}
diff --git a/src/components/user.js → src/components/user/user.js b/src/components/user.js → src/components/user/user.js
@@ -1,27 +1,39 @@
 import React, { PropTypes, Component } from 'react';
 
-import Button from './button';
+import Button from '../button/index';
+import Image from '../image/index';
+import s from './styles.scss';
+
+const pathToImages = require.context('../../picture/slider', true);
 
 export default class User extends Component {
     render(){
         const { content, error } = this.props;
+        const srcImage = pathToImages.keys().map(pathToImages);
         let template;
         if (content){
             template =
                 <div>
                     <p>
                         Welcome, {content.username}!
                     </p>
-                    <img src={content.avatar} />
+                    <Image src={content.avatar} />
                     <Button title="Say goodbye!" onClick={this.props.handleLogout}/>
                 </div>
         } else {
             template =
                 <div>
+                    {srcImage.map((item, index)=>
+                        <div key={index}>
+                            <Image src={item} />
+                        </div>)}
+                    <h2 className={s.user__appName}>
+                        memories
+                    </h2>
                     <p>
-                        Hello, stranger! Welcome to memories app, press Login button for enter the app. App is using facebook account.
+                        Hello my friend! Welcome to memories app, press Login button for enter the app. App is using facebook account.
                     </p>
-                    <Button title="Login" onClick={this.props.handleLogin}/>
+                    <Button title="Login via Facebook" onClick={this.props.handleLogin}/>
                 </div>
         }
         return (

diff --git a/src/containers/app.js b/src/containers/app.js
@@ -2,8 +2,8 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
-import User from '../components/user';
-import Page from '../components/page';
+import User from '../components/user/user';
+import Page from '../components/page/page';
 import * as pageActions from '../actions/pageAction';
 import * as userActions from '../actions/userAction';
 

diff --git a/src/picture/slider/photo_one.jpg b/src/picture/slider/photo_one.jpg
diff --git a/src/picture/slider/photo_three.jpg b/src/picture/slider/photo_three.jpg
diff --git a/src/picture/slider/photo_two.jpg b/src/picture/slider/photo_two.jpg
diff --git a/src/styles/button.scss b/src/styles/button.scss
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -1,6 +1,7 @@
 body {
-    background-color: lightgoldenrodyellow;
+    margin: 0 auto;
 }
 
 
 
+
diff --git a/webpack.config.js b/webpack.config.js
@@ -40,6 +40,10 @@ module.exports = {
                     'css-loader?modules&localIdentName=[name]_[local]_[hash:base64:3]',
                     'postcss-loader'
                 ]
+            },
+            {
+                test: /\.(png|jpe?g|gif)$/,
+                loader: "file-loader?name=img/img-[hash:6].[ext]"
             }
         ]
     },