Skip to content

Commit a0295e1

Browse files
christianalfoniCompuIves
christianalfoni
authored and
CompuIves
committed
Patron refactor (codesandbox#2453)
* Fix notifications * remove comment * initial commit * missing
1 parent b20aa47 commit a0295e1

File tree

26 files changed

+284
-189
lines changed

26 files changed

+284
-189
lines changed

‎packages/app/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@
7575
"@sentry/webpack-plugin": "^1.8.0",
7676
"@svgr/core": "^2.4.1",
7777
"@typeform/embed": "^0.12.0",
78+
"@types/rc-slider": "^8.6.5",
7879
"@vue/babel-preset-app": "^3.2.0",
7980
"airtable": "^0.5.8",
8081
"apollo-boost": "^0.4.3",
@@ -161,7 +162,7 @@
161162
"qrcode.react": "^0.8.0",
162163
"qs": "^6.5.0",
163164
"querystring": "^0.2.0",
164-
"rc-slider": "^8.2.0",
165+
"rc-slider": "^8.7.1",
165166
"react": "^16.9.0",
166167
"react-addons-css-transition-group": "^15.6.0",
167168
"react-apollo": "^2.5.6",

‎packages/app/src/app/index.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { isSafari } from '@codesandbox/common/lib/utils/platform';
2626

2727
// eslint-disable-next-line
2828
import * as childProcess from 'node-services/lib/child_process';
29+
import { Provider as ActualOvermindProvider } from 'overmind-react';
2930
import { Routes as App } from './pages';
3031
import { Provider as OvermindProvider } from './overmind/Provider';
3132
import { config } from './overmind';
@@ -119,15 +120,17 @@ async function boot(overmind) {
119120
try {
120121
render(
121122
<ApolloProvider client={client}>
122-
<OvermindProvider value={overmind}>
123-
<HooksProvider client={client}>
124-
<ThemeProvider theme={theme}>
125-
<Router history={history}>
126-
<App />
127-
</Router>
128-
</ThemeProvider>
129-
</HooksProvider>
130-
</OvermindProvider>
123+
<ActualOvermindProvider value={overmind}>
124+
<OvermindProvider value={overmind}>
125+
<HooksProvider client={client}>
126+
<ThemeProvider theme={theme}>
127+
<Router history={history}>
128+
<App />
129+
</Router>
130+
</ThemeProvider>
131+
</HooksProvider>
132+
</OvermindProvider>
133+
</ActualOvermindProvider>
131134
</ApolloProvider>,
132135
rootEl
133136
);

‎packages/app/src/app/overmind/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { createHook } from 'overmind-react';
12
import {
23
IConfig,
34
IOnInitialize,
@@ -67,3 +68,5 @@ export interface Derive<Parent extends IState, Output>
6768
extends IDerive<Config, Parent, Output> {}
6869

6970
export const connect = createConnect<typeof config>();
71+
72+
export const useOvermind = createHook<typeof config>();

‎packages/app/src/app/overmind/namespaces/patron/state.ts‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { Derive } from 'app/overmind';
2+
import { PatronTier, PatronBadge } from '@codesandbox/common/lib/types';
23

34
type State = {
45
price: number;
56
isUpdatingSubscription: boolean;
6-
tier: Derive<State, number>;
7+
tier: Derive<State, PatronTier>;
78
error: string;
9+
badge: Derive<State, PatronBadge>;
810
};
911

1012
export const state: State = {
@@ -18,4 +20,21 @@ export const state: State = {
1820

1921
return 1;
2022
},
23+
badge: ({ tier }) => {
24+
switch (tier) {
25+
case 1:
26+
return PatronBadge.ONE;
27+
case 2:
28+
return PatronBadge.TWO;
29+
case 3:
30+
return PatronBadge.THREE;
31+
case 4:
32+
return PatronBadge.FOURTH;
33+
default: {
34+
const neverTier: never = tier;
35+
36+
return neverTier;
37+
}
38+
}
39+
},
2140
};

‎packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/NewSandboxModal/Imports/StackbitImport.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ export const StackbitImport = ({ username }: Props) => (
1414
<a href="https://stackbit.com" target="_blank" rel="noreferrer noopener">
1515
Stackbit
1616
</a>
17-
. This generates a project for you that's automatically set up with any
18-
Theme, Site Generator and CMS.
17+
. This generates a project for you that&#39;s automatically set up with
18+
any Theme, Site Generator and CMS.
1919
<StackbitButton
2020
style={{ marginTop: '1rem', float: 'right' }}
2121
username={username}

packages/app/src/app/pages/Patron/PricingModal/Badge/Particles/elements.js renamed to packages/app/src/app/pages/Patron/PricingModal/Badge/Particles/elements.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import styled, { css, keyframes } from 'styled-components';
22
import badges from '@codesandbox/common/lib/utils/badges/patron-info';
3+
import { PatronBadge } from '@codesandbox/common/lib/types';
34

45
const particleAnimation = (deg: number) => keyframes`
56
0% {
@@ -12,8 +13,12 @@ const particleAnimation = (deg: number) => keyframes`
1213
}
1314
`;
1415

15-
export const Particle = styled.div`
16-
animation: ${props => particleAnimation(props.deg, props.i)} 700ms ease;
16+
export const Particle = styled.div<{
17+
deg: number;
18+
i: number;
19+
badge: PatronBadge;
20+
}>`
21+
animation: ${props => particleAnimation(props.deg)} 700ms ease;
1722
position: absolute;
1823
top: 0;
1924
bottom: 20px;

packages/app/src/app/pages/Patron/PricingModal/Badge/Particles/index.js renamed to packages/app/src/app/pages/Patron/PricingModal/Badge/Particles/index.tsx

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,26 @@
11
import React from 'react';
22
import { forEach } from 'lodash-es';
33

4+
import { PatronBadge } from '@codesandbox/common/lib/types';
45
import badges from '@codesandbox/common/lib/utils/badges/patron-info';
56
import { Particle } from './elements';
67

78
const classNameRegex = /\shide/g;
89

910
function showElement(el: HTMLElement) {
1011
if (el.nodeName === 'svg') {
11-
el.setAttribute('class', el.className.baseVal.replace(classNameRegex, ''));
12+
el.setAttribute(
13+
'class',
14+
el.getAttribute('class').replace(classNameRegex, '')
15+
);
1216
} else {
1317
el.className = el.className.replace(classNameRegex, ''); // eslint-disable-line no-param-reassign
1418
}
1519
}
1620

1721
function hideElement(el: HTMLElement) {
1822
if (el.nodeName === 'svg') {
19-
el.setAttribute('class', `${el.className.baseVal} hide`);
23+
el.setAttribute('class', `${el.getAttribute('class')} hide`);
2024
} else {
2125
el.className += ' hide'; // eslint-disable-line no-param-reassign
2226
}
@@ -27,15 +31,21 @@ const createParticles = (amount: number, badge) =>
2731
.fill(0)
2832
.map((_, i) => (
2933
<Particle
30-
key={`${i}_${badge}`} // eslint-disable-line
31-
className={`${badge}-particle particle hide`}
34+
// eslint-disable-next-line
35+
key={`${i}_${badge}`}
3236
i={i}
37+
className={`${badge}-particle particle hide`}
3338
deg={180 + (Math.floor(amount / 2) + i) * (360 / amount)}
3439
badge={badge}
3540
/>
3641
));
3742

38-
export class Particles extends React.Component {
43+
type ParticlesProps = {
44+
badge: PatronBadge;
45+
makeItRain: boolean;
46+
};
47+
48+
export class Particles extends React.Component<ParticlesProps> {
3949
makeItRain = () => {
4050
const particleSelector = document.getElementsByClassName('particle');
4151
forEach(particleSelector, hideElement);
@@ -45,9 +55,9 @@ export class Particles extends React.Component {
4555
});
4656
};
4757

48-
timeout: ?number;
58+
timeout?: NodeJS.Timeout;
4959

50-
shouldComponentUpdate(nextProps) {
60+
shouldComponentUpdate(nextProps: ParticlesProps) {
5161
if (nextProps.badge !== this.props.badge) {
5262
const particleSelector = document.getElementsByClassName(
5363
`${nextProps.badge}-particle`

packages/app/src/app/pages/Patron/PricingModal/Badge/elements.js renamed to packages/app/src/app/pages/Patron/PricingModal/Badge/elements.ts

File renamed without changes.

packages/app/src/app/pages/Patron/PricingModal/Badge/index.js renamed to packages/app/src/app/pages/Patron/PricingModal/Badge/index.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
1-
import React from 'react';
2-
1+
import React, { memo } from 'react';
2+
import { PatronBadge } from '@codesandbox/common/lib/types';
33
import Relative from '@codesandbox/common/lib/components/Relative';
44
import badges from '@codesandbox/common/lib/utils/badges/patron-info';
5-
65
import './animations.css';
76
import { Particles } from './Particles';
87

98
import { BadgeContainer } from './elements';
109

11-
export const Badge = React.memo(({ badge, subscribed }) => {
10+
interface IBadgeProps {
11+
badge: PatronBadge;
12+
subscribed: boolean;
13+
}
14+
15+
export const Badge: React.FC<IBadgeProps> = memo(({ badge, subscribed }) => {
1216
const BadgeComponent = badges[badge].Badge;
1317

1418
return (

‎packages/app/src/app/pages/Patron/PricingModal/PricingChoice/Range/index.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
import React from 'react';
2-
import Slider from 'rc-slider/lib/Slider';
2+
import Slider, { SliderProps } from 'rc-slider';
33
import 'rc-slider/dist/rc-slider.css';
44

5-
export const Range = props => (
5+
type RangeProps = {
6+
color: string;
7+
} & SliderProps;
8+
9+
export const Range: React.FC<RangeProps> = props => (
610
<Slider
711
railStyle={{ background: 'rgba(0, 0, 0, 0.3)', height: 12 }}
812
trackStyle={{

0 commit comments

Comments
 (0)