9403038816

Committed 06 Jun 2024 12:04PM UTC coverage: 31.891% (-0.05%) from 31.943%

Build # 9403038816

Build Type

Pull #9373

github

Committed by

oetherington

Commit Message

Add `FormComponentFriendlyTextInput` component

Pull Request Pull Request #9373: [EA] Edit user profile page redesign

Run Details

4815 of 39335 branches covered (12.24%)

Branch coverage included in aggregate %.

19 of 26 new or added lines in 6 files covered. (73.08%)

423 existing lines in 19 files now uncovered.

27989 of 63528 relevant lines covered (44.06%)

180.15 hits per line

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

15.84

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

import React, { useState, useEffect, useRef } from 'react';
import { registerComponent, Components } from '../../lib/vulcan-lib';
import Geosuggest from 'react-geosuggest';
// These imports need to be separate to satisfy eslint, for some reason
import type { Suggest } from 'react-geosuggest';
import { isClient } from '../../lib/executionEnvironment';
import { DatabasePublicSetting } from '../../lib/publicSettings';
import FormLabel from '@material-ui/core/FormLabel';

// Recommended styling for React-geosuggest: https://github.com/ubilabs/react-geosuggest/blob/master/src/geosuggest.css
export const geoSuggestStyles = (theme: ThemeType): JssStyles => ({
  "& .geosuggest": {
    fontSize: "1rem",
    position: "relative",
    paddingRight: 3,
    width: "100%",
    textAlign: "left",
  },
  
  "& .geosuggest__input": {
    backgroundColor: 'transparent',
    border: "2px solid transparent",
    borderBottom: `1px solid ${theme.palette.text.normal}`,
    padding: ".5em .5em 0.5em 0em !important",
    width: 350,
    fontSize: 13,
    color: theme.palette.primary.main,
    [theme.breakpoints.down('sm')]: {
      width: "100%"
    },
  },
  "& .geosuggest__input:focus": {
    outline: "none",
    borderBottom: `2px solid ${theme.palette.text.normal}`,
    borderBottomColor: theme.palette.geosuggest.dropdownActiveBackground,
    boxShadow: "0 0 0 transparent",
  },
  
  "& .geosuggest__suggests": {
    position: "absolute",
    top: "100%",
    left: 0,
    right: 0,
    maxHeight: "25em",
    padding: 0,
    marginTop: -1,
    color: theme.palette.geosuggest.dropdownText,
    background: theme.palette.geosuggest.dropdownBackground,
    borderTopWidth: 0,
    overflowX: "hidden",
    overflowY: "auto",
    listStyle: "none",
    zIndex: 5,
    transition: "max-height 0.2s, border 0.2s",
  },
  "& .geosuggest__suggests--hidden": {
    maxHeight: 0,
    overflow: "hidden",
    borderWidth: 0,
  },
  
  "& .geosuggest__item": {
    fontSize: "1rem",
    padding: ".5em .65em",
    cursor: "pointer",
  },
  "& .geosuggest__item:hover, & .geosuggest__item:focus": {
    background: theme.palette.geosuggest.dropdownHoveredBackground,
  },
  "& .geosuggest__item--active": {
    background: theme.palette.geosuggest.dropdownActiveBackground,
    color: theme.palette.geosuggest.dropdownActiveText,
  },
  "& .geosuggest__item--active:hover, & .geosuggest__item--active:focus": {
    background: theme.palette.geosuggest.dropdownActiveHoveredBackground,
  },
  "& .geosuggest__item__matched-text": {
    fontWeight: "bold",
  }
})

const styles = (theme: ThemeType): JssStyles => ({
  root: {
    ...geoSuggestStyles(theme),
    ...theme.typography.commentStyle
  },
  label: {
    fontSize: 10
  }
});

export const mapsAPIKeySetting = new DatabasePublicSetting<string | null>('googleMaps.apiKey', null)

let mapsLoadingState: "unloaded"|"loading"|"loaded" = "unloaded";
let onMapsLoaded: Array<() => void> = [];

export const useGoogleMaps = (): [boolean, any] => {
  const [isMapsLoaded, setIsMapsLoaded] = useState(false);
  
  useEffect(() => {
    if (isClient) {
      if (mapsLoadingState === "loaded") {
        setIsMapsLoaded(true);
      } else {
        onMapsLoaded.push(() => {
          setIsMapsLoaded(true);
        });
      }
      
      if (mapsLoadingState === "unloaded") {
        mapsLoadingState = "loading";
        
        var tag = document.createElement('script');
        tag.async = false;
        tag.src = `https://maps.googleapis.com/maps/api/js?key=${mapsAPIKeySetting.get()}&libraries=places&callback=googleMapsFinishedLoading`;
        window.googleMapsFinishedLoading = () => {
          mapsLoadingState = "loaded";
          let callbacks = onMapsLoaded;
          onMapsLoaded = [];
          for (let callback of callbacks) {
            callback();
          }
        }
        document.body.appendChild(tag);
      }
    }
  }, []);
  
  if (!isMapsLoaded) return [false, null];
  return [true, window?.google?.maps];
}


/**
 * LocationPicker: A textbox for typing in a location. This is split from LocationFormComponent
 * so that it can be used outside of vulcan-forms.
 */
const LocationPicker = ({document, path, label, value, updateCurrentValues, stringVersionFieldName, classes}: {
  document: any,
  path: string,
  label?: string,
  value: any,
  updateCurrentValues: any,
  stringVersionFieldName?: string|null,
  classes: ClassesType,
}) => {
  // if this location field has a matching field that just stores the string version of the location,
  // make sure to update the matching field along with this one
  const locationFieldName: string|null = stringVersionFieldName || null;

  const location =
    (locationFieldName && document?.[locationFieldName])
    || document?.[path]?.formatted_address
    || ""
  const [ mapsLoaded ] = useGoogleMaps()
  const geosuggestEl = useRef<any>(null)
  
  useEffect(() => {
    if (geosuggestEl && geosuggestEl.current) {
      geosuggestEl.current.update(value?.formatted_address)
    }
  }, [value])
  
  const handleCheckClear = (value: any) => {
    // clear location fields if the user deletes the input text
    if (value === '') {
      updateCurrentValues({
        ...(locationFieldName ? {[locationFieldName]: null} : {}),
        [path]: null,
      })
    }
  }

  const handleSuggestSelect = (suggestion: Suggest) => {
    if (suggestion && suggestion.gmaps) {
      updateCurrentValues({
        ...(locationFieldName ? {
          [locationFieldName]: suggestion.label
        } : {}),
        [path]: suggestion.gmaps,
      })
    }
  }


  if (document && mapsLoaded) {
    return <div className={classes.root}>
      {value && label && <FormLabel className={classes.label}>{label}</FormLabel>}
      <Geosuggest
        ref={geosuggestEl}
        placeholder={label}
        onChange={handleCheckClear}
        onSuggestSelect={handleSuggestSelect}
        initialValue={location}
      />
    </div>
  } else {
    return <Components.Loading/>;
  }
}

const LocationFormComponent = ({document, path, label, value, updateCurrentValues, stringVersionFieldName}: FormComponentProps<any> & {
  stringVersionFieldName?: string|null,
}) => {
  return <Components.LocationPicker
    document={document}
    path={path}
    label={label}
    value={value}
    updateCurrentValues={updateCurrentValues}
    stringVersionFieldName={stringVersionFieldName}
  />
}

const LocationPickerComponent = registerComponent("LocationPicker", LocationPicker, {styles});
const LocationFormComponentComponent = registerComponent("LocationFormComponent", LocationFormComponent, {styles});

declare global {
  interface ComponentTypes {
    LocationPicker: typeof LocationPickerComponent
    LocationFormComponent: typeof LocationFormComponentComponent
  }
}

1	import React, { useState, useEffect, useRef } from 'react';	59✔
2	import { registerComponent, Components } from '../../lib/vulcan-lib';	18✔
3	import Geosuggest from 'react-geosuggest';	18✔
4	// These imports need to be separate to satisfy eslint, for some reason
5	import type { Suggest } from 'react-geosuggest';
6	import { isClient } from '../../lib/executionEnvironment';	18✔
7	import { DatabasePublicSetting } from '../../lib/publicSettings';	18✔
8	import FormLabel from '@material-ui/core/FormLabel';	18✔
9
10	// Recommended styling for React-geosuggest: https://github.com/ubilabs/react-geosuggest/blob/master/src/geosuggest.css
11	export const geoSuggestStyles = (theme: ThemeType): JssStyles => ({	23✔
12	"& .geosuggest": {
13	fontSize: "1rem",
14	position: "relative",
15	paddingRight: 3,
16	width: "100%",
17	textAlign: "left",
18	},
19
20	"& .geosuggest__input": {
21	backgroundColor: 'transparent',
22	border: "2px solid transparent",
23	borderBottom: `1px solid ${theme.palette.text.normal}`,
24	padding: ".5em .5em 0.5em 0em !important",
25	width: 350,
26	fontSize: 13,
27	color: theme.palette.primary.main,
28	[theme.breakpoints.down('sm')]: {
29	width: "100%"
30	},
31	},
32	"& .geosuggest__input:focus": {
33	outline: "none",
34	borderBottom: `2px solid ${theme.palette.text.normal}`,
35	borderBottomColor: theme.palette.geosuggest.dropdownActiveBackground,
36	boxShadow: "0 0 0 transparent",
37	},
38
39	"& .geosuggest__suggests": {
40	position: "absolute",
41	top: "100%",
42	left: 0,
43	right: 0,
44	maxHeight: "25em",
45	padding: 0,
46	marginTop: -1,
47	color: theme.palette.geosuggest.dropdownText,
48	background: theme.palette.geosuggest.dropdownBackground,
49	borderTopWidth: 0,
50	overflowX: "hidden",
51	overflowY: "auto",
52	listStyle: "none",
53	zIndex: 5,
54	transition: "max-height 0.2s, border 0.2s",
55	},
56	"& .geosuggest__suggests--hidden": {
57	maxHeight: 0,
58	overflow: "hidden",
59	borderWidth: 0,
60	},
61
62	"& .geosuggest__item": {
63	fontSize: "1rem",
64	padding: ".5em .65em",
65	cursor: "pointer",
66	},
67	"& .geosuggest__item:hover, & .geosuggest__item:focus": {
68	background: theme.palette.geosuggest.dropdownHoveredBackground,
69	},
70	"& .geosuggest__item--active": {
71	background: theme.palette.geosuggest.dropdownActiveBackground,
72	color: theme.palette.geosuggest.dropdownActiveText,
73	},
74	"& .geosuggest__item--active:hover, & .geosuggest__item--active:focus": {
75	background: theme.palette.geosuggest.dropdownActiveHoveredBackground,
76	},
77	"& .geosuggest__item__matched-text": {
78	fontWeight: "bold",
79	}
80	})
81
82	const styles = (theme: ThemeType): JssStyles => ({	18✔
83	root: {
84	...geoSuggestStyles(theme),
85	...theme.typography.commentStyle
86	},
87	label: {
88	fontSize: 10
89	}
90	});
91
92	export const mapsAPIKeySetting = new DatabasePublicSetting<string \| null>('googleMaps.apiKey', null)	18✔
93
94	let mapsLoadingState: "unloaded"\|"loading"\|"loaded" = "unloaded";	18✔
95	let onMapsLoaded: Array<() => void> = [];	18✔
96
97	export const useGoogleMaps = (): [boolean, any] => {	18✔
98	const [isMapsLoaded, setIsMapsLoaded] = useState(false);	×
99
100	useEffect(() => {	×
101	if (isClient) {	×
102	if (mapsLoadingState === "loaded") {	×
103	setIsMapsLoaded(true);	×
104	} else {
UNCOV 105	onMapsLoaded.push(() => {	×
UNCOV 106	setIsMapsLoaded(true);	×
107	});
108	}
109
UNCOV 110	if (mapsLoadingState === "unloaded") {	×
UNCOV 111	mapsLoadingState = "loading";	×
112
UNCOV 113	var tag = document.createElement('script');	×
114	tag.async = false;	×
115	tag.src = `https://maps.googleapis.com/maps/api/js?key=${mapsAPIKeySetting.get()}&libraries=places&callback=googleMapsFinishedLoading`;	×
116	window.googleMapsFinishedLoading = () => {	×
117	mapsLoadingState = "loaded";	×
UNCOV 118	let callbacks = onMapsLoaded;	×
119	onMapsLoaded = [];	×
120	for (let callback of callbacks) {	×
UNCOV 121	callback();	×
122	}
123	}
124	document.body.appendChild(tag);	×
125	}
126	}
127	}, []);
128
129	if (!isMapsLoaded) return [false, null];	×
130	return [true, window?.google?.maps];	×
131	}
132
133
134	/**
135	* LocationPicker: A textbox for typing in a location. This is split from LocationFormComponent
136	* so that it can be used outside of vulcan-forms.
137	*/
138	const LocationPicker = ({document, path, label, value, updateCurrentValues, stringVersionFieldName, classes}: {	18✔
139	document: any,
140	path: string,
141	label?: string,
142	value: any,
143	updateCurrentValues: any,
144	stringVersionFieldName?: string\|null,
145	classes: ClassesType,
146	}) => {
147	// if this location field has a matching field that just stores the string version of the location,
148	// make sure to update the matching field along with this one
UNCOV 149	const locationFieldName: string\|null = stringVersionFieldName \|\| null;	×
150
151	const location =
152	(locationFieldName && document?.[locationFieldName])	×
153	\|\| document?.[path]?.formatted_address	×
154	\|\| ""
155	const [ mapsLoaded ] = useGoogleMaps()	×
156	const geosuggestEl = useRef<any>(null)	×
157
158	useEffect(() => {	×
159	if (geosuggestEl && geosuggestEl.current) {	×
160	geosuggestEl.current.update(value?.formatted_address)	×
161	}
162	}, [value])
163
164	const handleCheckClear = (value: any) => {	×
165	// clear location fields if the user deletes the input text
UNCOV 166	if (value === '') {	×
UNCOV 167	updateCurrentValues({	×
168	...(locationFieldName ? {[locationFieldName]: null} : {}),	×
169	[path]: null,
170	})
171	}
172	}
173
174	const handleSuggestSelect = (suggestion: Suggest) => {	×
175	if (suggestion && suggestion.gmaps) {	×
176	updateCurrentValues({	×
177	...(locationFieldName ? {	×
178	[locationFieldName]: suggestion.label
179	} : {}),
180	[path]: suggestion.gmaps,
181	})
182	}
183	}
184
185
186	if (document && mapsLoaded) {	×
UNCOV 187	return <div className={classes.root}>	×
188	{value && label && <FormLabel className={classes.label}>{label}</FormLabel>}	×
189	<Geosuggest
190	ref={geosuggestEl}
191	placeholder={label}
192	onChange={handleCheckClear}
193	onSuggestSelect={handleSuggestSelect}
194	initialValue={location}
195	/>
196	</div>
197	} else {
UNCOV 198	return <Components.Loading/>;	×
199	}
200	}
201
202	const LocationFormComponent = ({document, path, label, value, updateCurrentValues, stringVersionFieldName}: FormComponentProps<any> & {	18✔
203	stringVersionFieldName?: string\|null,
204	}) => {
205	return <Components.LocationPicker	×
206	document={document}
207	path={path}
208	label={label}
209	value={value}
210	updateCurrentValues={updateCurrentValues}
211	stringVersionFieldName={stringVersionFieldName}
212	/>
213	}
214
215	const LocationPickerComponent = registerComponent("LocationPicker", LocationPicker, {styles});	18✔
216	const LocationFormComponentComponent = registerComponent("LocationFormComponent", LocationFormComponent, {styles});	18✔
217
218	declare global {
219	interface ComponentTypes {
220	LocationPicker: typeof LocationPickerComponent
221	LocationFormComponent: typeof LocationFormComponentComponent
222	}
223	}

ForumMagnum / ForumMagnum / 9403038816

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