diff --git a/client/.babelrc b/client/.babelrc index 31e765c..1ad0898 100644 --- a/client/.babelrc +++ b/client/.babelrc @@ -47,6 +47,7 @@ "#redux": "./src/redux", "#resources": "./src/resources", "#rest": "./src/rest", + "#request": "./src/request", "#schema": "./src/schema", "#utils": "./src/utils", "#notify": "./src/notify", diff --git a/client/package.json b/client/package.json index 7c2ea12..6ce73f3 100644 --- a/client/package.json +++ b/client/package.json @@ -87,7 +87,7 @@ "identity-obj-proxy": "^3.0.0", "jest": "^22.4.3", "mini-css-extract-plugin": "^0.4.0", - "node-sass": "4.12.0", + "node-sass": "^4.14.1", "optimize-css-assets-webpack-plugin": "^4.0.1", "react-test-renderer": "^16.3.2", "sass-loader": "^7.3.1", @@ -105,7 +105,9 @@ "webpack-pwa-manifest": "^3.6.2" }, "dependencies": { + "@togglecorp/fujs": "^1.9.0", "@togglecorp/ravl": "^1.0.2", + "@togglecorp/react-rest-request": "^2.4.5", "body-parser": "^1.18.3", "d3-area-label": "^1.4.0", "d3-array": "^1.2.1", @@ -146,6 +148,7 @@ "react-focus-trap": "^2.5.0", "react-ga": "^2.5.0", "react-helmet": "^5.2.0", + "react-markdown": "^4.3.1", "react-redux": "^5.0.7", "react-resize-detector": "^2.3.0", "react-router-dom": "^4.2.2", diff --git a/client/src/constants/routes.js b/client/src/constants/routes.js index fe1d2be..6ff756b 100644 --- a/client/src/constants/routes.js +++ b/client/src/constants/routes.js @@ -18,6 +18,12 @@ export const routes = { path: '/', loader: () => import('../views/Home'), }, + career: { + order: 2, + type: ROUTE.public, + path: '/career/', + loader: () => import('../views/Career'), + }, }; export const pathNames = mapObjectToObject(routes, route => route.path); diff --git a/client/src/rest/index.js b/client/src/rest/index.js deleted file mode 100644 index 7bc3926..0000000 --- a/client/src/rest/index.js +++ /dev/null @@ -1,6 +0,0 @@ -import { wsEndpoint } from '#config/rest'; - -export const urlForMembers = `${wsEndpoint}/members/`; -export const urlForClients = `${wsEndpoint}/clients/`; -export const urlForServices = `${wsEndpoint}/services/`; -export const urlForTechnologySection = `${wsEndpoint}/technology-sections/`; diff --git a/client/src/schema/index.js b/client/src/schema/index.js index 415f591..36805ee 100644 --- a/client/src/schema/index.js +++ b/client/src/schema/index.js @@ -62,6 +62,7 @@ const userDefinedSchemas = []; name: { type: 'string', required: true }, image: { type: 'string', required: true }, designation: { type: 'string', required: true }, + hidden: { type: 'boolean' }, membersUrls: { type: 'array.memberUrl', required: true }, }, }; diff --git a/client/src/stylesheets/_base.scss b/client/src/stylesheets/_base.scss index 8fe7471..57d49fe 100644 --- a/client/src/stylesheets/_base.scss +++ b/client/src/stylesheets/_base.scss @@ -42,21 +42,12 @@ body { font-size: $font-size-default; font-weight: $font-weight-default; - a { - outline: none; - text-transform: uppercase; - text-decoration: none; - color: inherit; - } - h1, h2, h3, h4, h5 { margin: 0; - text-transform: uppercase; - font-weight: $font-weight-light; } } diff --git a/client/src/utils/Request.js b/client/src/utils/Request.js index b00e8bc..ea89cb1 100644 --- a/client/src/utils/Request.js +++ b/client/src/utils/Request.js @@ -1,97 +1,159 @@ -import { RestRequest } from '#rsu/rest'; +import { compose } from 'redux'; +import { + createRequestCoordinator, + createRequestClient, + methods, +} from '@togglecorp/react-rest-request'; + +import { sanitizeResponse } from '#utils/common'; +import { wsEndpoint } from '#config/rest'; import schema from '#schema'; -import { alterResponseErrorToFaramError } from '#rest'; -const requestNotCreatedForStartMessage = 'REQUEST: start() called before init()'; -// const requestNotCreatedForStopMessage = 'REQUEST: stop() called before init()'; -const validationNotDefinedMessage = 'REQUEST: Validation is not defined'; - -export default class Request { - constructor(parent, { delay = 50, retryTime = 1000, maxRetryAttempts = 5 } = {}) { - this.parent = parent; - - this.delay = delay; - - this.retryTime = retryTime; - this.maxRetryAttempts = maxRetryAttempts; - - this.schemaName = undefined; - } - - handleFatal = () => { - // console.warn(error); +export { methods, RequestHandler } from '@togglecorp/react-rest-request'; + +const getFormData = (jsonData) => { + const formData = new FormData(); + Object.keys(jsonData || {}).forEach( + (key) => { + const value = jsonData[key] || {}; + if (value.prop && value.prop.constructor === Array) { + value.forEach(v => formData.append(key, v)); + } else { + formData.append(key, value); + } + }, + ); + return formData; +}; + +export function getVersionedUrl(endpoint, url) { + const oldVersionString = '/v1'; + const versionString = '/v2'; + if (!url.startsWith(versionString)) { + return `${endpoint}${url}`; } + const startIndex = 0; + const endIndex = endpoint.search(oldVersionString); + const newEndpoint = endpoint.slice(startIndex, endIndex); + return `${newEndpoint}${url}`; +} - start = () => { - if (this.request) { - this.request.start(); - } else { - console.error(requestNotCreatedForStartMessage); +const coordinatorOptions = { + transformParams: (data) => { + const { + body, + method, + extras = {}, + } = data; + + const newBody = extras.hasFile + ? getFormData(body) + : JSON.stringify(body); + + const newHeaders = extras.hasFile + ? { + Accept: 'application/json', + } + : { + Accept: 'application/json', + 'Content-Type': 'application/json; charset=utf-8', + }; + + const params = { + method: method || methods.GET, + body: newBody, + headers: newHeaders, + }; + + // NOTE: This is a hack to bypass auth for S3 requests + // Need to fix this through use of new react-rest-request@2 + // FIXME: react-rest-request@2 has been used + // need to fix this using extras + + return params; + }, + + transformProps: (props) => { + const { + myToken, // eslint-disable-line no-unused-vars + ...otherProps + } = props; + return otherProps; + }, + + transformUrl: (url) => { + if (/^https?:\/\//i.test(url)) { + return url; } - } + return getVersionedUrl(wsEndpoint, url); + }, - stop = () => { - if (this.request) { - this.request.stop(); - } - /* - else { - console.error(requestNotCreatedForStopMessage); - } - */ - } + transformResponse: (body, request) => { + const { + url, + method, + extras = {}, + } = request; + + // TODO: add null sanitization here - successInterceptor = (response) => { - if (this.schemaName !== undefined) { + if (extras.schemaName === undefined) { + // NOTE: usually there is no response body for DELETE + if (method !== methods.DELETE) { + console.error(`Schema is not defined for ${url} ${method}`); + } + } else { try { - schema.validate(response, this.schemaName); + schema.validate(body, extras.schemaName); } catch (e) { - console.error('NETWORK ERROR:', e); - this.handleFatal({ errorMessage: e, errroCode: null }); - return; + console.error(url, method, body, e.message); + throw (e); } - } else { - console.warn(validationNotDefinedMessage); } + return sanitizeResponse(body); + }, - this.handleSuccess(response); - } + transformErrors: response => ({ response }), +}; - failureInterceptor = (response) => { - const newResponse = alterResponseErrorToFaramError(response.errors); - this.handleFailure(newResponse); - } +export const RequestCoordinator = compose( + createRequestCoordinator(coordinatorOptions), +); - createDefault = (createOptions) => { - this.stop(); +export const RequestClient = createRequestClient; - this.createOptions = createOptions; +export const getResponse = (requests, key, defaultValue = {}) => { + const { response = defaultValue } = (requests || {})[key]; + return response; +}; - const { - url, - params, - } = createOptions; +export const getResults = (requests, key, defaultValue = []) => { + const { + response: { + results = defaultValue, + } = {}, + } = (requests || {})[key]; - const request = new RestRequest( - url, - params, - this.handleSuccess ? this.successInterceptor : undefined, - this.handleFailure ? this.failureInterceptor : undefined, - this.handleFatal, - this.handleAbort, - this.handlePreLoad, - this.handlePostLoad, - this.handleAfterLoad, - this.retryTime, - this.maxRetryTime, - this.decayVal, - this.maxRetryAttempts, - this.pollTime, - this.maxPollAttempts, - this.shouldPoll, - this.delay, - ); - - this.request = request; + return results; +}; + +export const getPending = (requests, key) => { + const { + pending, + } = (requests || {})[key]; + + return pending; +}; + +export const isAnyRequestPending = (requests) => { + if (!requests) { + return undefined; } -} + + const requestKeys = Object.keys(requests); + const pending = requestKeys.some( + requestKey => requests[requestKey].pending, + ); + + return pending; +}; diff --git a/client/src/utils/common.js b/client/src/utils/common.js index bdb48df..1b413c3 100644 --- a/client/src/utils/common.js +++ b/client/src/utils/common.js @@ -1,3 +1,9 @@ +import { + isDefined, + isObject, + isList, +} from '@togglecorp/fujs'; + export const mapObjectToObject = (obj, fn) => { const newObj = {}; Object.keys(obj).forEach((key) => { @@ -20,3 +26,33 @@ export const pick = (obj, keys) => keys.reduce( (acc, key) => ({ ...acc, [key]: obj[key] }), {}, ); + +export const forEach = (obj, func) => { + Object.keys(obj).forEach((key) => { + const val = obj[key]; + func(key, val); + }); +}; + +export const sanitizeResponse = (data) => { + if (data === null || data === undefined) { + return undefined; + } + if (isList(data)) { + return data.map(sanitizeResponse).filter(isDefined); + } + if (isObject(data)) { + let newData = {}; + forEach(data, (k, val) => { + const newEntry = sanitizeResponse(val); + if (isDefined(newEntry)) { + newData = { + ...newData, + [k]: newEntry, + }; + } + }); + return newData; + } + return data; +}; diff --git a/client/src/views/Career/CareerItem/index.js b/client/src/views/Career/CareerItem/index.js new file mode 100644 index 0000000..3cb5c9d --- /dev/null +++ b/client/src/views/Career/CareerItem/index.js @@ -0,0 +1,61 @@ +import React, { useCallback } from 'react'; +import PropTypes from 'prop-types'; +import ReactMarkdown from 'react-markdown'; + +import Button from '#rsca/Button'; + +import styles from './styles.scss'; + +const CareerItem = ({ + title, + description, + isActive, + setActive, + dataKey, +}) => { + const handleExpandClick = useCallback(() => { + setActive(!isActive && dataKey); + }, [isActive, setActive, dataKey]); + + return ( +
+
+

+ {title} +

+
+ {isActive && ( + + +
+ + Apply + +
+ + )} +
+ ); +}; + +CareerItem.propTypes = { + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + isActive: PropTypes.bool.isRequired, + setActive: PropTypes.func.isRequired, + dataKey: PropTypes.number.isRequired, +}; + +export default CareerItem; diff --git a/client/src/views/Career/CareerItem/styles.scss b/client/src/views/Career/CareerItem/styles.scss new file mode 100644 index 0000000..f12d73d --- /dev/null +++ b/client/src/views/Career/CareerItem/styles.scss @@ -0,0 +1,49 @@ +@import '~base-scss/base'; + +.career-item { + .career-header { + display: flex; + align-items: center; + padding: $spacing-large; + + &:last-child { + border-bottom: $width-separator-thin solid $color-separator; + } + + .career-heading { + flex-grow: 1; + text-align: left; + text-transform: unset; + color: $color-accent; + font-size: 1.5em; + font-weight: $font-weight-bold; + } + + .button { + flex-shrink: 0; + } + } + + .description { + padding: $spacing-small $spacing-large; + } + + .footer { + display: flex; + justify-content: flex-end; + padding: $spacing-small $spacing-large $spacing-medium; + + .apply-link { + @extend %button-like-link; + background-color: $color-accent; + text-decoration: none; + color: #fff; + } + } + + &:not(:last-child) { + .footer { + border-bottom: $width-separator-thin solid $color-separator; + } + } +} diff --git a/client/src/views/Career/index.js b/client/src/views/Career/index.js new file mode 100644 index 0000000..bd487db --- /dev/null +++ b/client/src/views/Career/index.js @@ -0,0 +1,115 @@ +import React, { useCallback, useState } from 'react'; +import PropTypes from 'prop-types'; +import { Link } from 'react-router-dom'; + +import ListView from '#rscv/List/ListView'; + +import { + RequestCoordinator, + RequestClient, + methods, +} from '#utils/Request'; + +import CareerItem from './CareerItem'; +import styles from './styles.scss'; + +const EmptyComponent = () => ( +
+
+ We do not have any openings right now, but please send your resume and your interest at + + hr@togglecorp.com + + . +
+
+); + +const propTypes = { + requests: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types +}; + +const careerKeySelector = d => d.id; + +const requestOptions = { + careerGet: { + url: '/careers/', + method: methods.GET, + onMount: true, + }, +}; + +function Career(props) { + const { + requests: { + careerGet: { + response = [], + }, + }, + } = props; + + const [active, setActive] = useState(); + + const careerItemsRendererParams = useCallback((key, data) => ({ + dataKey: data.id, + title: data.title, + isActive: data.id === active, + setActive, + description: data.description, + }), [active, setActive]); + + return ( +
+
+ +

+ Work with us +

+

+ Togglecorp is changing the way softwares are built. + We are looking to hire smart people to be a part of our team. + If you are passionate about quality softwares and love the minimalist + approach to problem solving, + please apply to one of the following open positions. +

+
+
+ +
+
+
+ Cannot find what you are looking for? Email us at + + hr@togglecorp.com + +
+
+
+ ); +} + +Career.propTypes = propTypes; + +export default RequestCoordinator(RequestClient(requestOptions)(Career)); diff --git a/client/src/views/Career/styles.scss b/client/src/views/Career/styles.scss new file mode 100644 index 0000000..8fc45c5 --- /dev/null +++ b/client/src/views/Career/styles.scss @@ -0,0 +1,135 @@ +@import '~base-scss/base'; + +.career-page { + display: flex; + align-items: center; + flex-direction: column; + background-color: #fff; + width: 100vw; + height: 100vh; + overflow-x: hidden; + overflow-y: auto; + + .header { + display: flex; + flex-direction: column; + flex-shrink: 0; + border-bottom: $width-separator-thin solid $color-separator; + /* + background-color: #fc5296; + background-image: linear-gradient(315deg, #fc5296 0%, #f67062 74%); + */ + background-color: #0cbaba; + background-image: linear-gradient(315deg, #0cbaba 0%, #380036 74%); + + padding: 0 $spacing-super-large $spacing-super-large; + width: 100%; + text-align: center; + color: #fff; + + .navigation { + margin: auto; + padding: $spacing-large 0; + width: 80vw; + max-width: 720px; + text-align: left; + + .nav-link { + text-decoration: none; + color: #fff; + } + + h1 { + margin: 0; + padding: 0; + text-transform: lowercase; + line-height: 1; + + span:last-child { + color: $color-accent; + } + } + } + + .heading { + padding: $spacing-large; + text-transform: unset; + font-size: 36px; + font-weight: bold; + } + + .description { + margin: $spacing-medium auto; + max-width: 720px; + text-align: center; + font-size: 20px; + } + } + + .content { + display: flex; + flex-direction: column; + flex-grow: 1; + width: 100vw; + + .career { + display: flex; + flex-direction: column; + flex-grow: 1; + margin: auto; + padding: $spacing-large; + width: 80vw; + max-width: 720px; + + .empty-component { + display: inline-flex; + align-items: center; + flex-direction: column; + flex-grow: 1; + justify-content: center; + opacity: 0.8; + text-align: center; + font-size: $font-size-large; + } + } + } + + .footer { + border-top: $width-separator-thin solid $color-separator; + padding: $spacing-small; + width: 100vw; + + .inner-child { + margin: auto; + width: 80vw; + max-width: 720px; + text-align: center; + } + } + + .link { + margin: 0 3px; + text-transform: unset; + color: #1261a0; + } + + @media screen and (max-width: 720px) { + .header { + padding: 0 $spacing-large $spacing-large; + + .heading { + font-size: 24px; + } + + .description { + font-size: 16px; + } + } + + .content { + .career { + width: 96vw; + } + } + } +} diff --git a/client/src/views/Home/Team/Member/styles.scss b/client/src/views/Home/Team/Member/styles.scss index 2fc8a07..d6c57f1 100644 --- a/client/src/views/Home/Team/Member/styles.scss +++ b/client/src/views/Home/Team/Member/styles.scss @@ -41,8 +41,8 @@ overflow: hidden; .image { - border-radius: 0; transition: 10s transform ease-in-out; + border-radius: 0; width: 160px; height: 100%; object-fit: cover; diff --git a/client/src/views/Home/index.js b/client/src/views/Home/index.js index c304d5a..722e1d1 100644 --- a/client/src/views/Home/index.js +++ b/client/src/views/Home/index.js @@ -1,9 +1,14 @@ import React from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; +import { Link } from 'react-router-dom'; import AnchorLink from '#components/AnchorLink'; -import LoadingAnimation from '#rscv/LoadingAnimation'; +import { + RequestCoordinator, + RequestClient, + methods, +} from '#utils/Request'; import { setMembersAction, @@ -17,11 +22,6 @@ import Expertise from './Expertise'; import Clients from './Clients'; import Team from './Team'; -import MembersGetRequest from './requests/MembersGetRequest'; -import ClientsGetRequest from './requests/ClientsGetRequest'; -import ServicesGetRequest from './requests/ServicesGetRequest'; -import TechnologySectionsGetRequest from './requests/TechnologySectionsGetRequest'; - import styles from './styles.scss'; const linkList = [ @@ -58,9 +58,10 @@ const linkList = [ ]; const propTypes = { - setMembers: PropTypes.func.isRequired, - setClients: PropTypes.func.isRequired, - setServices: PropTypes.func.isRequired, + setMembers: PropTypes.func.isRequired, // eslint-disable-line react/no-unused-prop-types + setClients: PropTypes.func.isRequired, // eslint-disable-line react/no-unused-prop-types + setServices: PropTypes.func.isRequired, // eslint-disable-line react/no-unused-prop-types + // eslint-disable-next-line react/no-unused-prop-types setTechnologySections: PropTypes.func.isRequired, }; @@ -71,54 +72,72 @@ const mapDispatchToProps = dispatch => ({ setTechnologySections: params => dispatch(setTechnologySectionsAction(params)), }); +const requestOptions = { + membersGet: { + url: '/members/', + method: methods.GET, + onMount: true, + onSuccess: ({ + props: { setMembers }, + response, + }) => { + setMembers(response); + }, + extras: { + schemaName: 'array.member', + }, + }, + clientsGet: { + url: '/clients/', + method: methods.GET, + onMount: true, + onSuccess: ({ + props: { setClients }, + response, + }) => { + setClients(response); + }, + extras: { + schemaName: 'array.client', + }, + }, + servicesGet: { + url: '/services/', + method: methods.GET, + onMount: true, + onSuccess: ({ + props: { setServices }, + response, + }) => { + setServices(response); + }, + extras: { + schemaName: 'array.service', + }, + }, + technologiesGet: { + url: '/technology-sections/', + method: methods.GET, + onMount: true, + onSuccess: ({ + props: { setTechnologySections }, + response, + }) => { + setTechnologySections(response); + }, + extras: { + schemaName: 'array.technologySection', + }, + }, +}; + @connect(undefined, mapDispatchToProps) +@RequestCoordinator +@RequestClient(requestOptions) export default class Home extends React.PureComponent { static propTypes = propTypes; - constructor(props) { - super(props); - - this.state = { - serviceLoading: true, - clientLoading: true, - technologySectionLoading: true, - memberLoading: true, - }; - - // Requests - this.membersGetRequest = new MembersGetRequest({ - setState: v => this.setState(v), - setMembers: this.props.setMembers, - }); - this.clientsGetRequest = new ClientsGetRequest({ - setState: v => this.setState(v), - setClients: this.props.setClients, - }); - this.servicesGetRequest = new ServicesGetRequest({ - setState: v => this.setState(v), - setServices: this.props.setServices, - }); - this.technologySectionsGetRequest = new TechnologySectionsGetRequest({ - setState: v => this.setState(v), - setTechnologySections: this.props.setTechnologySections, - }); - } - - componentDidMount() { - this.membersGetRequest.init().start(); - this.clientsGetRequest.init().start(); - this.servicesGetRequest.init().start(); - this.technologySectionsGetRequest.init().start(); - } - - componentWillUnmount() { - this.membersGetRequest.stop(); - this.clientsGetRequest.stop(); - this.servicesGetRequest.stop(); - this.technologySectionsGetRequest.stop(); - } - handleDownButtonClick = (section) => { const servicesContainer = document.getElementsByClassName(styles[section])[0]; @@ -161,6 +180,13 @@ export default class Home extends React.PureComponent { ))} +
  • + + Career + +