twinscom · romant094 · Jan 29, 2019 · Jan 30, 2019 · Jan 31, 2019 · Jan 31, 2019
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
@@ -0,0 +1 @@
+Anton Romankov
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "zyfra-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "axios": "^0.18.0",
+    "react": "next",
+    "react-dom": "next",
+    "react-router-dom": "^4.3.1",
+    "react-scripts": "2.1.3",
+    "styled-components": "^4.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/img/25.gif b/public/img/25.gif
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+  <title>React App</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+</body>
+
+</html>
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import Activity from './components/activities';
+import { BrowserRouter as Router, Route, Link } from "react-router-dom";
+import styled from 'styled-components';
+import FilteredActivites from './components/filteredActivites';
+import GlobalStyle, {Container} from './components/commonData';
+
+const Nav = styled.nav`
+	background-color: #3F4045;
+`
+const Ul = styled.ul`
+	display: flex;
+	justify-content: center;
+`
+const Li = styled.li`
+	padding: 0 20px;
+	&:first-child{
+		padding-left: 0;
+	}
+	&:last-child{
+		padding-right: 0;
+	}
+	&:not(:last-child){
+		border-right: 1px dotted #F4F4F8;
+	}
+	a{
+		color: #F4F4F8;
+		transition: all .3s;
+		font-weight: 700;
+
+		&:hover{
+			color: #5BC0BE;
+		}
+	}
+`
+const Centered = styled.div`
+	text-align: center;
+`
+
+const App = () => (
+	<Router>
+		<>
+			<GlobalStyle />
+			<Nav>
+				<Container>
+					<Ul>
+						<Li>
+							<Link to="/">Random activity</Link>
+						</Li>
+						<Li>
+							<Link to="/filter/">Filtered activity</Link>
+						</Li>
+					</Ul>
+				</Container>
+			</Nav>
+			<main>
+				<Container>
+					<Centered>
+						<Route path="/" exact render={() => <Activity />} />
+						<Route path="/filter/" component={FilteredActivites} />
+					</Centered>
+				</Container>
+			</main>
+		</>
+	</Router>
+);
+
+export default App;
diff --git a/src/components/Activities.js b/src/components/Activities.js
@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import styled from 'styled-components';
+import { Button, Headline, ContainerInnerWrap, ActivityContent } from './commonData';
+import { BrowserRouter as Link } from "react-router-dom";
+
+const PreambulaText = styled.div`
+    line-height: 26px;
+    margin-bottom: 20px;
+    margin: 0 auto;
+    margin-bottom: 20px;
+`
+const Modal = styled.div`
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0,0,0,0.75);
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 10;
+
+    .modal{
+        padding: 20px;
+        background-color: #F4F4F8;
+        width: 335px;
+        height: 300px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        border-radius: 10px;
+
+        h3{
+            font-size: 20px;
+            font-weight: 700;
+        }
+
+        p{
+            line-height: 24px;
+        }
+
+        &-buttons{
+            display: flex;
+            justify-content: center;
+        }
+    }
+`
+function Activity() {
+    const [data, setData] = useState({});
+    let [clickCount, setClickCount] = useState(1);
+    let [modalOpened, setModalOpened] = useState(false);
+
+    async function getRandomActivity() {
+        const result = await axios(
+            'http://www.boredapi.com/api/activity/'
+        );
+        setData(result.data);
+        setClickCount(clickCount + 1);
+        if ((clickCount % 5) === 0) {
+            setModalOpened(true);
+        }
+    }
+    function modalClose() {
+        setModalOpened(false);
+
+    }
+
+    return (
+        <>
+            <ContainerInnerWrap>
+                <Headline>WhattodoApp</Headline>
+                <PreambulaText>{Object.keys(data).length === 0 ? `Don't know what to do? We'll help you! Just click the button and you'll see the possible variant for your vocation...` : `Don't like that? Click... ;-)`}</PreambulaText>
+                <Button onClick={getRandomActivity} style={{ marginBottom: '20px' }}>Random</Button>
+
+                <ActivityContent data={data} />
+            </ContainerInnerWrap>
+            <Modal className={modalOpened ? null : 'display-none'} id='modal' >
+                <div className="modal">
+                    <h3>You found {clickCount-1} activities</h3>
+                    <p>Still don't know what to choose? Maybe filters help you...</p>
+                    <div className="modal-buttons">
+                        <div className='col-1-of-2'>                            
+                            <button className='btn btn-small' onClick={modalClose}>Cancel</button>
+                        </div>  
+                        <div className="col-1-of-2">
+                            <Link to="/filter/" className='btn btn-small'>Try!</Link>
+                        </div>
+                    </div>
+                </div>
+            </Modal>
+        </>
+    )
+}
+
+export default Activity;