move state strings to constants

Illu · Feb 25, 2019 · 10252d4 · 10252d4
1 parent ea19599
commit 10252d4
Show file tree

Hide file tree

Showing 14 changed files with 93 additions and 50 deletions.
diff --git a/README.md b/README.md
@@ -6,11 +6,9 @@ A simple way to stay up to date with upcoming space launches, built with [React-
 
 ## Preview
 
-<div  style="text-align:center">
-<img  src="https://maximenory.com/public/mw1.png"  width="240" />
-<img  src="https://maximenory.com/public/mw2.png"  width="240" />
-<img  src="https://maximenory.com/public/mw3.png"  width="240" />
-</div>
+<p align="center">
+  <img  src="https://maximenory.com/public/mwpreview.png" height="500"/>
+</p>
 
 ## Installation
 

diff --git a/src/Common/ScreenTitle.js b/src/Common/ScreenTitle.js
@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import styled from "styled-components";
+import { Animated, Text, Easing } from "react-native";
 
 const Wrapper = styled.View`
   padding: 0 25px;
@@ -14,23 +15,49 @@ const MainText = styled.Text`
   margin-top: 15px;
 `;
 
-const BackgroundText = styled.Text`
+const BackgroundText = styled(Animated.createAnimatedComponent(Text))`
   position: absolute;
   left: 25px;
   right: 0;
   top: -20px;
   font-size: 100px;
-  color: #aaaaaa11;
+  color: #aaaaaa;
   font-weight: bold;
 `;
 
 export default class extends Component {
+  state = {
+    AppearAnim: new Animated.Value(0)
+  };
+
+  componentDidMount() {
+    Animated.timing(this.state.AppearAnim, {
+      toValue: 1,
+      duration: 500,
+      easing: Easing.out(Easing.quad)
+    }).start();
+  }
+
   render() {
     const { title, noBackgroundText = false, style = {} } = this.props;
+    const { AppearAnim } = this.state;
+    const left = AppearAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [100, 25]
+    });
+    const opacity = AppearAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, 0.3]
+    });
+
     return (
       <Wrapper style={style}>
         {!noBackgroundText && (
-          <BackgroundText numberOfLines={1} ellipsizeMode="clip">
+          <BackgroundText
+            style={{ left, opacity }}
+            numberOfLines={1}
+            ellipsizeMode="clip"
+          >
             {title}
           </BackgroundText>
         )}

diff --git a/src/Common/Searchbar.js b/src/Common/Searchbar.js
@@ -11,6 +11,7 @@ const Wrapper = styled.View`
   color: white;
   background: white;
   flex-direction: row;
+  align-items: center;
 `;
 
 const StyledInput = styled.TextInput`

diff --git a/src/Common/__snapshots__/ScreenTitle.test.js.snap b/src/Common/__snapshots__/ScreenTitle.test.js.snap
@@ -20,18 +20,16 @@ exports[`screenTitle renders correctly 1`] = `
     ellipsizeMode="clip"
     numberOfLines={1}
     style={
-      Array [
-        Object {
-          "color": "#aaaaaa11",
-          "fontSize": 100,
-          "fontWeight": "bold",
-          "left": 25,
-          "position": "absolute",
-          "right": 0,
-          "top": -20,
-        },
-        undefined,
-      ]
+      Object {
+        "color": "#aaaaaa",
+        "fontSize": 100,
+        "fontWeight": "bold",
+        "left": 100,
+        "opacity": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": -20,
+      }
     }
   >
     My screen

diff --git a/src/Common/__snapshots__/Searchbar.test.js.snap b/src/Common/__snapshots__/Searchbar.test.js.snap
@@ -5,6 +5,7 @@ exports[`Searchbar renders correctly 1`] = `
   style={
     Array [
       Object {
+        "alignItems": "center",
         "backgroundColor": "white",
         "borderRadius": 40,
         "color": "white",

diff --git a/src/Components/DashboardScreen/DashboardScreen.js b/src/Components/DashboardScreen/DashboardScreen.js
@@ -9,6 +9,7 @@ import NextLaunchCard from "../NextLaunchCard";
 import ErrorCard from "../ErrorCard";
 import Loader from "../../Common/Loader";
 import CountdownCard from "../CountdownCard/CountdownCard";
+import { STATES } from "../../constants";
 
 const Wrapper = styled(ScreenBackground)`
   flex: 1;
@@ -45,17 +46,18 @@ class DashboardScreen extends Component {
       <Wrapper>
         <ScreenTitle title="Next launch" />
         <ContentWrapper>
-          {state === "loading" && this.props.launches.numberOfLaunches === 0 ? (
+          {state === STATES.LOADING &&
+          this.props.launches.numberOfLaunches === 0 ? (
             <Loader />
-          ) : state === "error" ? (
+          ) : state === STATES.ERROR ? (
             <ErrorCard onPress={() => this.loadUpcomingLaunch()} />
           ) : (
             data && (
               <ScrollView
                 contentContainerStyle={{ flex: 1 }}
                 refreshControl={
                   <RefreshControl
-                    refreshing={data.state === "loading"}
+                    refreshing={data.state === STATES.LOADING}
                     onRefresh={() => this.loadUpcomingLaunch()}
                     tintColor="#fff"
                   />

diff --git a/src/Components/LaunchCalendarScreen/LaunchCalendarScreen.js b/src/Components/LaunchCalendarScreen/LaunchCalendarScreen.js
@@ -9,6 +9,7 @@ import Loader from "../../Common/Loader";
 import ErrorCard from "../ErrorCard";
 import Button from "../../Common/Button";
 import PushableWrapper from "../../Common/PushableWrapper";
+import { STATES } from "../../constants";
 
 const Wrapper = styled(ScreenBackground)`
   flex: 1;
@@ -49,7 +50,7 @@ export default class extends Component {
     const data = this.props.launches;
     const showMoreEnabled = this.state.page < 5;
 
-    if (data.state === "error") {
+    if (data.state === STATES.ERROR) {
       return (
         <Wrapper>
           <ScreenTitle title="Launch Calendar" />
@@ -61,7 +62,7 @@ export default class extends Component {
     return (
       <Wrapper>
         <ScreenTitle title="Launch Calendar" />
-        {data.state === "loading" && data.numberOfLaunches < 5 ? (
+        {data.state === STATES.LOADING && data.numberOfLaunches < 5 ? (
           <Loader />
         ) : (
           <FlatList
@@ -75,20 +76,22 @@ export default class extends Component {
             ListFooterComponent={() => (
               <>
                 {showMoreEnabled &&
-                  (data.state === "loading" ? (
+                  (data.state === STATES.LOADING ? (
                     <ActivityIndicator size="large" />
                   ) : (
                     <LoadMoreButton
                       title="Load more"
                       onPress={this.loadMore}
-                      disabled={data.state === "loading"}
+                      disabled={data.state === STATES.LOADING}
                     />
                   ))}
               </>
             )}
             refreshControl={
               <RefreshControl
-                refreshing={data.state === "loading" && this.state.page === 0}
+                refreshing={
+                  data.state === STATES.LOADING && this.state.page === 0
+                }
                 onRefresh={this.refreshCalendar}
                 tintColor="#fff"
               />

diff --git a/src/Components/NewsScreen/NewsScreen.js b/src/Components/NewsScreen/NewsScreen.js
@@ -7,7 +7,7 @@ import { observer, inject } from "mobx-react";
 import NewsCard from "../NewsCard/NewsCard";
 import ErrorCard from "../ErrorCard";
 import Loader from "../../Common/Loader";
-import { MONTHS_FULL } from "../../constants";
+import { MONTHS_FULL, STATES } from "../../constants";
 
 const Wrapper = styled(ScreenBackground)`
   padding: 40px 0 0 0;
@@ -41,7 +41,7 @@ class NewsScreen extends Component {
     const dateTS = new Date();
     const date = `${MONTHS_FULL[dateTS.getMonth()]} ${dateTS.getDate()}`;
 
-    if (news.state === "error") {
+    if (news.state === STATES.ERROR) {
       return (
         <Wrapper>
           <ScreenTitle title="News" />
@@ -53,7 +53,7 @@ class NewsScreen extends Component {
     return (
       <Wrapper>
         <ScreenTitle title="News" />
-        {news.state === "loading" && news.numberOfArticles <= 0 ? (
+        {news.state === STATES.LOADING && news.numberOfArticles <= 0 ? (
           <Loader />
         ) : (
           <ScrollWrapper
@@ -64,7 +64,7 @@ class NewsScreen extends Component {
             }}
             refreshControl={
               <RefreshControl
-                refreshing={news.state === "loading"}
+                refreshing={news.state === STATES.LOADING}
                 onRefresh={this.loadNews}
                 tintColor="#fff"
               />

diff --git a/src/Components/SearchScreen/SearchScreen.js b/src/Components/SearchScreen/SearchScreen.js
@@ -7,6 +7,7 @@ import ScreenBackground from "../../Common/ScreenBackground";
 import Searchbar from "../../Common/Searchbar";
 import ResultCard from "./ResultCard";
 import Loader from "../../Common/Loader";
+import { STATES } from "../../constants";
 
 const Wrapper = styled(ScreenBackground)`
   flex: 1;
@@ -50,9 +51,9 @@ export default class SearchScreen extends Component {
         <ContentWrapper>
           <Searchbar launchSearch={str => searchLaunches(str)} />
           <ScrollWrapper contentContainerStyle={{ alignItems: "center" }}>
-            {state === "loading" && <Loader />}
+            {state === STATES.LOADING && <Loader />}
             {results.length >= 0 &&
-              state === "success" && (
+              state === STATES.SUCCESS && (
                 <>
                   <ResultCount>{totalResults || 0} results</ResultCount>
                   {results.map(data => (

diff --git a/src/Components/SettingsScreen/SettingsScreen.js b/src/Components/SettingsScreen/SettingsScreen.js
@@ -165,7 +165,7 @@ class SettingsScreen extends Component {
                 <SectionTitle>Version {version}</SectionTitle>
               )}
             </Section>
-            <Credits>2018 - Maxime Nory</Credits>
+            <Credits>2019 - Maxime Nory</Credits>
           </SectionsWrapper>
         </ContentWrapper>
       </Wrapper>

diff --git a/src/Models/LaunchesModel.js b/src/Models/LaunchesModel.js
@@ -2,6 +2,7 @@ import { observable, computed, action } from "mobx";
 import { PushNotificationIOS, AsyncStorage, Platform } from "react-native";
 import { API_URL } from "../../cfg";
 import PushNotification from "react-native-push-notification";
+import { STATES } from "../constants";
 
 storeData = async data => {
   try {
@@ -17,7 +18,7 @@ export default class LaunchesModel {
   nextLaunch = [];
 
   @observable
-  state = "idle";
+  state = STATES.IDLE;
 
   @observable
   notifications = {
@@ -114,29 +115,29 @@ export default class LaunchesModel {
 
   @action
   loadNextLaunches = numberOfLaunches => {
-    this.state = "loading";
+    this.state = STATES.LOADING;
     fetch(`${API_URL}next/${numberOfLaunches}`)
       .then(data => data.json())
       .then(data => {
         this.launches = data.launches;
-        this.state = "success";
+        this.state = STATES.SUCCESS;
       })
       .catch(err => {
-        this.state = "error";
+        this.state = STATES.ERROR;
       });
   };
 
   @action
   loadMoreLaunches = numberOfLaunches => {
-    this.state = "loading";
+    this.state = STATES.LOADING;
     fetch(`${API_URL}next/${numberOfLaunches}?offset=${this.launches.length}`)
       .then(data => data.json())
       .then(data => {
         this.launches = this.launches.concat(data.launches);
-        this.state = "success";
+        this.state = STATES.SUCCESS;
       })
       .catch(err => {
-        this.state = "error";
+        this.state = STATES.ERROR;
       });
   };
 }
diff --git a/src/Models/NewsModel.js b/src/Models/NewsModel.js
@@ -1,12 +1,13 @@
 import { observable, computed, action } from "mobx";
 import { NEWS_API_URL } from "../../cfg";
+import { STATES } from "../constants";
 
 export default class NewsModel {
   @observable
   articles = [];
 
   @observable
-  state = "idle"; // @TODO: use constant instead of strings
+  state = STATES.IDLE;
 
   @computed
   get numberOfArticles() {
@@ -15,15 +16,15 @@ export default class NewsModel {
 
   @action
   getNews = (numberOfArticles = 12) => {
-    this.state = "loading";
+    this.state = STATES.LOADING;
     fetch(`${NEWS_API_URL}/articles?limit=${numberOfArticles}`)
       .then(data => data.json())
       .then(data => {
         this.articles = data || [];
-        this.state = "success";
+        this.state = STATES.SUCCESS;
       })
       .catch(err => {
-        this.state = "error";
+        this.state = STATES.ERROR;
       });
   };
 }
diff --git a/src/Models/SearchModel.js b/src/Models/SearchModel.js
@@ -1,26 +1,29 @@
 import { observable, computed, action } from "mobx";
 import { API_URL } from "../../cfg";
+import { STATES } from "../constants";
 
 export default class SearchModel {
   @observable
   results = [];
+
   @observable
-  state = "idle";
+  state = STATES.IDLE;
+
   @observable
   totalResults = "";
 
   @action
   searchLaunches = str => {
-    this.state = "loading";
+    this.state = STATES.LOADING;
     fetch(`${API_URL}/${str}`)
       .then(data => data.json())
       .then(data => {
         this.results = data.launches || [];
         this.totalResults = data.total;
-        this.state = "success";
+        this.state = STATES.SUCCESS;
       })
       .catch(err => {
-        this.state = "error";
+        this.state = STATES.ERROR;
       });
   };
 }
diff --git a/src/constants.js b/src/constants.js
@@ -43,3 +43,10 @@ export const MONTHS_FULL = [
   "November",
   "December"
 ];
+
+export const STATES = {
+  IDLE: "idle",
+  LOADING: "loading",
+  SUCCESS: "success",
+  ERROR: "error"
+};