Listing Screen (With data mockup) (#30)

* Fix Build

gradlew chmod

Regenerate android folder

APP_HOME

test move android folder

test

test

move android folder test

Move files to root

* Search Screen & Categories

* Listing Screen (Hardcoded)

Shrink elements

* remove old search

.prettierrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  bracketSpacing: true, 
+  bracketSpacing: true,
   jsxBracketSameLine: true,
   singleQuote: true,
   trailingComma: 'all',

android/app/src/main/AndroidManifest.xml

@@ -14,7 +14,7 @@
         android:name=".MainActivity"
         android:label="@string/app_name"
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
-         android:windowSoftInputMode="stateAlwaysHidden">
+        android:windowSoftInputMode="stateAlwaysHidden">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />

index.js

@@ -1,4 +1,4 @@
- import { AppRegistry } from 'react-native';
+import { AppRegistry } from 'react-native';
 import App from './src/App';
 import { name as appName } from './app.json';
 import axios from 'axios';

package.json

@@ -9,7 +9,7 @@
     "test": "jest",
     "lint": "eslint .",
     "pretty": "prettier --check 'src/**/*.js'",
-    "pretty:fix": "prettier --check 'src/**/*.js' --write" 
+    "pretty:fix": "prettier --check 'src/**/*.js' --write"
   },
   "dependencies": {
     "axios": "^0.19.0",

src/components/Badge/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BadgeContainer, Content } from './styles';
+
+export const Badge = ({ children, ...props }) => {
+  return (
+    <BadgeContainer {...props}>
+      <Content>{children}</Content>
+    </BadgeContainer>
+  );
+};

src/components/Badge/styles.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import theme from '../../theme';
+
+export const BadgeContainer = styled.TouchableOpacity`
+  border-radius: 4px;
+  padding: 2px 6px;
+  background-color: ${theme.colors.mediumSlateBlue};
+  align-self: flex-start;
+
+  ${props => props.primary && `background-color: ${theme.colors.primary};`};
+`;
+
+export const Content = styled.Text`
+  font-size: 12px;
+  font-family: 'SFProDisplay-Bold';
+  color: white;
+`;

src/components/JobCard/index.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { Badge } from '../Badge';
+import {
+  Card,
+  CategoryContainer,
+  Company,
+  CompanyContainer,
+  InfoContainer,
+  LocationText,
+  Logo,
+  LogoContainer,
+  RemoteContainer,
+  Row,
+  Title,
+  TitleContainer,
+} from './styles';
+
+export const JobCard = props => {
+  const {
+    Title: title,
+    CompanyName,
+    CompanyLogoUrl,
+    IsRemote,
+    JobType,
+    Location,
+  } = props;
+
+  return (
+    <Card>
+      <Row>
+        <TitleContainer logo={CompanyLogoUrl !== null}>
+          <Title>{title}</Title>
+        </TitleContainer>
+        <LogoContainer>
+          {CompanyLogoUrl && (
+            <Logo source={{ uri: CompanyLogoUrl }} resizeMode="contain" />
+          )}
+        </LogoContainer>
+      </Row>
+      <Row>
+        <InfoContainer>
+          <Row>
+            {IsRemote && (
+              <RemoteContainer>
+                <Badge primary>Remoto</Badge>
+              </RemoteContainer>
+            )}
+
+            <CompanyContainer>
+              <Company>{CompanyName}</Company>
+            </CompanyContainer>
+          </Row>
+          <Row>
+            <LocationText>
+              <Ionicons name="md-pin" size={14} /> {Location}
+            </LocationText>
+          </Row>
+        </InfoContainer>
+        <CategoryContainer>
+          <Badge>{JobType}</Badge>
+        </CategoryContainer>
+      </Row>
+    </Card>
+  );
+};

src/components/JobCard/styles.js

@@ -0,0 +1,76 @@
+import styled from 'styled-components';
+import theme from '../../theme';
+
+export const Card = styled.View`
+  padding: 6px;
+  background-color: white;
+  margin-bottom: 5px;
+  border-radius: 4px;
+`;
+
+/* Title */
+export const TitleContainer = styled.View`
+  flex: 5;
+  /* If the post has no logo, a little margin is added between the title and the information container. */
+  ${props => !props.logo && 'margin-bottom: 4px;'}
+`;
+
+export const Title = styled.Text`
+  font-size: 18px;
+  font-family: 'SFProDisplay-Medium';
+`;
+
+/* Logo */
+export const LogoContainer = styled.View`
+  flex: 0 1 auto;
+`;
+
+export const Logo = styled.Image`
+  width: 50px;
+  height: 50px;
+`;
+
+/* Info = Remote + Company + Location */
+export const InfoContainer = styled.View`
+  flex: 1 0 auto;
+`;
+
+/* Remote Badge */
+export const RemoteContainer = styled.View`
+  flex: 0 1 auto;
+  flex-flow: column wrap;
+  margin-right: 4px;
+`;
+
+/* Company */
+export const CompanyContainer = styled.View`
+  flex: 1 0 auto;
+  flex-flow: column wrap;
+`;
+
+export const Company = styled.Text`
+  font-size: 14px;
+  font-family: 'SFProDisplay-Medium';
+`;
+
+/* Location */
+export const LocationText = styled.Text`
+  margin-top: 2px;
+  font-family: 'SFProDisplay-Regular';
+  font-size: 14px;
+  color: ${theme.colors.secondary};
+  flex: 1;
+`;
+
+/* Category */
+export const CategoryContainer = styled.View`
+  flex-flow: column wrap;
+  flex: 0 1 auto;
+  align-self: flex-end;
+  flex-direction: row-reverse;
+`;
+
+export const Row = styled.View`
+  flex: 1 0 auto;
+  flex-flow: row wrap;
+`;

src/navigation/index.js

@@ -42,7 +42,7 @@ const App = createBottomTabNavigator(
     }),
     tabBarOptions: {
       activeTintColor: theme.colors.primary,
-      inactiveTintColor: theme.colors.gray,
+      inactiveTintColor: theme.colors.secondary,
       style: {
         borderTopWidth: 0,
         paddingBottom: 10,

src/navigation/search.stack.js

@@ -1,5 +1,5 @@
 import { createStackNavigator } from 'react-navigation-stack';
-import Search from '../screens/Search';
+import Search from '../screens/Search/index';
 import Listing from '../screens/Listing';
 
 import { SCREENS } from '../constants/screens';
@@ -13,12 +13,11 @@ export const SearchStack = createStackNavigator(
   {
     defaultNavigationOptions: {
       headerStyle: {
-        backgroundColor: theme.colors.primary,
+        backgroundColor: theme.colors.white,
       },
-      headerTintColor: theme.colors.white,
+      headerTintColor: theme.colors.black,
       title: SCREENS.Search.title,
     },
-    headerMode: 'none',
     cardStyle: {
       backgroundColor: theme.colors.background,
       height: '100%',