From 3a9157b9df856286f19bcef9612e798681ce1b3d Mon Sep 17 00:00:00 2001 From: Eli Jose Carrasquero Date: Sun, 8 Dec 2019 01:47:38 -0300 Subject: [PATCH] Listing Screen (Hardcoded) Shrink elements --- src/components/Badge/index.js | 10 ++ src/components/Badge/styles.js | 17 +++ src/components/JobCard/index.js | 66 +++++++++++ src/components/JobCard/styles.js | 76 +++++++++++++ src/navigation/index.js | 2 +- src/navigation/search.stack.js | 6 +- src/screens/Listing/index.js | 184 ++++++++++++++++++++++++++++++- src/screens/Listing/styles.js | 15 +++ src/screens/Search/index.js | 7 +- src/theme/colors.js | 15 ++- 10 files changed, 383 insertions(+), 15 deletions(-) create mode 100644 src/components/Badge/index.js create mode 100644 src/components/Badge/styles.js create mode 100644 src/components/JobCard/index.js create mode 100644 src/components/JobCard/styles.js diff --git a/src/components/Badge/index.js b/src/components/Badge/index.js new file mode 100644 index 0000000..baa0235 --- /dev/null +++ b/src/components/Badge/index.js @@ -0,0 +1,10 @@ +import React from 'react'; +import { BadgeContainer, Content } from './styles'; + +export const Badge = ({ children, ...props }) => { + return ( + + {children} + + ); +}; diff --git a/src/components/Badge/styles.js b/src/components/Badge/styles.js new file mode 100644 index 0000000..b5d22d1 --- /dev/null +++ b/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; +`; diff --git a/src/components/JobCard/index.js b/src/components/JobCard/index.js new file mode 100644 index 0000000..0d4e2ef --- /dev/null +++ b/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 ( + + + + {title} + + + {CompanyLogoUrl && ( + + )} + + + + + + {IsRemote && ( + + Remoto + + )} + + + {CompanyName} + + + + + {Location} + + + + + {JobType} + + + + ); +}; diff --git a/src/components/JobCard/styles.js b/src/components/JobCard/styles.js new file mode 100644 index 0000000..1adc23d --- /dev/null +++ b/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; +`; diff --git a/src/navigation/index.js b/src/navigation/index.js index 57dd054..1ca321b 100644 --- a/src/navigation/index.js +++ b/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, diff --git a/src/navigation/search.stack.js b/src/navigation/search.stack.js index f123dff..07c2052 100644 --- a/src/navigation/search.stack.js +++ b/src/navigation/search.stack.js @@ -13,12 +13,12 @@ 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%', diff --git a/src/screens/Listing/index.js b/src/screens/Listing/index.js index 1a9666a..595bcf2 100644 --- a/src/screens/Listing/index.js +++ b/src/screens/Listing/index.js @@ -1,14 +1,186 @@ import React from 'react'; -import { KeyboardAvoidingView, Text } from 'react-native'; -import { useNavigationParam } from 'react-navigation-hooks'; +import { Container } from '../../components/Container'; +import { JobCard } from '../../components/JobCard'; +import { ResultsTitle, SearchResult } from './styles'; + +export const results = [ + { + Link: '1339', + CompanyName: 'Encore', + Title: '1 Quality Assurance Lead y 2 Quality Assurance', + JobType: 'Tiempo Completo', + Location: 'Santo Domingo, RD', + PublishedDate: '2019-12-06T15:30:18.223', + IsRemote: false, + ViewCount: 32, + Likes: 0, + CompanyLogoUrl: null, + Description: + "

\r\n\r\n

Bachelor's degree Systems Engineer, Software Development or Software Technologist. Minimum of one year of work-related experience, knowledge of software development languages (like Java, C#.Net, others). Knowledge of Selenium web driver. Knowledge of complete Software Development Life Cycle (SDLC). Database knowledge to work and create testing scenarios (Like MySQL, SQL, Server, others).

Maine functions are: create detailed comprehensive and well-structured test plans and test cases based on specifications and organization needs, test the program codes, working closely with analysts, designers and developers to understand every possible scenario and support with improvement suggestions. Reviewing current system functionality for possible missed scenarios. Testing the product in a controlled environment, real situations before moving to production.

\r\n\r\n

", + HowToApply: + '

\r\n\r\nSend your updated resume by email. Write "Quality Assurance" as a title.\r\n\r\n

', + }, + { + Link: '1338', + CompanyName: 'Soluciones GBH', + Title: 'Software QA, Mid', + JobType: 'Tiempo Completo', + Location: 'Santo Domingo, RD', + PublishedDate: '2019-12-06T14:36:34.687', + IsRemote: false, + ViewCount: 28, + Likes: 0, + CompanyLogoUrl: + 'https://gbh.com.do/wp-content/uploads/2015/04/gbh-icon.png', + Description: + '

\r\n\r\n

Description 

GBH is looking for an experienced Software Quality Assurance – Mid to plan, design, execute and automate tests. We have Agile and waterfall teams so previous experience working in a QA Team in these framework(s) is a must. The Individual chosen for this position should be a hands-on Software QA Analyst with proven technical and analytical skills. If you enjoy a highly collaborative environment, then this position might be for you!

Responsibilities  

  1. Participate in the whole software development life cycle by reviewing documentation and making sure they meet good quality standards.
  2. Conduct analysis of documentation and technical specifications for any application under deployment or consideration to determine its intended functionality
  3. Plan tests based on formal and informal documentation by creating well-structured Test Plans.
  4. Design tests by creating well detailed Test Cases and Test Scripts.
  5. Create more efficient regression testing efforts by automating manual tests.
  6. Execute manual tests for front-end and back-end working environments.
  7. Report defects, bugs and errors on any application under test.
  8. Follow up on reported issues during the bugs life cycle.
Requirements

Equal opportunities 

The selection process for this position ensures compliance with the principle of non-discrimination by sex, origin (including racial or ethnic), age, marital status, disability, religion or belief, political opinion, sexual orientation, union affiliation, social status and language.

Terms of recruitment 

', + HowToApply: + '

\r\n\r\nInterested candidates must send their CV clicking on the button (“Aplicar al puesto“) in our official site: https://gbh.com.do/empleos/#1-software-quality-assurance-mid\r\n\r\n

', + }, + { + Link: '1337', + CompanyName: 'Smile', + Title: 'Full stack developers (Python y Django)', + JobType: 'Voluntario', + Location: 'Santo Domingo, RD', + PublishedDate: '2019-12-05T21:13:49.95', + IsRemote: true, + ViewCount: 42, + Likes: 0, + CompanyLogoUrl: 'http://www.getsmilehelps.com/static/images/logo.png', + Description: + '

\r\n\r\n

We need several developers with the following skills:

\r\n\r\n

pay by equity and vesting, investigate these concepts before applying...

\r\n\r\n

\r\n\r\n

', + HowToApply: + '

\r\n\r\nSend your Curriculum vitae and WhatsApp number to

juniormontillaacosta@gmail.com
\r\n\r\n

', + }, + { + Link: '1336', + CompanyName: 'Scopic Software', + Title: 'Remote Financial Operations Analyst', + JobType: 'Independiente', + Location: 'Santo Domingo, RD', + PublishedDate: '2019-12-05T21:08:36.997', + IsRemote: true, + ViewCount: 11, + Likes: 0, + CompanyLogoUrl: + 'https://scopicsoftware.com/wp-content/uploads/2014/07/scopic-logo-v2-min2.png', + Description: + '

Join the\r\nworld’s largest virtual company!\r\n\r\n

Work\r\nfrom anywhere – Flexible hours – Training & travel opportunities

\r\n\r\n

 

\r\n\r\n

Scopic Software\r\nis seeking a skilled Remote Financial\r\nOperations Analyst to join our team of 250+ professionals in over 40 countries.\r\nThis is an\r\nideal position for motivated individuals looking for a diverse, fast-paced,\r\nfully remote environment.

\r\n\r\n

 

\r\n\r\n

Responsibilities:

\r\n\r\n

·        \r\nAssist the team in maintaining\r\nand monitoring the KPIs dashboard, ensuring the protection of data integrity

\r\n\r\n

·        \r\nGather and analyze data to\r\nprepare ad hoc financial and operational reports to assess business performance

\r\n\r\n

·        \r\nMonitor the company-wide budgeting\r\nprocess and assist in preparing monthly revenue forecasts

\r\n\r\n

·        \r\nProvide support services in the\r\nmonthly reports related to cost and profitability monitoring and advise on\r\noptimizing performance and profitability

\r\n\r\n

 

\r\n\r\n

At Scopic, we\r\nbelieve talent can be found in every corner of the globe, and you shouldn’t be\r\nlimited by location. Our employees work in nearly every time zone, from\r\nwhenever they feel most comfortable, and our software benefits from this\r\ndiversity of perspectives and expertise.

\r\n\r\n

 

\r\n\r\n

Grow Your\r\nSkills and Your Career, Fast

\r\n\r\n

We offer\r\ntraining opportunities to keep your skills sharp and encourage you to stay\r\nup-to-date with ever-evolving technologies. As your skills grow and you take on\r\nadditional responsibility, you will have opportunities to move up in the\r\ncompany. If you work hard and deliver quality results, you will do very well\r\nhere. Pay raises and promotions are completely merit-based, so your success is\r\nin your hands.

\r\n\r\n

 

\r\n\r\n

Become a\r\nValuable Part of a Small, Dynamic International Team

\r\n\r\n

Unlike huge\r\ntech corporations like Google and Microsoft, Scopic employees don’t get lost in\r\nbureaucracy or sidelined doing the same boring tasks day after day. Most\r\nprojects last six months to one year, so all team members have the opportunity\r\nto try their skills on a diverse range of applications. Scopic employees work\r\nindependently and are entrusted with considerable responsibility.

\r\n\r\n

 

\r\n\r\n

Contribute to\r\nMeaningful Applications for Clients Invested in Your Success

\r\n\r\n

All Scopic\r\nprojects involve working with challenging, innovative applications. The\r\napplications Scopic works on are the cornerstone of our clients’ businesses.\r\nClients and users will rely on you to ensure the delivery of quality software\r\nproducts.

\r\n\r\n

 

\r\n\r\n

Why Work With\r\nScopic Software?

\r\n\r\n\r\n\r\n

 

\r\n\r\n

Requirements:

\r\n\r\n

·        \r\n1+ year of full-time professional experience in Finance, Accounting or\r\nData Analytics

\r\n\r\n

·        \r\nStrong communication skills, both written and verbal

\r\n\r\n

·        \r\nAbility to be proactive, identify issues, and resolve tasks in a timely\r\nmanner

\r\n\r\n

·        \r\nExcellent attention to detail

\r\n\r\n

·        \r\nIndependent and disciplined

\r\n\r\n

·        \r\nKnowledge of the IT/software industry, preferred

\r\n\r\n

·        \r\nAdvanced written and spoken English

\r\n\r\n

·        \r\nBachelor\'s degree in Accounting, Business Administration, Finance,\r\nEconomics or a related field

\r\n\r\n

 

\r\n\r\n

Salary: Negotiable depending on skills and\r\nexperience.

\r\n\r\n

 

\r\n\r\n

Please apply\r\nonline:  \r\nhttps://scopicsoftware.recruiterbox.com/jobs/fk03cg5?source=Emplea%20DO\r\n\r\n

\r\n\r\n

 

\r\n\r\n

Have questions about this position? Contact us at jobs@scopicsoftware.com.

\r\n\r\n

 

\r\n\r\n

About Scopic\r\nSoftware

\r\n\r\n

Scopic\r\nSoftware is the world’s largest virtual company. Founded in 2006, we have grown\r\nconsistently by delivering innovative, cutting-edge software and marketing\r\nservices to our clients and creating an empowering environment for our\r\nemployees.

\r\n\r\n

 

\r\n\r\n

We build and\r\nmarket advanced software for clients and users around the globe. With 10+ years\r\nin the industry and 1000+ projects under our belt, we’ve brought to life\r\nsoftware for Manufacturing, Media and Entertainment, Fintech, Healthcare, Food\r\nand Fitness, and Gaming. Check out our work on our portfolio: scopicsoftware.com/portfolio/.

\r\n\r\n

 Learn more\r\nabout career opportunities at Scopic: scopicsoftware.com/careers.

', + HowToApply: + '

Please apply\r\nonline: \r\nhttps://scopicsoftware.recruiterbox.com/jobs/fk03cg5?source=Emplea%20DO\r\n\r\n
\r\n\r\n

 

', + }, + { + Link: '1335', + CompanyName: 'INgenio Consulting', + Title: 'Desarrollador Web .Net', + JobType: 'Tiempo Completo', + Location: 'Santo Domingo, RD', + PublishedDate: '2019-12-05T19:58:29.877', + IsRemote: false, + ViewCount: 38, + Likes: 0, + CompanyLogoUrl: null, + Description: + '

\r\n\r\n

Descripción de la posición que se esta buscando es la siguiente:
 
Programador Web
Su función es la de desarrollar y crear interfaces web con alto rendimiento y una buena experiencia de usuarios.
 
habilidades técnicas
     1- Visual Studio .Net experiencia e ADO.net y .Net clasic
        C# (asp.net , css, html)
        Dominio de Linq
     2- JavaScript
     3- MS Transact-SQL
     4- Conocimientos en algún manejador de versiones (Preferiblemente SVN o Git).
 
Nota:
Si puede tener habilidades para el Diseño Web Mucho mejor:
     bootstrap
     html5
     css3
\r\n\r\n

', + HowToApply: + '

Interesados enviar su CV a ingenio.vacantes@gmail.com con el nombre de la vacante en el asunto.

', + }, + { + Link: '1334', + CompanyName: 'Soluciones GBH', + Title: 'Ingeniero de Software Senior', + JobType: 'Tiempo Completo', + Location: 'Santo Domingo, RD', + PublishedDate: '2019-12-05T18:37:19.96', + IsRemote: true, + ViewCount: 60, + Likes: 0, + CompanyLogoUrl: + 'https://gbh.com.do/wp-content/uploads/2015/04/gbh-icon.png', + Description: + '

\r\n\r\n

Requisitos

Tecnologías más comunes con las que trabajamos

En Soluciones GBH seguimos la filosofía P.L.A. – “Programming Language Agnostic”: nos encanta encontrar ingenieros especializados en ciertos lenguajes de programación, pero consideramos que lo más importante es el dominio de conceptos de arquitectura y algoritmos que sean eficaces para los productos que nuestros clientes requieren.

Entre las tecnologías más comunes que utilizamos en nuestros proyectos, podemos mencionar:

', + HowToApply: + '

\r\n\r\nLas personas interesadas en la presente convocatoria deberán llenar el formulario de aplicación haciendo click en el botón\r\n\r\n\r\n“Aplicar al puesto“ en nuestro portal de empleos: \r\n\r\nhttps://gbh.com.do/empleos/#1-ing-de-software-senior-us\r\n\r\n

(Aunque el texto siguiente indica por default que envíes tu CV a nuestro correo, solo las candidaturas enviadas por nuestro portal de empleo serán tomadas en cuenta).

', + }, + { + Link: '1333', + CompanyName: 'INgenio Consulting', + Title: 'Desarrollador Junior PHP', + JobType: 'Tiempo Completo', + Location: 'Santo Domingo, RD', + PublishedDate: '2019-12-05T17:51:16.727', + IsRemote: false, + ViewCount: 31, + Likes: 0, + CompanyLogoUrl: null, + Description: + '

\r\n\r\n

Profesional del área de tecnología, habilidades para manejos proyectos web.

Conocimientos de:

PHP, JavaScript, HTML5, CCS, ORACLE y JAVA Android.

Residente en Santo Domingo

Disponibilidad inmediata

\r\n\r\n

', + HowToApply: + '

Interesados enviar su CV a ingenio.vacantes@gmail.com con el nombre de la posición en el asunto

', + }, + { + Link: '1332', + CompanyName: 'Turinter, S.A.', + Title: 'programador web', + JobType: 'Independiente', + Location: 'Santo Domingo, RD', + PublishedDate: '2019-12-05T17:08:47.507', + IsRemote: true, + ViewCount: 63, + Likes: 2, + CompanyLogoUrl: null, + Description: '

Aplicación para celular REACT NATIVE o JAVA.

', + HowToApply: '

envie su perfil a c.alonso@turinter.com

', + }, + { + Link: '1331', + CompanyName: 'Turinter S.A.', + Title: 'programador', + JobType: 'Independiente', + Location: 'Santo Domingo, RD', + PublishedDate: '2019-12-05T17:04:04.27', + IsRemote: true, + ViewCount: 62, + Likes: 0, + CompanyLogoUrl: null, + Description: + '

Experiencia en Conexión XML a través de un protocolo SOAP para integración en\r\nuna base de datos MYSQL.      

', + HowToApply: + '

Enviar fille detallando trabajos de integraciones con carta de referencia  a:  c.alonso@turinter.com

\r\n\r\n

 

\r\n\r\n\r\n\r\n\r\n\r\n

', + }, + { + Link: '1330', + CompanyName: 'Wepsys SRL', + Title: 'Full Stack Developer', + JobType: 'Tiempo Completo', + Location: 'Santo Domingo, RD', + PublishedDate: '2019-12-04T19:49:21.597', + IsRemote: false, + ViewCount: 65, + Likes: 0, + CompanyLogoUrl: null, + Description: '

- FRONTEND DEVELOPER

- BACKEND DEVELOPER

', + HowToApply: + '

Enviar curriculum actualizado al correo rrhh@wepsys.com.do

', + }, +]; const ListingScreen = () => { - const query = useNavigationParam('query'); return ( - - Resultados de: {query} - + + + {results.length || 0} empleos disponibles + {results.map(job => { + return ; + })} + + ); }; +ListingScreen.navigationOptions = screenProps => ({ + title: screenProps.navigation.getParam('query'), +}); + export default ListingScreen; diff --git a/src/screens/Listing/styles.js b/src/screens/Listing/styles.js index e69de29..f6c0930 100644 --- a/src/screens/Listing/styles.js +++ b/src/screens/Listing/styles.js @@ -0,0 +1,15 @@ +import styled from 'styled-components'; + +export const SearchResult = styled.ScrollView` + flex-direction: column; + margin-top: 0px; + margin-right: -20px; + padding-right: 20px; +`; + +export const ResultsTitle = styled.Text` + font-size: 26px; + font-family: 'SFProDisplay-Bold'; + margin-top: 20px; + margin-bottom: 20px; +`; diff --git a/src/screens/Search/index.js b/src/screens/Search/index.js index 5d0fd2f..465d74d 100644 --- a/src/screens/Search/index.js +++ b/src/screens/Search/index.js @@ -37,7 +37,7 @@ const SearchScreen = () => { placeholder="Keywords" onChangeText={text => setQuery(text)} /> - + Buscar por categoría @@ -61,4 +61,9 @@ const SearchScreen = () => { ); }; +SearchScreen.navigationOptions = () => ({ + headerMode: 'none', + header: null, +}); + export default SearchScreen; diff --git a/src/theme/colors.js b/src/theme/colors.js index edb014f..73d5c77 100644 --- a/src/theme/colors.js +++ b/src/theme/colors.js @@ -1,9 +1,16 @@ export const defaultColors = { primary: '#13BAC3', secondary: '#94A1B2', - input: '#13bac3', - white: '#ffffff', background: '#f8f8f8', - cardBackground: '#fff', - gray: '#9eabba', + white: '#ffffff', + black: '#000000', + darkPink: '#EF476F', + darkSlateBlue: '#3D3D8C', + mediumSlateBlue: '#8075FF', + frenchBlue: '#0061C3', + spiroDiscoBall: '#32C5FF', + blue: '#119DA4', + mantis: '#74BE58', + mustard: '#FFC857', + atomicTangerine: '#FF9C57', };