9508297937

Committed 13 Jun 2024 11:50PM UTC coverage: 31.853% (+0.002%) from 31.851%

Build # 9508297937

Build Type

Pull #9385

github

Committed by

s-cheng

Commit Message

subscribe button, analytics, etc

Pull Request Pull Request #9385: [EA Forum only] on-site digest page

Run Details

4822 of 39455 branches covered (12.22%)

Branch coverage included in aggregate %.

23 of 69 new or added lines in 10 files covered. (33.33%)

2 existing lines in 2 files now uncovered.

28025 of 63665 relevant lines covered (44.02%)

179.86 hits per line

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

27.03

/packages/lesswrong/components/form-components/ImageUpload2.tsx

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { registerComponent } from '../../lib/vulcan-lib';
import Button from '@material-ui/core/Button';
import classNames from 'classnames';
import { makeCloudinaryImageUrl } from '../common/CloudinaryImage2';
import { ImageType, useImageUpload } from '../hooks/useImageUpload';
import { formPreviewSizeByImageType } from './ImageUpload';

const styles = (theme: ThemeType): JssStyles => ({
  root: {
    "& img": {
      display: "block",
      marginBottom: 8,
    },
  },
  buttonRow: {
    margin: 'auto',
  },
  button: {
    background: theme.palette.buttons.imageUpload2.background,
    "&:hover": {
      background: theme.palette.buttons.imageUpload2.hoverBackground,
    },
    color: theme.palette.text.alwaysWhite, // text is always against a dark background, even in dark mode
    textTransform: 'none',
    margin: 5,
    fontSize: 14,
    paddingTop: 10,
    paddingBottom: 10,
  },
  imageBackground: {
    backgroundColor: theme.palette.grey[25], // fallback to plain background if no image is given
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    display: 'flex',
  },
});


const ImageUpload2 = ({name, value, updateValue, clearField, label, croppingAspectRatio, placeholderUrl, classes}: {
  name: string,
  value: string | null | undefined,
  updateValue: (value: string) => void,
  clearField: Function,
  label: string,
  croppingAspectRatio?: number,
  placeholderUrl?: string,
  classes: ClassesType
}) => {
  const {uploadImage, ImageUploadScript} = useImageUpload({
    imageType: name as ImageType,
    onUploadSuccess: (publicImageId: string) => {
      setImageId(publicImageId);
      updateValue(publicImageId);
    },
    onUploadError: (error: Error) => {
      // eslint-disable-next-line no-console
      console.error("Image Upload failed:", error);
    },
    croppingAspectRatio,
  });

  const removeImg = () => {
    clearField()
    setImageId(null)
  }

  const [imageId, setImageId] = useState(value)
  
  const formPreviewSize = formPreviewSizeByImageType[name as keyof typeof formPreviewSizeByImageType]
  if (!formPreviewSize) throw new Error("Unsupported image upload type")
    
  const imageStyle: React.CSSProperties = {
    aspectRatio: formPreviewSize.width === 'auto' ? '1.91' : `${formPreviewSize.width} / ${formPreviewSize.height}`
  }

  const imageUrl = imageId ? makeCloudinaryImageUrl(imageId, {
    c: "fill",
    dpr: "auto",
    q: "auto",
    f: "auto",
    g: "auto:faces"
  }) : placeholderUrl
  
  if (imageUrl) {
    imageStyle.backgroundImage = `url(${imageUrl})`
  }

  return (
    <div className={classes.root}>
      <ImageUploadScript />
      <div
        className={classes.imageBackground}
        style={imageStyle}
      >
        <div className={classes.buttonRow}>
          <Button
            onClick={uploadImage}
            className={classNames("image-upload-button", classes.button)}
          >
            {imageId ? `Change` : label }
          </Button>
          {imageId &&
            <Button className={classes.button} title="Remove" onClick={removeImg}>
              Remove
            </Button>
          }
        </div>
      </div>
    </div>
  );
};

const ImageUpload2Component = registerComponent("ImageUpload2", ImageUpload2, {styles});

declare global {
  interface ComponentTypes {
    ImageUpload2: typeof ImageUpload2Component
  }
}

1	import React, { useState } from 'react';	1✔
2	import PropTypes from 'prop-types';
3	import { registerComponent } from '../../lib/vulcan-lib';	1✔
4	import Button from '@material-ui/core/Button';	1✔
5	import classNames from 'classnames';	1✔
6	import { makeCloudinaryImageUrl } from '../common/CloudinaryImage2';	1✔
7	import { ImageType, useImageUpload } from '../hooks/useImageUpload';	1✔
8	import { formPreviewSizeByImageType } from './ImageUpload';	1✔
9
10	const styles = (theme: ThemeType): JssStyles => ({	1✔
11	root: {
12	"& img": {
13	display: "block",
14	marginBottom: 8,
15	},
16	},
17	buttonRow: {
18	margin: 'auto',
19	},
20	button: {
21	background: theme.palette.buttons.imageUpload2.background,
22	"&:hover": {
23	background: theme.palette.buttons.imageUpload2.hoverBackground,
24	},
25	color: theme.palette.text.alwaysWhite, // text is always against a dark background, even in dark mode
26	textTransform: 'none',
27	margin: 5,
28	fontSize: 14,
29	paddingTop: 10,
30	paddingBottom: 10,
31	},
32	imageBackground: {
33	backgroundColor: theme.palette.grey[25], // fallback to plain background if no image is given
34	backgroundSize: 'cover',
35	backgroundPosition: 'center',
36	display: 'flex',
37	},
38	});
39
40
41	const ImageUpload2 = ({name, value, updateValue, clearField, label, croppingAspectRatio, placeholderUrl, classes}: {	1✔
42	name: string,
43	value: string \| null \| undefined,
44	updateValue: (value: string) => void,
45	clearField: Function,
46	label: string,
47	croppingAspectRatio?: number,
48	placeholderUrl?: string,
49	classes: ClassesType
50	}) => {
51	const {uploadImage, ImageUploadScript} = useImageUpload({	×
52	imageType: name as ImageType,
53	onUploadSuccess: (publicImageId: string) => {
54	setImageId(publicImageId);	×
55	updateValue(publicImageId);	×
56	},
57	onUploadError: (error: Error) => {
58	// eslint-disable-next-line no-console
59	console.error("Image Upload failed:", error);	×
60	},
61	croppingAspectRatio,
62	});
63
64	const removeImg = () => {	×
65	clearField()	×
66	setImageId(null)	×
67	}
68
69	const [imageId, setImageId] = useState(value)	×
70
NEW 71	const formPreviewSize = formPreviewSizeByImageType[name as keyof typeof formPreviewSizeByImageType]	×
UNCOV 72	if (!formPreviewSize) throw new Error("Unsupported image upload type")	×
73
NEW 74	const imageStyle: React.CSSProperties = {	×
75	aspectRatio: formPreviewSize.width === 'auto' ? '1.91' : `${formPreviewSize.width} / ${formPreviewSize.height}`	×
76	}
77
78	const imageUrl = imageId ? makeCloudinaryImageUrl(imageId, {	×
79	c: "fill",
80	dpr: "auto",
81	q: "auto",
82	f: "auto",
83	g: "auto:faces"
84	}) : placeholderUrl
85
NEW 86	if (imageUrl) {	×
NEW 87	imageStyle.backgroundImage = `url(${imageUrl})`	×
88	}
89
90	return (	×
91	<div className={classes.root}>
92	<ImageUploadScript />
93	<div
94	className={classes.imageBackground}
95	style={imageStyle}
96	>
97	<div className={classes.buttonRow}>
98	<Button
99	onClick={uploadImage}
100	className={classNames("image-upload-button", classes.button)}
101	>
102	{imageId ? `Change` : label }	×
103	</Button>
104	{imageId &&	×
105	<Button className={classes.button} title="Remove" onClick={removeImg}>
106	Remove
107	</Button>
108	}
109	</div>
110	</div>
111	</div>
112	);
113	};
114
115	const ImageUpload2Component = registerComponent("ImageUpload2", ImageUpload2, {styles});	1✔
116
117	declare global {
118	interface ComponentTypes {
119	ImageUpload2: typeof ImageUpload2Component
120	}
121	}

ForumMagnum / ForumMagnum / 9508297937

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