Kristiina's app

App.js

@@ -1,5 +1,15 @@
 import React from 'react';
+import { Provider } from 'react-redux';
+import { combineReducers, configureStore } from '@reduxjs/toolkit'
+import { quotes } from './reducers/quotes';
 import styled from 'styled-components/native';
+import ButtonApi from './components/ButtonApi';
+import { YourQuotes } from './components/YourQuotes';
+// import ShakeApi from	'./components/ShakeApi';
+import { Button, View } from 'react-native';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { NavigationContainer } from '@react-navigation/native';
+
 
 const Container = styled.View`
 	flex: 1;
@@ -13,13 +23,27 @@ const Title = styled.Text`
 	color: palevioletred;
 `;
 
+const reducer = combineReducers({
+  quotes: quotes.reducer
+})
+
+const store = configureStore({reducer})
+
+
+const Drawer = createDrawerNavigator();
+
+
 const App = () => {
+
 	return (
-		<Container>
-			<Title>This is your cool app!</Title>
-			<Title>Go to App.js and start coding</Title>
-			<Title>💅💅💅</Title>
-		</Container>
+    <Provider store={store}>
+      <NavigationContainer>
+      <Drawer.Navigator initialRouteName="Button">
+        <Drawer.Screen name="Quote Generator" component={ButtonApi} />
+        <Drawer.Screen name="Your Quotes" component={YourQuotes} /> 
+      </Drawer.Navigator>
+      </NavigationContainer>
+    </Provider>
 	);
 };
 

components/ButtonApi.js

@@ -0,0 +1,100 @@
+import React, {useState, useEffect} from "react";
+import { Text, TouchableOpacity } from "react-native";
+import styled from "styled-components/native";
+import { useDispatch, useSelector } from "react-redux";
+import {quotes} from '../reducers/quotes'
+import {Share} from 'react-native'
+
+
+
+const APIButton = styled.TouchableOpacity`
+        font-weight: 900;
+        width: 40%;
+        max-width: 200px;
+        background-color: tomato;
+        margin-bottom: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50px;
+        padding: 5px;
+        font-size: 16px;
+    `;
+
+
+const ScreenContainer = styled.View`
+    background-color: black;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+`
+
+const Quote = styled.Text`
+    font-size: 20px;
+    color: #fff;
+`
+const Author = styled.Text`
+    font-style: italic;
+    color: #fff;
+    margin-bottom: 20px;
+`
+
+const ButtonApi = ()=> {
+
+    const [quote, setQuote] = useState({})
+    const yourQuotes = useSelector(store=>store.quotes.items)
+    const [content, setContent] = useState('')
+    console.log('yourQuotes', yourQuotes)
+    console.log('quote', quote)
+
+
+    const generateQuote = () => {
+        fetch("https://api.quotable.io/random")
+        .then(response => response.json())
+        .then(data => setQuote(data))
+    };
+
+    useEffect(()=> {
+        generateQuote();
+    }, []);
+
+    const dispatch = useDispatch()
+    const addQuote = () => {
+        if(content !== quote.content){
+            dispatch(quotes.actions.addQuote([quote._id, quote.content, quote.author]))
+        }
+        setContent(quote.content)
+    }
+
+    const onShare = async () => {
+        try {
+            await Share.share({
+            message:  quote.content + ' - ' + quote.author
+          });
+
+        } catch (error) {
+          alert(error.message);
+
+        }
+    }
+
+    return (
+        <ScreenContainer>
+            <Quote>"{quote.content}"</Quote>
+            <Author>-{quote.author}</Author>
+            <APIButton onPress={generateQuote}>
+                <Text>NEW QUOTE</Text>
+            </APIButton>
+            <APIButton onPress={addQuote}>
+                <Text>SAVE QUOTE</Text>
+            </APIButton>
+            <APIButton onPress={onShare}>
+                <Text>SHARE QUOTE</Text>
+            </APIButton>
+
+        </ScreenContainer>
+    )
+}
+
+export default ButtonApi;

components/YourQuotes.js

@@ -0,0 +1,105 @@
+import React, {useState, useEffect} from "react";
+import { View, Text, TouchableOpacity } from "react-native";
+import styled from "styled-components/native";
+import { useDispatch, useSelector } from "react-redux";
+import {quotes} from '../reducers/quotes'
+import { Share } from "react-native";
+
+const ScreenContainer = styled.View`
+    background-color: black;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    min-height: 100%;
+`
+const Article = styled.View`
+    justify-content: center;
+    align-items: center;
+    width:100%;
+    padding-bottom: 50px;
+`
+const Quote = styled.Text`
+    font-size: 20px;
+    color: #fff;
+`
+const Author = styled.Text`
+    font-style: italic;
+    color: #fff;
+    margin-bottom: 20px;
+`
+
+const APIButton = styled.TouchableOpacity`
+        font-weight: 900;
+        width: 30%;
+        max-width: 100px;
+        background-color: tomato;
+        margin-bottom: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50px;
+        padding: 5px;
+        margin:5px;
+        font-size: 16px;
+
+`
+const Buttons = styled.View`
+    display:flex;
+    flex-direction:row;
+    justify-content:center;
+    width:100%;
+`
+
+export const YourQuotes = ()=> {
+
+    const yourQuotes = useSelector(store=>store.quotes.items)
+
+    console.log('yourQuotes', yourQuotes)
+    const onDeleteQuote = (id) => {
+        console.log('id', id)
+        dispatch(quotes.actions.deleteQuote(id))
+    }
+    const dispatch = useDispatch()
+
+    const onShare = async (id) => {
+        const findItem = yourQuotes.find(item => item.id === id);
+        console.log('findItem', findItem.quote)
+        try {
+            await Share.share({
+            message: findItem.quote + ' - ' + findItem.author
+          });
+
+        } catch (error) {
+          alert(error.message);
+
+        }
+    }
+
+    if (yourQuotes.length > 0){
+        return (
+            <ScreenContainer>
+                {yourQuotes.map((item, index)=>(
+                    <Article key={item.id}>
+                        <Quote>"{item.quote}"</Quote>
+                        <Author>-{item.author}</Author>
+                        <Buttons>
+                            <APIButton onPress={() =>onDeleteQuote(item.id)}>
+                                <Text>DELETE</Text>
+                            </APIButton>   
+                            <APIButton onPress={()=> onShare(item.id)}>
+                                <Text>SHARE</Text>
+                            </APIButton>
+                        </Buttons>
+                    </Article> 
+                ))}
+            </ScreenContainer>
+        )
+    }
+    return(
+        <ScreenContainer>
+            <Quote>NO SAVED QUOTES</Quote>
+        </ScreenContainer>
+    )
+
+}
+