Skip to content

Commit c1d343f

Browse files
kbusby-reapitdalestringerrootamhajiwillmcvay
authored
feat: property projector app creation (#2678)
* feat: #1685 Scaffolded a new react app for the property projector * feat: #1817 General config form styling and pulling of data * feat: #1817 Config form structure changes and inital projector set-up * feat: #1817 more structure changes and added pulling and merging of properties and images given the form criteria * Begun to setup projector config handling web-components-config-server * returned logic to the putHandler * Added the ability to PUT records and GET records from property-projector-config table * feat: #1816 Added projector stylings, retrieving of properties and cleaned up the config form * readded .npmrc * Multiple changes: * Updated default config values * Updated 'getProjectorProperties' to throw an error if properties don't have images * Added error constants file * Fixed a styling issue when a property only has one image * Made the projector respect config interval * Added basic config form validation * Added colour picker component * Fixed colour-picker so it now updates when typing in the hex code * Multiple changes: * Added marketing mode toggle * Added min/max rent * Added letting and selling status fields * Removed randomize option * Changed the way we store departments in the configuration file to be an object rather than an array of objects * Amended config schema * Added cognitoUserPoolId to connect session * Added 'cognitoUserPoolId' to the default config * Removed hard coded configuration and replaced with simple GET from DynamoDB * Added default configuration if there is no config to fetch. Added error handling around the fetch. * 1816 made the header static * #1818/code tidy up and added a try/catch around the config retrieval * #1818/ Added new functionality to retrieve negotiator ID * Updated negotiator API call and getPropertyProjectorConfig function * #1818/ Now uses client ID and office ID of the user now to retrieve their config from dynamo DB * #1818/ Code tidy up * Fixed the departments and property types being in the incorrect format and corrected the default config keys/values * Changed the web-components-config-server projector PUT logic to retrieve IDs from the URL instead of the body * #1818/ Added the saving of property projector config when the launch button is clicked. Also moved the call to getNegotiatorOfficeId out of the config form. * added a css change to display offices in columns * #1818/Amended the property image URLs by removing instances of SBOX so the URLs are correct. * #1818/Style changes to reduce the size of the logo * Improved the loading experience and fixed include paths * Added a tooltip to the projector and adjusted logo CSS * Fixed race condition where officeId wasn't returning quickly enough * 1816 set secondary color * 1816 added the header text color and fixed the border color * Added functionality to the web-components-config-serverto store and retrieve the headerTextColour * Added better form validation to the Projector * Removed react-color types file * Added tests for the platform-api folder * Added a snapshot test of the office checkboxes. * Added basic test for the projector * Added basic property component tests * Added tests for the property-projector-config and switched it to use 'fetcher' * Added validator tests * Added property-helper tests and a mock property * added a snapshot test of the department checkboxes * Added property-projector-config tests * Added new utils test for property projector * Updated projector.test snapshot * Uncommented registry in .npmrc * Added tests for projector-properties and negotatior-helper * Removed unused imports from property-projector schema * Merged master branch in * updated fetch-config syntax in package.json and renamed authenticated page to projectorApp * added types to some of the useState hooks and amended the market place URL. * Added stricter typing and created a new documentation page with menu item. * Corrected the icons used for the side menu * moved validation code out of the config form and into its own file * Added a helper function for pagination so that all offices and departments are now returned Co-authored-by: Dale Stringer <[email protected]> Co-authored-by: root <[email protected]> Co-authored-by: Amal <[email protected]> Co-authored-by: Will McVay <[email protected]>
1 parent 146df4d commit c1d343f

File tree

135 files changed

+4140
-8
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

135 files changed

+4140
-8
lines changed

‎.npmrc

100644100755
+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
//registry.npmjs.org/:_authToken=${NPM_TOKEN}
1+
#//registry.npmjs.org/:_authToken=${NPM_TOKEN}

‎packages/property-projector/README.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# property-projector
2+
3+
property-projector an app built for Reapit Marketplace.
4+
5+
Initial scaffold using the steps from [here](https://foundations-documentation.reapit.cloud/developer-portal), using [Reapit React App Scaffolder](https://www.npmjs.com/package/@reapit/generator-react-app-scaffolder)

‎packages/property-projector/config.example.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"appEnv": "local",
3+
"sentryDns": "",
4+
"googleAnalyticsKey": "",
5+
"connectClientId": "",
6+
"connectOAuthUrl": "https://dev.connect.reapit.cloud",
7+
"platformApiUrl": "https://dev.platform.reapit.cloud",
8+
"cognitoUserPoolId": "eu-west-2_hbt0B7yys",
9+
"dynamoEnv": ""
10+
}

‎packages/property-projector/jest.config.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const { pathsToModuleNameMapper } = require('ts-jest/utils')
2+
const baseConfig = require('../../scripts/jest/jest.config')
3+
const { compilerOptions } = require('./tsconfig')
4+
5+
module.exports = {
6+
...baseConfig,
7+
testPathIgnorePatterns: ['<rootDir>/src/tests/'],
8+
moduleNameMapper: {
9+
...baseConfig.moduleNameMapper,
10+
...pathsToModuleNameMapper(compilerOptions.paths, {
11+
prefix: '<rootDir>/',
12+
}),
13+
},
14+
coveragePathIgnorePatterns: ['<rootDir>/src/services', '<rootDir>/src/tests'],
15+
coverageThreshold: {
16+
global: {
17+
branches: 63,
18+
functions: 70,
19+
lines: 88,
20+
statements: 87,
21+
},
22+
},
23+
}

‎packages/property-projector/package.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "app-name",
3+
"version": "0.0.1",
4+
"private": true,
5+
"description": "Description",
6+
"repository": {
7+
"type": "git",
8+
"url": "[email protected]:reapit/foundations.git"
9+
},
10+
"license": "MIT",
11+
"author": "Author",
12+
"main": "./src/index.ts",
13+
"scripts": {
14+
"build:prod": "rimraf public/dist && webpack --config ../../scripts/webpack/webpack.config.prod.js",
15+
"fetch-config": "yarn config-manager --namespace cloud --entity property-projector --name local --mode fetch",
16+
"lint": "concurrently \"tsc --noEmit\" \"eslint --cache --ext=ts,tsx src\"",
17+
"lint:fix": "eslint --cache --ext=ts,tsx src --fix",
18+
"start:dev": "webpack-dev-server --hot --progress --color --mode development --config ../../scripts/webpack/webpack.config.dev.js",
19+
"start:prod": "serve public/dist -s -l 8080",
20+
"test:ci": "cross-env TZ=UTC jest --ci --colors --coverage --silent --forceExit --detectOpenHandles --runInBand",
21+
"test:dev": "TZ=UTC jest --watch --verbose",
22+
"test:update-badges": "yarn test:ci && jest-coverage-badges --input src/tests/coverage/coverage-summary.json --output src/tests/badges"
23+
},
24+
"dependencies": {
25+
"@reapit/foundations-ts-definitions": "2020-02-13",
26+
"react-color": "^2.18.1",
27+
"react-responsive-carousel": "^3.2.9"
28+
}
29+
}

‎packages/property-projector/public/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<base href="/" />
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
7+
<title>Property Projector</title>
8+
</head>
9+
<body>
10+
<noscript>You need to enable JavaScript to run this app.</noscript>
11+
<div id="root"></div>
12+
</body>
13+
</html>

‎packages/property-projector/public/logo.png

2.18 KB
Loading

‎packages/property-projector/src/assets/images/reapit-connect.png

21.9 KB
Loading

‎packages/property-projector/src/assets/images/reapit-graphic.jpg

199 KB
Loading

‎packages/property-projector/src/components/hocs/__tests__/__snapshots__/error-boundary.test.tsx.snap

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`ErrorBoundary should match a snapshot when has an error 1`] = `
4+
<p>
5+
Something went wrong here, try refreshing your page.
6+
</p>
7+
`;
8+
9+
exports[`ErrorBoundary should match a snapshot when no error 1`] = `<Component />`;

‎packages/property-projector/src/components/hocs/__tests__/error-boundary.test.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import * as React from 'react'
2+
import { shallow } from 'enzyme'
3+
import { ErrorBoundary } from '../error-boundary'
4+
5+
const Component: React.FC = () => <div>I am a component!</div>
6+
Component.displayName = 'Component'
7+
8+
const props = {
9+
children: Component,
10+
}
11+
12+
describe('ErrorBoundary', () => {
13+
it('should match a snapshot when no error', () => {
14+
expect(shallow(<ErrorBoundary {...props} />)).toMatchSnapshot()
15+
})
16+
17+
it('should match a snapshot when has an error', () => {
18+
const component = shallow(<ErrorBoundary {...props} />)
19+
component.setState({
20+
hasFailed: true,
21+
})
22+
expect(component).toMatchSnapshot()
23+
})
24+
25+
afterEach(() => {
26+
jest.restoreAllMocks()
27+
})
28+
})

‎packages/property-projector/src/components/hocs/error-boundary.tsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import * as React from 'react'
2+
3+
export interface ErrorState {
4+
hasFailed: boolean
5+
}
6+
7+
export type ErrorProps = {
8+
children?: React.ReactNode
9+
}
10+
11+
export class ErrorBoundary extends React.Component<ErrorProps, ErrorState> {
12+
constructor(props: ErrorProps) {
13+
super(props)
14+
this.state = {
15+
hasFailed: false,
16+
}
17+
}
18+
19+
static getDerivedStateFromError() {
20+
return {
21+
hasFailed: true,
22+
}
23+
}
24+
25+
componentDidCatch(error: Error, info: React.ErrorInfo) {
26+
console.error('ERROR BOUNDARY CAUGHT', error.message, info)
27+
}
28+
29+
render() {
30+
if (this.state.hasFailed) {
31+
return <p>Something went wrong here, try refreshing your page.</p>
32+
}
33+
34+
return this.props.children
35+
}
36+
}
37+
38+
export default ErrorBoundary

‎packages/property-projector/src/components/pages/__styles__/styles.ts

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { css } from 'linaria'
2+
3+
export const container = css`
4+
min-width: 100vw;
5+
min-height: 100vh;
6+
display: flex;
7+
justify-content: flex-end;
8+
align-items: center;
9+
flex-direction: row;
10+
background-color: #fff;
11+
12+
@media screen and (max-width: 900px) {
13+
flex-direction: column-reverse;
14+
}
15+
`
16+
17+
export const wrapper = css`
18+
background-color: #fff;
19+
width: 33.33%;
20+
padding: 1rem;
21+
pointer-events: auto;
22+
23+
&.disabled {
24+
pointer-events: none;
25+
}
26+
27+
h1,
28+
p,
29+
img {
30+
text-align: center;
31+
}
32+
33+
div > img {
34+
margin: 0 auto;
35+
max-width: 200px;
36+
display: block;
37+
}
38+
39+
button {
40+
margin: 0 auto;
41+
max-width: 400px;
42+
}
43+
44+
@media screen and (max-width: 900px) {
45+
width: 100%;
46+
}
47+
48+
@media screen and (min-width: 1200px) {
49+
padding: 0 3rem;
50+
}
51+
`
52+
53+
export const image = css`
54+
background-color: #fff;
55+
width: 66.66%;
56+
height: 100vh;
57+
font-size: 0;
58+
59+
img {
60+
width: 100%;
61+
height: 100%;
62+
object-fit: cover;
63+
}
64+
65+
@media screen and (max-width: 900px) {
66+
width: 100%;
67+
height: 300px;
68+
}
69+
`

‎packages/property-projector/src/components/pages/__tests__/__snapshots__/login.test.tsx.snap

+138
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Login should match a snapshot 1`] = `
4+
Object {
5+
"asFragment": [Function],
6+
"baseElement": <body>
7+
<div>
8+
<div
9+
class=""
10+
>
11+
<div
12+
class=""
13+
>
14+
<div
15+
class=""
16+
data-test=""
17+
>
18+
<img
19+
alt="Reapit Connect Graphic"
20+
src=""
21+
/>
22+
</div>
23+
<div
24+
class=""
25+
data-test=""
26+
>
27+
<button
28+
class="button is-primary is-fullwidth "
29+
data-test=""
30+
type="submit"
31+
>
32+
Login
33+
</button>
34+
</div>
35+
</div>
36+
<div
37+
class=""
38+
>
39+
<img
40+
alt="Reapit Graphic"
41+
src=""
42+
/>
43+
</div>
44+
</div>
45+
</div>
46+
</body>,
47+
"container": <div>
48+
<div
49+
class=""
50+
>
51+
<div
52+
class=""
53+
>
54+
<div
55+
class=""
56+
data-test=""
57+
>
58+
<img
59+
alt="Reapit Connect Graphic"
60+
src=""
61+
/>
62+
</div>
63+
<div
64+
class=""
65+
data-test=""
66+
>
67+
<button
68+
class="button is-primary is-fullwidth "
69+
data-test=""
70+
type="submit"
71+
>
72+
Login
73+
</button>
74+
</div>
75+
</div>
76+
<div
77+
class=""
78+
>
79+
<img
80+
alt="Reapit Graphic"
81+
src=""
82+
/>
83+
</div>
84+
</div>
85+
</div>,
86+
"debug": [Function],
87+
"findAllByAltText": [Function],
88+
"findAllByDisplayValue": [Function],
89+
"findAllByLabelText": [Function],
90+
"findAllByPlaceholderText": [Function],
91+
"findAllByRole": [Function],
92+
"findAllByTestId": [Function],
93+
"findAllByText": [Function],
94+
"findAllByTitle": [Function],
95+
"findByAltText": [Function],
96+
"findByDisplayValue": [Function],
97+
"findByLabelText": [Function],
98+
"findByPlaceholderText": [Function],
99+
"findByRole": [Function],
100+
"findByTestId": [Function],
101+
"findByText": [Function],
102+
"findByTitle": [Function],
103+
"getAllByAltText": [Function],
104+
"getAllByDisplayValue": [Function],
105+
"getAllByLabelText": [Function],
106+
"getAllByPlaceholderText": [Function],
107+
"getAllByRole": [Function],
108+
"getAllByTestId": [Function],
109+
"getAllByText": [Function],
110+
"getAllByTitle": [Function],
111+
"getByAltText": [Function],
112+
"getByDisplayValue": [Function],
113+
"getByLabelText": [Function],
114+
"getByPlaceholderText": [Function],
115+
"getByRole": [Function],
116+
"getByTestId": [Function],
117+
"getByText": [Function],
118+
"getByTitle": [Function],
119+
"queryAllByAltText": [Function],
120+
"queryAllByDisplayValue": [Function],
121+
"queryAllByLabelText": [Function],
122+
"queryAllByPlaceholderText": [Function],
123+
"queryAllByRole": [Function],
124+
"queryAllByTestId": [Function],
125+
"queryAllByText": [Function],
126+
"queryAllByTitle": [Function],
127+
"queryByAltText": [Function],
128+
"queryByDisplayValue": [Function],
129+
"queryByLabelText": [Function],
130+
"queryByPlaceholderText": [Function],
131+
"queryByRole": [Function],
132+
"queryByTestId": [Function],
133+
"queryByText": [Function],
134+
"queryByTitle": [Function],
135+
"rerender": [Function],
136+
"unmount": [Function],
137+
}
138+
`;

0 commit comments

Comments
 (0)