(callback: (a: A) => any, a: A): void;
32 | function unstable_batchedUpdates(callback: () => any): void;
33 |
34 | function unstable_renderSubtreeIntoContainer(
35 | parentComponent: Component,
36 | nextElement: DOMElement,
37 | container: Element,
38 | callback?: (element: Element) => any): Element;
39 | function unstable_renderSubtreeIntoContainer(
40 | parentComponent: Component,
41 | nextElement: ClassicElement,
42 | container: Element,
43 | callback?: (component: ClassicComponent) => any): ClassicComponent;
44 | function unstable_renderSubtreeIntoContainer(
45 | parentComponent: Component,
46 | nextElement: ReactElement,
47 | container: Element,
48 | callback?: (component: Component) => any): Component;
49 | }
50 |
51 | namespace __DOMServer {
52 | function renderToString(element: ReactElement): string;
53 | function renderToStaticMarkup(element: ReactElement): string;
54 | var version: string;
55 | }
56 | }
57 |
58 | declare module "react-dom" {
59 | import DOM = __React.__DOM;
60 | export = DOM;
61 | }
62 |
63 | declare module "react-dom/server" {
64 | import DOMServer = __React.__DOMServer;
65 | export = DOMServer;
66 | }
67 |
--------------------------------------------------------------------------------
/typescript/typings/react/react-helmet.d.ts:
--------------------------------------------------------------------------------
1 |
2 | ///
3 |
4 | declare module ReactHelmet {
5 | export interface ReactHelmetInterface {
6 | rewind(): any;
7 | }
8 | }
9 |
10 | // declare var reactHelmet: ReactHelmet.ReactHelmetInterface;
11 | declare var reactHelmet: any;
12 |
13 | declare module 'react-helmet' {
14 | export default reactHelmet;
15 | }
16 |
--------------------------------------------------------------------------------
/typescript/typings/redux/react-redux.d.ts:
--------------------------------------------------------------------------------
1 | // Type definitions for react-redux 2.1.2
2 | // Project: https://github.com/rackt/react-redux
3 | // Definitions by: Qubo
4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped
5 |
6 | ///
7 | ///
8 |
9 | declare module "react-redux" {
10 | import { Component } from 'react';
11 | import { Store, Dispatch, ActionCreator } from 'redux';
12 |
13 | export class ElementClass extends Component { }
14 | export interface ClassDecorator {
15 | (component: T): T
16 | }
17 |
18 | /**
19 | * Connects a React component to a Redux store.
20 | * @param mapStateToProps
21 | * @param mapDispatchToProps
22 | * @param mergeProps
23 | * @param options
24 | */
25 | export function connect(mapStateToProps?: MapStateToProps,
26 | mapDispatchToProps?: MapDispatchToPropsFunction|MapDispatchToPropsObject,
27 | mergeProps?: MergeProps,
28 | options?: Options): ClassDecorator;
29 |
30 | interface MapStateToProps {
31 | (state: any, ownProps?: any): any;
32 | }
33 |
34 | interface MapDispatchToPropsFunction {
35 | (dispatch: Dispatch, ownProps?: any): any;
36 | }
37 |
38 | interface MapDispatchToPropsObject {
39 | [name: string]: ActionCreator;
40 | }
41 |
42 | interface MergeProps {
43 | (stateProps: any, dispatchProps: any, ownProps: any): any;
44 | }
45 |
46 | interface Options {
47 | /**
48 | * If true, implements shouldComponentUpdate and shallowly compares the result of mergeProps,
49 | * preventing unnecessary updates, assuming that the component is a “pure” component
50 | * and does not rely on any input or state other than its props and the selected Redux store’s state.
51 | * Defaults to true.
52 | * @default true
53 | */
54 | pure: boolean;
55 | }
56 |
57 | export interface Property {
58 | /**
59 | * The single Redux store in your application.
60 | */
61 | store?: Store;
62 | children?: Function;
63 | }
64 |
65 | /**
66 | * Makes the Redux store available to the connect() calls in the component hierarchy below.
67 | */
68 | export class Provider extends Component { }
69 | }
70 |
--------------------------------------------------------------------------------
/typescript/typings/redux/redux-async-connect.d.ts:
--------------------------------------------------------------------------------
1 |
2 | declare module "redux-async-connect" {
3 | export function ReduxAsyncConnect(): any;
4 | export function loadOnServer(props: any, store: any): any;
5 | }
6 |
--------------------------------------------------------------------------------
/typescript/typings/redux/redux-devtools-dock-monitor.d.ts:
--------------------------------------------------------------------------------
1 | // Type definitions for redux-devtools-dock-monitor 1.0.1
2 | // Project: https://github.com/gaearon/redux-devtools-dock-monitor
3 | // Definitions by: Petryshyn Sergii
4 | // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
5 |
6 | ///
7 |
8 | declare module "redux-devtools-dock-monitor" {
9 | import * as React from 'react'
10 |
11 | interface IDockMonitorProps {
12 | /**
13 | * Any valid Redux DevTools monitor.
14 | */
15 | children?: React.ReactNode
16 |
17 | /**
18 | * A key or a key combination that toggles the dock visibility.
19 | * Must be recognizable by parse-key (for example, 'ctrl-h')
20 | */
21 | toggleVisibilityKey: string
22 |
23 | /**
24 | * A key or a key combination that toggles the dock position.
25 | * Must be recognizable by parse-key (for example, 'ctrl-w')
26 | */
27 | changePositionKey: string
28 |
29 | /**
30 | * When true, the dock size is a fraction of the window size, fixed otherwise.
31 | *
32 | * @default true
33 | */
34 | fluid?: boolean
35 |
36 | /**
37 | * Size of the dock. When fluid is true, a float (0.5 means half the window size).
38 | * When fluid is false, a width in pixels
39 | *
40 | * @default 0.3 (3/10th of the window size)
41 | */
42 | defaultSize?: number
43 |
44 | /**
45 | * Where the dock appears on the screen.
46 | * Valid values: 'left', 'top', 'right', 'bottom'
47 | *
48 | * @default 'right'
49 | */
50 | defaultPosition?: string
51 |
52 | /**
53 | * @default true
54 | */
55 | defaultIsVisible?: boolean
56 | }
57 |
58 | export default class DockMonitor extends React.Component {}
59 | }
60 |
--------------------------------------------------------------------------------
/typescript/typings/redux/redux-devtools-log-monitor.d.ts:
--------------------------------------------------------------------------------
1 | // Type definitions for redux-devtools-log-monitor 1.0.1
2 | // Project: https://github.com/gaearon/redux-devtools-log-monitor
3 | // Definitions by: Petryshyn Sergii
4 | // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
5 |
6 | ///
7 |
8 | declare module "redux-devtools-log-monitor" {
9 | import * as React from 'react'
10 |
11 | interface ILogMonitorProps {
12 | /**
13 | * Either a string referring to one of the themes provided by
14 | * redux-devtools-themes or a custom object of the same format.
15 | *
16 | * @see https://github.com/gaearon/redux-devtools-themes
17 | */
18 | theme?: string
19 |
20 | /**
21 | * A function that selects the slice of the state for DevTools to show.
22 | *
23 | * @example state => state.thePart.iCare.about.
24 | * @default state => state.
25 | */
26 | select?: (state: any) => any
27 |
28 | /**
29 | * When true, records the current scroll top every second so it
30 | * can be restored on refresh. This only has effect when used together
31 | * with persistState() enhancer from Redux DevTools.
32 | *
33 | * @default true
34 | */
35 | preserveScrollTop?: boolean
36 | }
37 |
38 | export default class LogMonitor extends React.Component {}
39 | }
40 |
--------------------------------------------------------------------------------
/typescript/typings/redux/redux-devtools.d.ts:
--------------------------------------------------------------------------------
1 | // Type definitions for redux-devtools 3.0.0
2 | // Project: https://github.com/gaearon/redux-devtools
3 | // Definitions by: Petryshyn Sergii
4 | // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
5 |
6 | ///
7 |
8 | declare module "redux-devtools" {
9 | import * as React from 'react'
10 |
11 | interface IDevTools {
12 | new (): JSX.ElementClass
13 | instrument(): Function
14 | }
15 |
16 | export function createDevTools(el: React.ReactElement): IDevTools
17 | export function persistState(debugSessionKey: string): Function
18 |
19 | var factory: { instrument(): Function }
20 |
21 | export default factory;
22 | }
23 |
--------------------------------------------------------------------------------
/typescript/typings/redux/redux-logger.d.ts:
--------------------------------------------------------------------------------
1 | // Type definitions for redux-logger v2.0.0
2 | // Project: https://github.com/fcomb/redux-logger
3 | // Definitions by: Alexander Rusakov
4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped
5 |
6 | // FIXED VERSION
7 |
8 | ///
9 |
10 | declare module 'redux-logger' {
11 |
12 | function createLogger(options?: createLogger.ReduxLoggerOptions): Redux.Middleware;
13 |
14 | namespace createLogger {
15 | interface ReduxLoggerOptions {
16 | actionTransformer?: (action: any) => any;
17 | collapsed?: boolean;
18 | duration?: boolean;
19 | level?: string;
20 | logger?: any;
21 | predicate?: (getState: Function, action: any) => boolean;
22 | timestamp?: boolean;
23 | transformer?: (state:any) => any;
24 | }
25 | }
26 |
27 | export = createLogger;
28 | }
29 |
--------------------------------------------------------------------------------
/typescript/typings/redux/redux-thunk.d.ts:
--------------------------------------------------------------------------------
1 | // Type definitions for redux-thunk
2 | // Project: https://github.com/gaearon/redux-thunk
3 | // Definitions by: Qubo
4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped
5 |
6 | ///
7 |
8 | declare module ReduxThunk {
9 | export interface Thunk extends Redux.Middleware {}
10 | export interface ThunkInterface {
11 | (dispatch: Redux.Dispatch, getState?: () => T): any;
12 | }
13 | }
14 |
15 | declare module "redux-thunk" {
16 | var thunk: ReduxThunk.Thunk;
17 | export = thunk;
18 | }
19 |
--------------------------------------------------------------------------------
/typescript/typings/redux/redux.d.ts:
--------------------------------------------------------------------------------
1 | // Type definitions for Redux v1.0.0
2 | // Project: https://github.com/rackt/redux
3 | // Definitions by: William Buchwalter , Vincent Prouillet
4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped
5 |
6 | declare module Redux {
7 |
8 | interface ActionCreator extends Function {
9 | (...args: any[]): any;
10 | }
11 |
12 | interface Reducer extends Function {
13 | (state: any, action: any): any;
14 | }
15 |
16 | interface Dispatch extends Function {
17 | (action: any): any;
18 | }
19 |
20 | interface StoreMethods {
21 | dispatch: Dispatch;
22 | getState(): any;
23 | }
24 |
25 |
26 | interface MiddlewareArg {
27 | dispatch: Dispatch;
28 | getState: Function;
29 | }
30 |
31 | interface Middleware extends Function {
32 | (obj: MiddlewareArg): Function;
33 | }
34 |
35 | class Store {
36 | getReducer(): Reducer;
37 | replaceReducer(nextReducer: Reducer): void;
38 | dispatch(action: any): any;
39 | getState(): any;
40 | subscribe(listener: Function): Function;
41 | }
42 |
43 | function createStore(reducer: Reducer, initialState?: any): Store;
44 | function bindActionCreators(actionCreators: T, dispatch: Dispatch): T;
45 | function combineReducers(reducers: any): Reducer;
46 | function applyMiddleware(...middlewares: Middleware[]): Function;
47 | function compose(...functions: Function[]): T;
48 | }
49 |
50 | declare module "redux" {
51 | export = Redux;
52 | }
53 |
--------------------------------------------------------------------------------
/typescript/typings/socket.io-client.d.ts:
--------------------------------------------------------------------------------
1 | // Type definitions for socket.io-client 1.4.4
2 | // Project: http://socket.io/
3 | // Definitions by: PROGRE , Damian Connolly , Florent Poujol
4 | // Definitions: https://github.com/borisyankov/DefinitelyTyped
5 |
6 | declare var io: SocketIOClientStatic;
7 |
8 | declare module 'socket.io-client' {
9 | export = io;
10 | }
11 |
12 | interface SocketIOClientStatic {
13 |
14 | /**
15 | * Looks up an existing 'Manager' for multiplexing. If the user summons:
16 | * 'io( 'http://localhost/a' );'
17 | * 'io( 'http://localhost/b' );'
18 | *
19 | * We reuse the existing instance based on the same scheme/port/host, and
20 | * we initialize sockets for each namespace. If autoConnect isn't set to
21 | * false in the options, then we'll automatically connect
22 | * @param uri The uri that we'll connect to, including the namespace, where '/' is the default one (e.g. http://localhost:4000/somenamespace)
23 | * @opts Any connect options that we want to pass along
24 | * @return A Socket object
25 | */
26 | ( uri: string, opts?: SocketIOClient.ConnectOpts ): SocketIOClient.Socket;
27 |
28 | /**
29 | * Auto-connects to the window location and defalt namespace.
30 | * E.g. window.protocol + '//' + window.host + ':80/'
31 | * @opts Any connect options that we want to pass along
32 | * @return A Socket object
33 | */
34 | ( opts?: SocketIOClient.ConnectOpts ): SocketIOClient.Socket;
35 |
36 | /**
37 | * @see the default constructor (io(uri, opts))
38 | */
39 | connect( uri: string, opts?: SocketIOClient.ConnectOpts ): SocketIOClient.Socket;
40 |
41 | /**
42 | * @see the default constructor (io(opts))
43 | */
44 | connect( opts?: SocketIOClient.ConnectOpts ): SocketIOClient.Socket;
45 |
46 | /**
47 | * The socket.io protocol revision number this client works with
48 | * @default 4
49 | */
50 | protocol: number;
51 |
52 | /**
53 | * Socket constructor - exposed for the standalone build
54 | */
55 | Socket: SocketIOClient.Socket;
56 |
57 | /**
58 | * Manager constructor - exposed for the standalone build
59 | */
60 | Manager: SocketIOClient.ManagerStatic;
61 | }
62 |
63 | declare module SocketIOClient {
64 |
65 | /**
66 | * The base emiter class, used by Socket and Manager
67 | */
68 | interface Emitter {
69 | /**
70 | * Adds a listener for a particular event. Calling multiple times will add
71 | * multiple listeners
72 | * @param event The event that we're listening for
73 | * @param fn The function to call when we get the event. Parameters depend on the
74 | * event in question
75 | * @return This Emitter
76 | */
77 | on( event: string, fn: Function ):Emitter;
78 |
79 | /**
80 | * @see on( event, fn )
81 | */
82 | addEventListener( event: string, fn: Function ):Emitter;
83 |
84 | /**
85 | * Adds a listener for a particular event that will be invoked
86 | * a single time before being automatically removed
87 | * @param event The event that we're listening for
88 | * @param fn The function to call when we get the event. Parameters depend on
89 | * the event in question
90 | * @return This Emitter
91 | */
92 | once( event: string, fn: Function ):Emitter;
93 |
94 | /**
95 | * Removes a listener for a particular type of event. This will either
96 | * remove a specific listener, or all listeners for this type of event
97 | * @param event The event that we want to remove the listener of
98 | * @param fn The function to remove, or null if we want to remove all functions
99 | * @return This Emitter
100 | */
101 | off( event: string, fn?: Function ):Emitter;
102 |
103 | /**
104 | * @see off( event, fn )
105 | */
106 | removeListener( event: string, fn?: Function ):Emitter;
107 |
108 | /**
109 | * @see off( event, fn )
110 | */
111 | removeEventListener( event: string, fn?: Function ):Emitter;
112 |
113 | /**
114 | * Removes all event listeners on this object
115 | * @return This Emitter
116 | */
117 | removeAllListeners():Emitter;
118 |
119 | /**
120 | * Emits 'event' with the given args
121 | * @param event The event that we want to emit
122 | * @param args Optional arguments to emit with the event
123 | * @return Emitter
124 | */
125 | emit( event: string, ...args: any[] ):Emitter;
126 |
127 | /**
128 | * Returns all the callbacks for a particular event
129 | * @param event The event that we're looking for the callbacks of
130 | * @return An array of callback Functions, or an empty array if we don't have any
131 | */
132 | listeners( event: string ):Function[];
133 |
134 | /**
135 | * Returns if we have listeners for a particular event
136 | * @param event The event that we want to check if we've listeners for
137 | * @return True if we have listeners for this event, false otherwise
138 | */
139 | hasListeners( event: string ):boolean;
140 | }
141 |
142 | /**
143 | * The Socket static interface
144 | */
145 | interface SocketStatic {
146 |
147 | /**
148 | * Creates a new Socket, used for communicating with a specific namespace
149 | * @param io The Manager that's controlling this socket
150 | * @param nsp The namespace that this socket is for (@default '/')
151 | * @return A new Socket
152 | */
153 | ( io: SocketIOClient.Manager, nsp: string ): Socket;
154 |
155 | /**
156 | * Creates a new Socket, used for communicating with a specific namespace
157 | * @param io The Manager that's controlling this socket
158 | * @param nsp The namespace that this socket is for (@default '/')
159 | * @return A new Socket
160 | */
161 | new ( url: string, opts: any ): SocketIOClient.Manager;
162 | }
163 |
164 | /**
165 | * The Socket that we use to connect to a Namespace on the server
166 | */
167 | interface Socket extends Emitter {
168 |
169 | /**
170 | * The Manager that's controller this socket
171 | */
172 | io: SocketIOClient.Manager;
173 |
174 | /**
175 | * The namespace that this socket is for
176 | * @default '/'
177 | */
178 | nsp: string;
179 |
180 | /**
181 | * The ID of the socket; matches the server ID and is set when we're connected, and cleared
182 | * when we're disconnected
183 | */
184 | id: string;
185 |
186 | /**
187 | * Are we currently connected?
188 | * @default false
189 | */
190 | connected: boolean;
191 |
192 | /**
193 | * Are we currently disconnected?
194 | * @default true
195 | */
196 | disconnected: boolean;
197 |
198 | /**
199 | * Opens our socket so that it connects. If the 'autoConnect' option for io is
200 | * true (default), then this is called automatically when the Socket is created
201 | */
202 | open(): Socket;
203 |
204 | /**
205 | * @see open();
206 | */
207 | connect(): Socket;
208 |
209 | /**
210 | * Sends a 'message' event
211 | * @param args Any optional arguments that we want to send
212 | * @see emit
213 | * @return This Socket
214 | */
215 | send( ...args: any[] ):Socket;
216 |
217 | /**
218 | * An override of the base emit. If the event is one of:
219 | * connect
220 | * connect_error
221 | * connect_timeout
222 | * connecting
223 | * disconnect
224 | * error
225 | * reconnect
226 | * reconnect_attempt
227 | * reconnect_failed
228 | * reconnect_error
229 | * reconnecting
230 | * ping
231 | * pong
232 | * then the event is emitted normally. Otherwise, if we're connected, the
233 | * event is sent. Otherwise, it's buffered.
234 | *
235 | * If the last argument is a function, then it will be called
236 | * as an 'ack' when the response is received. The parameter(s) of the
237 | * ack will be whatever data is returned from the event
238 | * @param event The event that we're emitting
239 | * @param args Optional arguments to send with the event
240 | * @return This Socket
241 | */
242 | emit( event: string, ...args: any[] ):Socket;
243 |
244 | /**
245 | * Disconnects the socket manually
246 | * @return This Socket
247 | */
248 | close():Socket;
249 |
250 | /**
251 | * @see close()
252 | */
253 | disconnect():Socket;
254 |
255 | /**
256 | * Sets the compress flag.
257 | * @param compress If `true`, compresses the sending data
258 | * @return this Socket
259 | */
260 | compress(compress: boolean):Socket;
261 | }
262 |
263 | /**
264 | * The Manager static interface
265 | */
266 | interface ManagerStatic {
267 | /**
268 | * Creates a new Manager
269 | * @param uri The URI that we're connecting to (e.g. http://localhost:4000)
270 | * @param opts Any connection options that we want to use (and pass to engine.io)
271 | * @return A Manager
272 | */
273 | ( uri: string, opts?: SocketIOClient.ConnectOpts ): SocketIOClient.Manager;
274 |
275 | /**
276 | * Creates a new Manager with the default URI (window host)
277 | * @param opts Any connection options that we want to use (and pass to engine.io)
278 | */
279 | ( opts: SocketIOClient.ConnectOpts ):SocketIOClient.Manager;
280 |
281 | /**
282 | * @see default constructor
283 | */
284 | new ( uri: string, opts?: SocketIOClient.ConnectOpts ): SocketIOClient.Manager;
285 |
286 | /**
287 | * @see default constructor
288 | */
289 | new ( opts: SocketIOClient.ConnectOpts ):SocketIOClient.Manager;
290 | }
291 |
292 | /**
293 | * The Manager class handles all the Namespaces and Sockets that we're using
294 | */
295 | interface Manager extends Emitter {
296 |
297 | /**
298 | * All the namespaces currently controlled by this Manager, and the Sockets
299 | * that we're using to communicate with them
300 | */
301 | nsps: { [namespace:string]: Socket };
302 |
303 | /**
304 | * The connect options that we used when creating this Manager
305 | */
306 | opts: SocketIOClient.ConnectOpts;
307 |
308 | /**
309 | * The state of the Manager. Either 'closed', 'opening', or 'open'
310 | */
311 | readyState: string;
312 |
313 | /**
314 | * The URI that this manager is for (host + port), e.g. 'http://localhost:4000'
315 | */
316 | uri: string;
317 |
318 | /**
319 | * The currently connected sockets
320 | */
321 | connecting: Socket[];
322 |
323 | /**
324 | * If we should auto connect (also used when creating Sockets). Set via the
325 | * opts object
326 | */
327 | autoConnect: boolean;
328 |
329 | /**
330 | * Gets if we should reconnect automatically
331 | * @default true
332 | */
333 | reconnection(): boolean;
334 |
335 | /**
336 | * Sets if we should reconnect automatically
337 | * @param v True if we should reconnect automatically, false otherwise
338 | * @default true
339 | * @return This Manager
340 | */
341 | reconnection( v: boolean ): Manager;
342 |
343 | /**
344 | * Gets the number of reconnection attempts we should try before giving up
345 | * @default Infinity
346 | */
347 | reconnectionAttempts(): number;
348 |
349 | /**
350 | * Sets the number of reconnection attempts we should try before giving up
351 | * @param v The number of attempts we should do before giving up
352 | * @default Infinity
353 | * @return This Manager
354 | */
355 | reconnectionAttempts( v: number ): Manager;
356 |
357 | /**
358 | * Gets the delay in milliseconds between each reconnection attempt
359 | * @default 1000
360 | */
361 | reconnectionDelay(): number;
362 |
363 | /**
364 | * Sets the delay in milliseconds between each reconnection attempt
365 | * @param v The delay in milliseconds
366 | * @default 1000
367 | * @return This Manager
368 | */
369 | reconnectionDelay( v: number ): Manager;
370 |
371 | /**
372 | * Gets the max reconnection delay in milliseconds between each reconnection
373 | * attempt
374 | * @default 5000
375 | */
376 | reconnectionDelayMax(): number;
377 |
378 | /**
379 | * Sets the max reconnection delay in milliseconds between each reconnection
380 | * attempt
381 | * @param v The max reconnection dleay in milliseconds
382 | * @return This Manager
383 | */
384 | reconnectionDelayMax( v: number ): Manager;
385 |
386 | /**
387 | * Gets the randomisation factor used in the exponential backoff jitter
388 | * when reconnecting
389 | * @default 0.5
390 | */
391 | randomizationFactor(): number;
392 |
393 | /**
394 | * Sets the randomisation factor used in the exponential backoff jitter
395 | * when reconnecting
396 | * @param The reconnection randomisation factor
397 | * @default 0.5
398 | * @return This Manager
399 | */
400 | randomizationFactor( v: number ): Manager;
401 |
402 | /**
403 | * Gets the timeout in milliseconds for our connection attempts
404 | * @default 20000
405 | */
406 | timeout(): number;
407 |
408 | /**
409 | * Sets the timeout in milliseconds for our connection attempts
410 | * @param The connection timeout milliseconds
411 | * @return This Manager
412 | */
413 | timeout(v: boolean): Manager;
414 |
415 | /**
416 | * Sets the current transport socket and opens our connection
417 | * @param fn An optional callback to call when our socket has either opened, or
418 | * failed. It can take one optional parameter of type Error
419 | * @return This Manager
420 | */
421 | open( fn?: (err?: any) => void ): Manager;
422 |
423 | /**
424 | * @see open( fn );
425 | */
426 | connect( fn?: (err?: any) => void ): Manager;
427 |
428 | /**
429 | * Creates a new Socket for the given namespace
430 | * @param nsp The namespace that this Socket is for
431 | * @return A new Socket, or if one has already been created for this namespace,
432 | * an existing one
433 | */
434 | socket( nsp: string ): Socket;
435 | }
436 |
437 | /**
438 | * Options we can pass to the socket when connecting
439 | */
440 | interface ConnectOpts {
441 |
442 | /**
443 | * Should we force a new Manager for this connection?
444 | * @default false
445 | */
446 | forceNew?: boolean;
447 |
448 | /**
449 | * Should we multiplex our connection (reuse existing Manager) ?
450 | * @default true
451 | */
452 | multiplex?: boolean;
453 |
454 | /**
455 | * The path to get our client file from, in the case of the server
456 | * serving it
457 | * @default '/socket.io'
458 | */
459 | path?: string;
460 |
461 | /**
462 | * Should we allow reconnections?
463 | * @default true
464 | */
465 | reconnection?: boolean;
466 |
467 | /**
468 | * How many reconnection attempts should we try?
469 | * @default Infinity
470 | */
471 | reconnectionAttempts?: number;
472 |
473 | /**
474 | * The time delay in milliseconds between reconnection attempts
475 | * @default 1000
476 | */
477 | reconnectionDelay?: number;
478 |
479 | /**
480 | * The max time delay in milliseconds between reconnection attempts
481 | * @default 5000
482 | */
483 | reconnectionDelayMax?: number;
484 |
485 | /**
486 | * Used in the exponential backoff jitter when reconnecting
487 | * @default 0.5
488 | */
489 | randomizationFactor?: number;
490 |
491 | /**
492 | * The timeout in milliseconds for our connection attempt
493 | * @default 20000
494 | */
495 | timeout?: number;
496 |
497 | /**
498 | * Should we automically connect?
499 | * @default true
500 | */
501 | autoConnect?: boolean;
502 |
503 | /**
504 | * The host that we're connecting to. Set from the URI passed when connecting
505 | */
506 | host?: string;
507 |
508 | /**
509 | * The hostname for our connection. Set from the URI passed when connecting
510 | */
511 | hostname?: string;
512 |
513 | /**
514 | * If this is a secure connection. Set from the URI passed when connecting
515 | */
516 | secure?: boolean;
517 |
518 | /**
519 | * The port for our connection. Set from the URI passed when connecting
520 | */
521 | port?: string;
522 |
523 | /**
524 | * Any query parameters in our uri. Set from the URI passed when connecting
525 | */
526 | query?: Object;
527 |
528 | /**
529 | * `http.Agent` to use, defaults to `false` (NodeJS only)
530 | */
531 | agent?: string|boolean;
532 |
533 | /**
534 | * Whether the client should try to upgrade the transport from
535 | * long-polling to something better.
536 | * @default true
537 | */
538 | upgrade?: boolean;
539 |
540 | /**
541 | * Forces JSONP for polling transport.
542 | */
543 | forceJSONP?: boolean;
544 |
545 | /**
546 | * Determines whether to use JSONP when necessary for polling. If
547 | * disabled (by settings to false) an error will be emitted (saying
548 | * "No transports available") if no other transports are available.
549 | * If another transport is available for opening a connection (e.g.
550 | * WebSocket) that transport will be used instead.
551 | * @default true
552 | */
553 | jsonp?: boolean;
554 |
555 | /**
556 | * Forces base 64 encoding for polling transport even when XHR2
557 | * responseType is available and WebSocket even if the used standard
558 | * supports binary.
559 | */
560 | forceBase64?: boolean;
561 |
562 | /**
563 | * Enables XDomainRequest for IE8 to avoid loading bar flashing with
564 | * click sound. default to `false` because XDomainRequest has a flaw
565 | * of not sending cookie.
566 | * @default false
567 | */
568 | enablesXDR?: boolean;
569 |
570 | /**
571 | * The param name to use as our timestamp key
572 | * @default 't'
573 | */
574 | timestampParam?: string;
575 |
576 | /**
577 | * Whether to add the timestamp with each transport request. Note: this
578 | * is ignored if the browser is IE or Android, in which case requests
579 | * are always stamped
580 | * @default false
581 | */
582 | timestampRequests?: boolean;
583 |
584 | /**
585 | * A list of transports to try (in order). Engine.io always attempts to
586 | * connect directly with the first one, provided the feature detection test
587 | * for it passes.
588 | * @default ['polling','websocket']
589 | */
590 | transports?: string[];
591 |
592 | /**
593 | * The port the policy server listens on
594 | * @default 843
595 | */
596 | policyPost?: number;
597 |
598 | /**
599 | * If true and if the previous websocket connection to the server succeeded,
600 | * the connection attempt will bypass the normal upgrade process and will
601 | * initially try websocket. A connection attempt following a transport error
602 | * will use the normal upgrade process. It is recommended you turn this on
603 | * only when using SSL/TLS connections, or if you know that your network does
604 | * not block websockets.
605 | * @default false
606 | */
607 | rememberUpgrade?: boolean;
608 |
609 | /**
610 | * Are we only interested in transports that support binary?
611 | */
612 | onlyBinaryUpgrades?: boolean;
613 |
614 | /**
615 | * (SSL) Certificate, Private key and CA certificates to use for SSL.
616 | * Can be used in Node.js client environment to manually specify
617 | * certificate information.
618 | */
619 | pfx?: string;
620 |
621 | /**
622 | * (SSL) Private key to use for SSL. Can be used in Node.js client
623 | * environment to manually specify certificate information.
624 | */
625 | key?: string;
626 |
627 | /**
628 | * (SSL) A string or passphrase for the private key or pfx. Can be
629 | * used in Node.js client environment to manually specify certificate
630 | * information.
631 | */
632 | passphrase?: string
633 |
634 | /**
635 | * (SSL) Public x509 certificate to use. Can be used in Node.js client
636 | * environment to manually specify certificate information.
637 | */
638 | cert?: string;
639 |
640 | /**
641 | * (SSL) An authority certificate or array of authority certificates to
642 | * check the remote host against.. Can be used in Node.js client
643 | * environment to manually specify certificate information.
644 | */
645 | ca?: string|string[];
646 |
647 | /**
648 | * (SSL) A string describing the ciphers to use or exclude. Consult the
649 | * [cipher format list]
650 | * (http://www.openssl.org/docs/apps/ciphers.html#CIPHER_LIST_FORMAT) for
651 | * details on the format.. Can be used in Node.js client environment to
652 | * manually specify certificate information.
653 | */
654 | ciphers?: string;
655 |
656 | /**
657 | * (SSL) If true, the server certificate is verified against the list of
658 | * supplied CAs. An 'error' event is emitted if verification fails.
659 | * Verification happens at the connection level, before the HTTP request
660 | * is sent. Can be used in Node.js client environment to manually specify
661 | * certificate information.
662 | */
663 | rejectUnauthorized?: boolean;
664 |
665 | }
666 | }
667 |
--------------------------------------------------------------------------------
/typescript/typings/webpack.d.ts:
--------------------------------------------------------------------------------
1 |
2 | declare var __DEVELOPMENT__: any;
3 | declare var System: any;
4 |
5 | interface NodeModule {
6 | hot: any;
7 | }
8 |
--------------------------------------------------------------------------------
/typescript/universal/Routes.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { IndexRoute, Route } from 'react-router';
3 | import { Store } from 'redux';
4 |
5 | import { endLoading } from './redux/modules/global';
6 | import App from './containers/App';
7 | import Main from './containers/ShopPage';
8 | import Product from './containers/ProductPage';
9 | import ReducerRegistry from './redux/ReducerRegistry';
10 | import IAppState from './interfaces/AppState';
11 |
12 | // Require ensure shim
13 | if(typeof (require as any).ensure !== "function") (require as any).ensure = function(d, c) { c(require) };
14 | if(typeof (require as any).include !== "function") (require as any).include = function() {};
15 |
16 | const ENV = typeof global !== 'undefined' ? (global as any).ENV : 'client';
17 |
18 | export default class routes {
19 |
20 | private store: Store = null;
21 | private reducerRegistry: any = null;
22 |
23 | constructor(reducerRegistry) {
24 | this.reducerRegistry = reducerRegistry;
25 | }
26 |
27 | /**
28 | * Only need to inject this on the CLIENT side for lazy loading
29 | */
30 | injectStore(store: Store) {
31 | this.store = store;
32 | }
33 |
34 | configure() {
35 | return (
36 |
37 |
38 |
39 |
40 |
41 | );
42 | }
43 |
44 |
45 | /**
46 | * ROUTE HANDLERS
47 | */
48 | private getShopPage(location, cb) {
49 | if (ENV === 'client') {
50 | System.import('./containers/ShopPage')
51 | .then(container => this.changeScreen(location, cb, container))
52 | .catch(err => console.log('Epic fail: ShopPage -- ', err));
53 | } else {
54 | (require as any).ensure(['./containers/ShopPage'], require => {
55 | const container = require('./containers/ShopPage').default;
56 | this.changeScreen(location, cb, container)
57 | });
58 | }
59 | }
60 | private getProductPage(location, cb) {
61 | if (ENV === 'client') {
62 | Promise.all([
63 | System.import('./containers/ProductPage'),
64 | System.import('./redux/modules/productPage')
65 | ])
66 | .then(([container, reducer]: any) => this.changeScreen(location, cb, container, { reducer }))
67 | .catch(err => console.log('Epic fail: ProductPage -- ', err));
68 | } else {
69 | (require as any).ensure(['./containers/ProductPage', './redux/modules/productPage'], require => {
70 | const reducer = { ['productPage']: require('./redux/modules/productPage').default };
71 | const container = require('./containers/ProductPage').default;
72 | this.changeScreen(location, cb, container, reducer)
73 | });
74 | }
75 | }
76 | private getCheckoutPage(location, cb) {
77 | if (ENV === 'client') {
78 | System.import('./containers/CheckoutPage')
79 | .then(container => this.changeScreen(location, cb, container))
80 | .catch(err => console.log('Epic fail: CheckoutPage -- ', err));
81 | } else {
82 | (require as any).ensure(['./containers/CheckoutPage'], require => {
83 | const container = require('./containers/CheckoutPage').default;
84 | this.changeScreen(location, cb, container)
85 | });
86 | }
87 | }
88 |
89 |
90 | private changeScreen(
91 | location: HistoryModule.Location,
92 | cb: Function,
93 | component: React.Component,
94 | reducer?: any
95 | ) {
96 | if (reducer) {
97 | this.reducerRegistry.register(reducer);
98 | }
99 |
100 | if (!this.store) {
101 | cb(null, component);
102 | } else if (this.store.getState().routing.location.pathname === location.pathname) {
103 | cb(null, component);
104 | this.store.dispatch(endLoading);
105 | }
106 | }
107 | }
108 |
--------------------------------------------------------------------------------
/typescript/universal/components/AddFundsForm.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as ReactDOM from 'react-dom';
3 | import * as classNames from 'classnames';
4 | import * as ReactCSSTransitionGroup from 'react-addons-css-transition-group';
5 | import { connect } from 'react-redux';
6 | import IAppState from '../interfaces/AppState';
7 | import Finput from './Finput';
8 |
9 | interface IAddFundsFormProps {
10 | onSubmit: Function;
11 | }
12 | interface IAddFundsFormState {}
13 |
14 | export default class AddFundsForm extends React.Component {
15 | render() : React.ReactElement {
16 |
17 | return (
18 |
19 |
20 |
21 |
22 |
26 |
27 |
28 | );
29 | }
30 |
31 | addFunds() {
32 | console.log(this.refs['finput']);
33 | const finput = this.refs['finput'] as Finput;
34 | this.props.onSubmit(finput.getRawValue());
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/typescript/universal/components/Alerts/Alert.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { connect } from 'react-redux'
3 | import { routeActions } from 'react-router-redux'
4 | import IAlert from '../../interfaces/Alert';
5 | import { alertClasses } from '../../constants/AlertTypes';
6 | const Helmet = require('react-helmet');
7 | const classNames = require('classnames');
8 |
9 | const ALERT_LIFESPAN = 4000;
10 |
11 | interface IAlertProps {
12 | key?: any;
13 | alert?: IAlert;
14 | dismissAlert?: Function;
15 | }
16 |
17 | export default class Alert extends React.Component {
18 | alertTimeout: number;
19 |
20 | componentDidMount() {
21 | this.alertTimeout = setTimeout(this.props.dismissAlert, ALERT_LIFESPAN);
22 | }
23 |
24 | render() : React.ReactElement {
25 | return (
26 | this.dismissAlert()}>
28 |
{this.props.alert.title}
29 |
30 |
20 |
21 |
22 | );
23 |
24 | return (
25 |
26 |
Your Cart
27 |
28 |
{nodes}
29 |
30 |
31 | Total -
32 | £{this.props.total}
33 |
34 |
37 |
38 |
39 |
24 |
CHECKOUT
25 |
26 |
27 | {
28 | this.props.products.map(product =>
29 |
30 |
31 |
32 | )
33 | }
34 |
35 |
36 |
37 | Total -
38 | £{this.props.total}
39 |
40 |
41 |
46 |
22 |
23 |
24 |
{this.props.title}
25 |
26 | close
27 |
28 |
29 | {this.props.children}
30 |
31 |
32 |
9 |
10 |
Simulating page load delay
11 |
25 |
26 |
27 |
28 |
29 |
34 |
35 | £{this.props.price}
36 | {this.props.quantity ? `x ${this.props.quantity}` : null}
37 | {this.props.quantityControls}
38 |
39 | {
40 | this.props.description &&
41 |
42 | {this.props.description}
43 |
44 | }
45 |
46 |
47 | {
48 | this.props.removeButton &&
49 |
50 | {this.props.removeButton}
51 |
52 | }
53 |
19 |
27 |
28 |
32 | {
33 | product.quantity > 0
34 | ? add_shopping_cart
35 | : Sold out
36 | }
37 |
38 |
39 |
this.props.onPageSelected(this.props.page - 1)}>
40 | keyboard_arrow_left
41 |
42 | )
43 | }
44 |
45 | // All page numbers
46 | for (let i = linksStart; i <= linksEnd; i++) {
47 | const classes = classNames(
48 | "pagination-link",
49 | i === this.props.page ? 'active' : ''
50 | )
51 | links.push(
52 | this.props.onPageSelected(i)} >
53 | {i}
54 |
55 | )
56 | }
57 |
58 | // FORWARD arrow
59 | if (this.props.page < this.props.pages) {
60 | links.push(
61 | this.props.onPageSelected(this.props.page + 1)}>
63 | keyboard_arrow_right
64 |
65 | )
66 | }
67 |
68 | return (
69 |
70 | { links }
71 |
72 | );
73 | }
74 | }
75 |
76 | export default ProductsListPagination;
77 |
--------------------------------------------------------------------------------
/typescript/universal/components/Product/ProductsList.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | interface IProductsListProps {
4 | children?: React.ReactElement[];
5 | total: number;
6 | pageTotal: number;
7 | pageLimit: number;
8 | currentPage: number;
9 | pages: number;
10 | }
11 |
12 | class ProductsList extends React.Component {
13 | render() : React.ReactElement {
14 | const startIndex = this.props.pageLimit * (this.props.currentPage - 1) + 1;
15 |
16 | return (
17 |
18 |
19 |
Products
20 |
21 | {startIndex} - {startIndex + this.props.pageTotal - 1}
22 | of
23 | {this.props.total}
24 |
25 |
26 |
Page {this.props.currentPage} of {this.props.pages}
27 |
{this.props.children}
28 |
34 | {
35 | this.props.product &&
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 | {this.props.product.title}
44 | { Rating }
45 |
46 | £{this.props.product.price}
47 |
48 |
49 |
52 |
53 | }
54 |
70 |
71 | {this.props.children}
72 |
73 |
22 |
23 | {
24 | this.props.alerts.map((a) => (
25 | this.props.removeAlert(a.id)} key={a.id} />
26 | ))
27 | }
28 |
29 |
31 |
32 |
33 |
34 |
35 |
36 | { /* MAIN SECTION */ }
37 |
38 | { this.props.children }
39 |
40 |
41 | { /* PAGE LOADER */ }
42 | {
43 | this.props.loading &&
44 | }
45 |
46 | { /* MODALS */ }
47 |
48 |
52 | {
53 | (() => {
54 | switch (this.props.openModal) {
55 | case Modals.ADD_FUNDS:
56 | return
57 | default:
58 | return null;
59 | }
60 | })()
61 | }
62 |
63 |
64 |
65 |
66 |
this.props.deleteFromCart(product.id)}>
24 | close
25 |
26 | );
27 |
28 | const QuantityControls = (
29 |
30 | {
31 | (this.props.leftInStock > 0) &&
32 | this.props.addToCart(product.id)}>
35 | add_circle_outline
36 |
37 | }
38 | {
39 | (this.props.product.quantity > 1) &&
40 | this.props.removeFromCart(product.id)}>
43 | remove_circle_outline
44 |
45 | }
46 |
47 | );
48 |
49 | return (
50 |
58 |
59 | );
60 | }
61 | }
62 |
63 | function mapStateToProps(state: IAppState, ownProps: IProductListProps) {
64 | return {
65 | leftInStock: getProduct(state.products, ownProps.product.id).quantity
66 | }
67 | }
68 |
69 | export default connect(
70 | mapStateToProps,
71 | { addToCart, removeFromCart, deleteFromCart }
72 | )(ProductList)
73 |
--------------------------------------------------------------------------------
/typescript/universal/containers/CheckoutPage.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import classnames = require('classnames');
3 | import { connect } from 'react-redux';
4 | import { routeActions } from 'react-router-redux';
5 | import { checkout, getProducts, getTotal } from '../redux/modules/cart';
6 | import { endLoading } from '../redux/modules/global';
7 | import { ILocation } from 'history';
8 |
9 | import IProduct from '../interfaces/Product';
10 | import IAppState from '../interfaces/AppState';
11 |
12 | import Product from '../components/Product/Product';
13 | import CheckoutPageComponent from '../components/CheckoutPage';
14 |
15 | interface ICheckoutPageContainerProps {
16 | push?: (String) => any;
17 | endLoading?: Function;
18 | loading?: boolean;
19 | checkout?: (products: IProduct[]) => any;
20 | products: IProduct[];
21 | total: number;
22 | location?: ILocation; // React router gives this to us
23 | }
24 | interface ICheckoutPageContainerState {}
25 |
26 | class ProductContainer extends React.Component {
27 |
28 | componentWillMount(): void {
29 | this.stopLoading();
30 | }
31 | componentWillUpdate(nextProps: ICheckoutPageContainerProps): void {
32 | this.stopLoading(nextProps);
33 | }
34 |
35 | render() : React.ReactElement {
36 | return (
37 | this.checkout()}
41 | />
42 | );
43 | }
44 |
45 | private checkout() {
46 | this.props.checkout(this.props.products);
47 | this.props.push('/');
48 | }
49 | private stopLoading(props = this.props) : void {
50 | if (props.loading)
51 | props.endLoading(props.location.pathname);
52 | }
53 | }
54 |
55 | function mapStateToProps(state: IAppState) {
56 | return {
57 | products: getProducts(state.products, state.cart),
58 | total: getTotal(state.products, state.cart),
59 | loading: state.global.loading
60 | }
61 | }
62 |
63 | export default connect(
64 | mapStateToProps,
65 | Object.assign({},
66 | routeActions,
67 | { checkout, endLoading }
68 | ) as any
69 | )(ProductContainer)
70 |
--------------------------------------------------------------------------------
/typescript/universal/containers/Modals/AddFundsModal.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as ReactCSSTransitionGroup from 'react-addons-css-transition-group';
3 | import { connect } from 'react-redux';
4 | import IAppState from '../../interfaces/AppState';
5 | import Modal from '../../components/Modal';
6 | import AddFundsForm from '../../components/AddFundsForm';
7 | import Modals from '../../constants/Modals';
8 | import { closeModal } from '../../redux/modules/global';
9 | import { addFunds } from '../../redux/modules/user';
10 |
11 | interface IAddFundsModalProps {
12 | closeModal?: (modal: Modals) => any;
13 | addFunds?: (amount: number) => any;
14 | }
15 | interface IAddFundsModalState {}
16 |
17 | class AddFundsModal extends React.Component {
18 |
19 | render() : React.ReactElement {
20 |
21 | return (
22 | this.props.closeModal(Modals.ADD_FUNDS)}
24 | title="Add Funds"
25 | modalClasses="add-funds-modal"
26 | >
27 | this.props.addFunds(amount)} />
28 |
29 | );
30 | }
31 | }
32 |
33 | function mapStateToProps(state: IAppState) {
34 | return {
35 | balance: state.user.balance
36 | }
37 | }
38 |
39 | export default connect(
40 | mapStateToProps,
41 | { closeModal, addFunds }
42 | )(AddFundsModal)
43 |
--------------------------------------------------------------------------------
/typescript/universal/containers/Navbar.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import classNames = require('classnames');
3 | import { connect } from 'react-redux'
4 | import { routeActions } from 'react-router-redux';
5 | import ILink from '../interfaces/Link';
6 | import IUser from '../interfaces/User';
7 | import IAppState from '../interfaces/AppState';
8 | import Modals from '../constants/Modals';
9 | import NavbarComponent from '../components/Navbar';
10 | import { openModal } from '../redux/modules/global';
11 |
12 | // Import styles
13 |
14 | interface INavbarProps {
15 | push?: (String) => any;
16 | routing?: any;
17 | user?: IUser;
18 | openModal?: (modal: Modals) => any;
19 | }
20 |
21 | const links: ILink[] = [
22 | {
23 | title: 'Home',
24 | path: '/'
25 | }
26 | ]
27 |
28 | class NavbarContainer extends React.Component {
29 |
30 | render() : React.ReactElement<{}> {
31 | require('../../../sass/common.scss');
32 |
33 | return (
34 | this.props.push(route)}
36 | onAddFundsClick={() => this.props.openModal(Modals.ADD_FUNDS)}
37 | routing={this.props.routing}
38 | user={this.props.user}
39 | links={links}
40 | />
41 | )
42 | }
43 | }
44 |
45 | function mapStateToProps(state: IAppState) {
46 | return {
47 | routing: state.routing,
48 | user: state.user
49 | }
50 | }
51 |
52 | export default connect(
53 | mapStateToProps,
54 | Object.assign({},
55 | routeActions as any,
56 | { openModal }
57 | )
58 | )(NavbarContainer)
59 |
--------------------------------------------------------------------------------
/typescript/universal/containers/Product/ProductList.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as ReactDOM from 'react-dom';
3 | import * as ReactCSSTransitionGroup from 'react-addons-css-transition-group';
4 | import * as ReactTransitionGroup from 'react-addons-transition-group';
5 | import { connect } from 'react-redux';
6 | import { addToCart } from '../../redux/modules/cart';
7 | import { getVisibleProducts } from '../../redux/modules/products';
8 | import ProductItem from '../../components/Product/ProductItem';
9 | import SpringItem from '../../components/SpringItem';
10 | import ProductsList from '../../components/Product/ProductsList';
11 | import ProductListPagination from '../../components/Product/ProductListPagination';
12 | import IProduct from '../../interfaces/Product';
13 | import IAppState from '../../interfaces/AppState';
14 |
15 |
16 | const PAGE_LENGTH = 10;
17 |
18 | interface IProductListProps {
19 | products?: IProduct[];
20 | addToCart?: React.EventHandler;
21 | }
22 | interface IProductListState {
23 | page?: number;
24 | }
25 |
26 | class ProductList extends React.Component {
27 | state = {
28 | page: 1
29 | }
30 |
31 | render() : React.ReactElement {
32 | const { products } = this.props;
33 |
34 | const pages: IProduct[][] = [];
35 | for (let i = 0; i < this.props.products.length; i += PAGE_LENGTH) {
36 | pages.push(this.props.products.slice(i, i+PAGE_LENGTH));
37 | }
38 |
39 | return (
40 |
46 |
47 | {
48 | pages.map((pageProducts, i) => {
49 |
50 | return (i === this.state.page - 1) &&
51 |
52 | {/*
56 | {
57 | pageProducts.map(product =>
58 | this.props.addToCart(product.id)} />
62 | )
63 | }
64 | */}
65 |
66 | {
67 | pageProducts.map(product =>
68 |
69 | this.props.addToCart(product.id)} />
72 |
73 | )
74 | }
75 |
76 |
;
77 | })
78 | }
79 |
32 |
SHOP
33 |
34 |
35 |
36 |
37 |