Sara Boström Bundock - Week 16- React Native app

App.js

@@ -4,15 +4,11 @@ import { SensorComponent } from "./components/SensorComponent";
 
 const Container = styled.View`
   flex: 1;
-  background-color: papayawhip;
+  background-color: #2C3D4F;
   justify-content: center;
-  align-items: center;
+
 `;
 
-const Title = styled.Text`
-  font-size: 24px;
-  color: palevioletred;
-`;
 
 const App = () => {
   return (
@@ -22,4 +18,4 @@ const App = () => {
   );
 };
 
-export default App;
+export default App;

README.md

@@ -1,13 +1,5 @@
 # Project React Native App 📱
 
-Replace this readme with your own information about your project.
-
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
 
 ## The problem
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
-
-## View it live
-
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.

components/SensorComponent.js

@@ -1,96 +1,89 @@
 import React, { useState, useEffect } from "react";
 import { Accelerometer } from "expo-sensors";
 import styled from "styled-components/native";
+import { View, Text, TouchableOpacity } from "react-native";
 
-// ==========================
-// = Functions
 const isShaking = (data) => {
-  // x,y,z CAN be negative, force is directional
-  // We take the absolute value and add them together
-  // This gives us the total combined force on the device
   const totalForce = Math.abs(data.x) + Math.abs(data.y) + Math.abs(data.z);
-
-  // If this force exceeds some threshold, return true, otherwise false
-  // Increase this threshold if you need your user to shake harder
   return totalForce > 1.78;
 };
 
-// ==========================
-// = Styled components
-const ShakeView = styled.View`
+const Container = styled.View`
   display: flex;
-  flex-direction: column;
+  text-align: center;
+  margin-bottom: 20px;
+  margin-left: 20px;
+  margin-right:20px;
 `;
 
-const ShakeAlert = styled.Text`
-  font-size: 36px;
-  font-weight: bold;
-  color: #aa0000;
-`;
-const ShakeDataView = styled.View``;
-const ShakeDataTitle = styled.Text`
-  font-weight: bold;
-`;
-const ShakeData = styled.Text``;
+
+const Button = styled.TouchableOpacity`
+display: flex;
+text-align: center;
+border: solid 2px; 
+width: 50%;
+border-radius:5px;
+padding:8px;
+margin-top: 60px;
+margin-left: 80px;
+box-shadow: 5px 5px #000;
+background-color: grey;
+`
+  ;
 
 export const SensorComponent = () => {
-  // This function determines how often our program reads the accelerometer data in milliseconds
-  // https://docs.expo.io/versions/latest/sdk/accelerometer/#accelerometersetupdateintervalintervalms
+  const [quote, setQuote] = useState({});
+
+  const generateQuote = () => {
+    fetch("https://api.quotable.io/random")
+      .then(response => response.json())
+      .then(data => setQuote(data))
+  }
+  useEffect(() => {
+    generateQuote();
+  }, [data]);
+
   Accelerometer.setUpdateInterval(400);
 
-  // The accelerometer returns three numbers (x,y,z) which represent the force currently applied to the device
   const [data, setData] = useState({
     x: 0,
     y: 0,
     z: 0,
   });
 
-  // This keeps track of whether we are listening to the Accelerometer data
   const [subscription, setSubscription] = useState(null);
 
   const _subscribe = () => {
-    // Save the subscription so we can stop using the accelerometer later
     setSubscription(
-      // This is what actually starts reading the data
+
       Accelerometer.addListener((accelerometerData) => {
-        // Whenever this function is called, we have received new data
-        // The frequency of this function is controlled by setUpdateInterval
+
         setData(accelerometerData);
       })
     );
   };
 
-  // This will tell the device to stop reading Accelerometer data.
-  // If we don't do this our device will become slow and drain a lot of battery
   const _unsubscribe = () => {
     subscription && subscription.remove();
     setSubscription(null);
   };
 
   useEffect(() => {
-    // Start listening to the data when this SensorComponent is active
     _subscribe();
-
-    // Stop listening to the data when we leave SensorComponent
     return () => _unsubscribe();
   }, []);
 
   return (
-    <ShakeView>
-      {/* 
-      If isShaking returns true:
-        - We could render conditionally
-        - Maybe we want to dispatch some redux event when device shakes?
-        - Maybe change some styled props? 
-      */}
-      {isShaking(data) && <ShakeAlert>Shaking</ShakeAlert>}
-      <ShakeDataView>
-        <ShakeDataTitle>Shake Data</ShakeDataTitle>
-        {/* toFixed(2) only shows two decimal places, otherwise it's quite a lot */}
-        <ShakeData>X: {data.x.toFixed(2)}</ShakeData>
-        <ShakeData>Y: {data.y.toFixed(2)}</ShakeData>
-        <ShakeData>Z: {data.z.toFixed(2)}</ShakeData>
-      </ShakeDataView>
-    </ShakeView>
+    <Container>
+      {isShaking(data) && generateQuote()}
+      <View>
+        <Text> {quote.content} </Text>
+        <Text> {quote.blank} </Text>
+        <Text> {quote.author} </Text>
+      </View>
+      <Button onPress={generateQuote}>
+        <Text>New quote</Text>
+      </Button>
+    </Container>
   );
 };