4089579833

Build Type

push

github

Committed by GitHub

Commit Message

build(deps): bump http-cache-semantics from 4.1.0 to 4.1.1

Run Details

49 of 120 branches covered (40.83%)

Branch coverage included in aggregate %.

150 of 432 relevant lines covered (34.72%)

8.99 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/dev-helpers/src/components/DemoContainer.tsx

import React, { ReactElement, useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';

import { NestedState } from './NestedState';

import { incrementAction, DevHelperState } from '../redux';

export interface DemoContainerProps {
  title: string;
  withRedux?: boolean;
  onMount?: (instanceTitle: string) => void;
  onRender?: (instanceTitle: string) => void;
  onUnmount?: (instanceTitle: string) => void;
}

const selectEntireState = (state: DevHelperState): DevHelperState => state;

let totalInstanceCount = 0;

const DemoContainer: React.FC<DemoContainerProps> = (props: DemoContainerProps): ReactElement => {
  const { title, withRedux, onMount, onRender, onUnmount } = props;

  // A simple per-Component instance counter
  const myInstanceNumRef = useRef(0);
  if (!myInstanceNumRef.current) {
    totalInstanceCount++;
    myInstanceNumRef.current = totalInstanceCount;
  }
  const myInstanceNum = myInstanceNumRef.current;

  const titleWithMyInstanceNum = `${title} (#${myInstanceNum})`;

  const mountTimeString = useRef(new Date().toUTCString()).current;
  const renderCount = ++useRef(0).current;

  useEffect((): (() => void) => {
    console.log(`DemoContainer ${titleWithMyInstanceNum} mounted`);
    if (onMount) {
      // Wait an extra tick for Storybook to catch up, or else actions won't be logged
      setTimeout(() => onMount(titleWithMyInstanceNum));
    }
    return (): void => {
      console.log(`DemoContainer ${titleWithMyInstanceNum} unmounted`);
      if (onUnmount) {
        setTimeout(() => onUnmount(titleWithMyInstanceNum));
      }
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    console.log(`DemoContainer ${titleWithMyInstanceNum} rendered`);
    if (onRender) {
      onRender(titleWithMyInstanceNum);
    }
  });

  // Our own local state
  const [value1, setValue1] = useState('');
  // Global state, if appropriate
  let reduxContent;
  if (withRedux) {
    // @TODO: Split this into two components (with/without Redux) so that we don't call things conditionally
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const state = useSelector(selectEntireState);
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const dispatch = useDispatch();

    reduxContent = (
      <Grid item xs={4}>
        <p>A redux-connected component</p>
        <Button
          variant="contained"
          onClick={(): void => {
            dispatch(incrementAction());
          }}
        >
          Dispatch a counter update
        </Button>
        <pre>{JSON.stringify(state, null, 2)}</pre>
      </Grid>
    );
  }

  return (
    <fieldset>
      <legend>DemoContainer: {titleWithMyInstanceNum}</legend>
      <p>
        Mounted at {mountTimeString}, rendered {renderCount} times.
      </p>
      <Grid container>
        <Grid item xs={4}>
          <p>Controlled input: value is in DemoContainer&apos;s state</p>
          <TextField
            label="Component state"
            variant="outlined"
            value={value1}
            onChange={(e): void => {
              setValue1(e.target.value);
            }}
          />

          <p>Raw input: value is in dom only</p>
          <TextField label="DOM state" variant="outlined" />
        </Grid>
        <Grid item xs={4}>
          <p>Nested components with their own state</p>
          <NestedState />
          <NestedState />
        </Grid>
        {!!withRedux && reduxContent}
      </Grid>
    </fieldset>
  );
};
DemoContainer.defaultProps = {
  withRedux: false,
};

export { DemoContainer };

1	import React, { ReactElement, useEffect, useRef, useState } from 'react';	×
2	import { useDispatch, useSelector } from 'react-redux';	×
3	import Button from '@material-ui/core/Button';	×
4	import Grid from '@material-ui/core/Grid';	×
5	import TextField from '@material-ui/core/TextField';	×
6
7	import { NestedState } from './NestedState';	×
8
9	import { incrementAction, DevHelperState } from '../redux';	×
10
11	export interface DemoContainerProps {
12	title: string;
13	withRedux?: boolean;
14	onMount?: (instanceTitle: string) => void;
15	onRender?: (instanceTitle: string) => void;
16	onUnmount?: (instanceTitle: string) => void;
17	}
18
19	const selectEntireState = (state: DevHelperState): DevHelperState => state;	×
20
21	let totalInstanceCount = 0;	×
22
23	const DemoContainer: React.FC<DemoContainerProps> = (props: DemoContainerProps): ReactElement => {	×
24	const { title, withRedux, onMount, onRender, onUnmount } = props;	×
25
26	// A simple per-Component instance counter
27	const myInstanceNumRef = useRef(0);	×
28	if (!myInstanceNumRef.current) {	×
29	totalInstanceCount++;	×
30	myInstanceNumRef.current = totalInstanceCount;	×
31	}
32	const myInstanceNum = myInstanceNumRef.current;	×
33
34	const titleWithMyInstanceNum = `${title} (#${myInstanceNum})`;	×
35
36	const mountTimeString = useRef(new Date().toUTCString()).current;	×
37	const renderCount = ++useRef(0).current;	×
38
39	useEffect((): (() => void) => {	×
40	console.log(`DemoContainer ${titleWithMyInstanceNum} mounted`);	×
41	if (onMount) {	×
42	// Wait an extra tick for Storybook to catch up, or else actions won't be logged
43	setTimeout(() => onMount(titleWithMyInstanceNum));	×
44	}
45	return (): void => {	×
46	console.log(`DemoContainer ${titleWithMyInstanceNum} unmounted`);	×
47	if (onUnmount) {	×
48	setTimeout(() => onUnmount(titleWithMyInstanceNum));	×
49	}
50	};
51	// eslint-disable-next-line react-hooks/exhaustive-deps
52	}, []);
53
54	useEffect(() => {	×
55	console.log(`DemoContainer ${titleWithMyInstanceNum} rendered`);	×
56	if (onRender) {	×
57	onRender(titleWithMyInstanceNum);	×
58	}
59	});
60
61	// Our own local state
62	const [value1, setValue1] = useState('');	×
63	// Global state, if appropriate
64	let reduxContent;
65	if (withRedux) {	×
66	// @TODO: Split this into two components (with/without Redux) so that we don't call things conditionally
67	// eslint-disable-next-line react-hooks/rules-of-hooks
68	const state = useSelector(selectEntireState);	×
69	// eslint-disable-next-line react-hooks/rules-of-hooks
70	const dispatch = useDispatch();	×
71
72	reduxContent = (	×
73	<Grid item xs={4}>
74	<p>A redux-connected component</p>
75	<Button
76	variant="contained"
77	onClick={(): void => {
78	dispatch(incrementAction());	×
79	}}
80	>
81	Dispatch a counter update
82	</Button>
83	<pre>{JSON.stringify(state, null, 2)}</pre>
84	</Grid>
85	);
86	}
87
88	return (	×
89	<fieldset>
90	<legend>DemoContainer: {titleWithMyInstanceNum}</legend>
91	<p>
92	Mounted at {mountTimeString}, rendered {renderCount} times.
93	</p>
94	<Grid container>
95	<Grid item xs={4}>
96	<p>Controlled input: value is in DemoContainer's state</p>
97	<TextField
98	label="Component state"
99	variant="outlined"
100	value={value1}
101	onChange={(e): void => {
102	setValue1(e.target.value);	×
103	}}
104	/>
105
106	<p>Raw input: value is in dom only</p>
107	<TextField label="DOM state" variant="outlined" />
108	</Grid>
109	<Grid item xs={4}>
110	<p>Nested components with their own state</p>
111	<NestedState />
112	<NestedState />
113	</Grid>
114	{!!withRedux && reduxContent}	×
115	</Grid>
116	</fieldset>
117	);
118	};
119	DemoContainer.defaultProps = {	×
120	withRedux: false,
121	};
122
123	export { DemoContainer };	×

spautz / react-hibernate / 4089579833

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous