10721840668

Committed 05 Sep 2024 01:55PM UTC coverage: 31.83% (-0.03%) from 31.858%

Build # 10721840668

Build Type

Pull #9602

github

Committed by

oetherington

Commit Message

Merge branch 'master' into crossposting-refactor

Pull Request Pull Request #9602: Crossposting refactor (Part 1 - deploy new routes)

Run Details

5066 of 41350 branches covered (12.25%)

Branch coverage included in aggregate %.

39 of 147 new or added lines in 10 files covered. (26.53%)

6 existing lines in 3 files now uncovered.

29429 of 67023 relevant lines covered (43.91%)

184.55 hits per line

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

22.09

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

import React, { useState } from "react";
import { Components, registerComponent, combineUrls } from "../../lib/vulcan-lib";
import {
  fmCrosspostSiteNameSetting,
  fmCrosspostBaseUrlSetting,
} from "../../lib/instanceSettings";
import { useSingle } from "../../lib/crud/withSingle";
import { useForeignApolloClient } from "../hooks/useForeignApolloClient";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
import Button from "@material-ui/core/Button";
import LoginIcon from "@material-ui/icons/LockOpen"
import UnlinkIcon from "@material-ui/icons/RemoveCircle";
import { gql, useMutation } from "@apollo/client";
import { useOnFocusTab } from "../hooks/useOnFocusTab";
import { generateTokenRoute } from "@/lib/fmCrosspost/routes";

const styles = (theme: ThemeType): JssStyles => ({
  root: {
    display: "flex",
    flexDirection: "column",
    margin: 8,
    "& .MuiTypography-root": {
      color: theme.palette.text.normal,
    },
  },
  link: {
    color: theme.palette.primary.main,
  },
  crosspostMessage: {
    marginBottom: 12,
  },
  button: {
    background: theme.palette.buttons.imageUpload.background,
    "&:hover": {
      background: theme.palette.buttons.imageUpload.hoverBackground,
    },
    color: theme.palette.text.invertedBackgroundText,
  },
  buttonIcon: {
    fontSize: 18,
    marginRight: theme.spacing.unit,
  },
  error: {
    color: theme.palette.error.main,
    margin: "8px 0",
  },
});

/**
 * FMCrosspostAccount displays the user's account on the other platform after
 * it's already been authorized
 */
const FMCrosspostAccount = ({fmCrosspostUserId, classes}: {
  fmCrosspostUserId: string,
  classes: ClassesType,
}) => {
  const apolloClient = useForeignApolloClient();
  const {document, loading} = useSingle({
    documentId: fmCrosspostUserId,
    collectionName: "Users",
    fragmentName: "UsersCrosspostInfo",
    apolloClient,
  });

  const link = `${fmCrosspostBaseUrlSetting.get()}users/${document?.slug}`;

  const {Loading} = Components;
  
  if (!document || loading) {
    return <Loading/>
  }
  return <div className={classes.crosspostMessage}>
    This post will be crossposted to {fmCrosspostSiteNameSetting.get()} by
    your account <a className={classes.link} href={link} target="_blank" rel="noreferrer">
      {document.username}
    </a>
  </div>
}

/**
 * FMCrosspostAuth shows the user their account if they've already set up crossposting along
 * with an option to remove the account to perhaps add another, or, if they've not set up an
 * account yet they'll be prompted to do so.
 */
const FMCrosspostAuth = ({fmCrosspostUserId, loading, onClickLogin, onClickUnlink, classes}: {
  fmCrosspostUserId?: string,
  loading: boolean,
  onClickLogin: () => void,
  onClickUnlink: () => void,
  classes: ClassesType,
}) => {
  const {Loading} = Components;

  if (loading) {
    return (
      <Loading />
    );
  }

  return fmCrosspostUserId
    ? (
      <div>
        <FMCrosspostAccount fmCrosspostUserId={fmCrosspostUserId} classes={classes} />
        <Button onClick={onClickUnlink} className={classes.button}>
          <UnlinkIcon className={classes.buttonIcon} />
          Unlink this account
        </Button>
      </div>
    )
    :(
      <div>
        <Button onClick={onClickLogin} className={classes.button}>
          <LoginIcon className={classes.buttonIcon} />
          Login to {fmCrosspostSiteNameSetting.get()} to enable crossposting
        </Button>
      </div>
    );
}

const unlinkCrossposterMutation = gql`
  mutation unlinkCrossposter {
    unlinkCrossposter
  }
`;

/**
 * FMCrosspostControl is the main form component for setting up crossposts
 * It allows the user to choose whether or not to make this post a crosspost,
 * and it also allows them to connect or disconnect their account on the other
 * platform.
 */
const FMCrosspostControl = ({updateCurrentValues, classes, value, path, currentUser}: {
  updateCurrentValues: Function,
  classes: ClassesType,
  value: {isCrosspost: boolean, hostedHere?: boolean, foreignPostId?: string},
  path: string,
  currentUser: UsersCurrent,
}) => {
  const {isCrosspost} = value ?? {};

  const [unlink, {loading: loadingUnlink}] = useMutation(unlinkCrossposterMutation, {errorPolicy: "all"});
  const {document, refetch, loading: loadingDocument} = useSingle({
    documentId: currentUser._id,
    collectionName: "Users",
    fragmentName: "UsersCrosspostInfo",
    notifyOnNetworkStatusChange: true,
  });
  const [error, setError] = useState<string | null>(null);

  const loading = loadingUnlink || loadingDocument;

  useOnFocusTab(() => {
    if (!loading && !document?.fmCrosspostUserId) {
      refetch();
    }
  });

  const onClickLogin = async () => {
    try {
      const {token} = await generateTokenRoute.makeRequest({});
      if (token) {
        const url = combineUrls(fmCrosspostBaseUrlSetting.get() ?? "", `crosspostLogin?token=${token}`);
        window.open(url, "_blank")?.focus();
      } else {
        setError("Couldn't create login token");
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "Couldn't create login token");
    }
  }

  const onClickUnlink = async () => {
    await unlink();
    await refetch();
  }

  return (
    <div className={classes.root}>
      <FormControlLabel
        label={`Crosspost to ${fmCrosspostSiteNameSetting.get()}`}
        control={
          <Checkbox
            className={classes.size}
            checked={isCrosspost}
            onChange={(_, checked) => {
              updateCurrentValues({
                [path]: {
                  isCrosspost: checked,
                  hostedHere: true,
                },
              })
            }}
            disableRipple
          />
        }
      />
      {error && <div className={classes.error}>Error: {error}</div>}
      {!error && isCrosspost &&
        <FMCrosspostAuth
          fmCrosspostUserId={document?.fmCrosspostUserId}
          loading={loading}
          onClickLogin={onClickLogin}
          onClickUnlink={onClickUnlink}
          classes={classes}
        />
      }
    </div>
  );
};

const FMCrosspostControlComponent = registerComponent("FMCrosspostControl", FMCrosspostControl, {styles});

declare global {
  interface ComponentTypes {
    FMCrosspostControl: typeof FMCrosspostControlComponent
  }
}

1	import React, { useState } from "react";	1✔
2	import { Components, registerComponent, combineUrls } from "../../lib/vulcan-lib";	1✔
3	import {
4	fmCrosspostSiteNameSetting,
5	fmCrosspostBaseUrlSetting,
6	} from "../../lib/instanceSettings";	1✔
7	import { useSingle } from "../../lib/crud/withSingle";	1✔
8	import { useForeignApolloClient } from "../hooks/useForeignApolloClient";	1✔
9	import FormControlLabel from "@material-ui/core/FormControlLabel";	1✔
10	import Checkbox from "@material-ui/core/Checkbox";	1✔
11	import Button from "@material-ui/core/Button";	1✔
12	import LoginIcon from "@material-ui/icons/LockOpen"	1✔
13	import UnlinkIcon from "@material-ui/icons/RemoveCircle";	1✔
14	import { gql, useMutation } from "@apollo/client";	1✔
15	import { useOnFocusTab } from "../hooks/useOnFocusTab";	1✔
16	import { generateTokenRoute } from "@/lib/fmCrosspost/routes";	1✔
17
18	const styles = (theme: ThemeType): JssStyles => ({	1✔
19	root: {
20	display: "flex",
21	flexDirection: "column",
22	margin: 8,
23	"& .MuiTypography-root": {
24	color: theme.palette.text.normal,
25	},
26	},
27	link: {
28	color: theme.palette.primary.main,
29	},
30	crosspostMessage: {
31	marginBottom: 12,
32	},
33	button: {
34	background: theme.palette.buttons.imageUpload.background,
35	"&:hover": {
36	background: theme.palette.buttons.imageUpload.hoverBackground,
37	},
38	color: theme.palette.text.invertedBackgroundText,
39	},
40	buttonIcon: {
41	fontSize: 18,
42	marginRight: theme.spacing.unit,
43	},
44	error: {
45	color: theme.palette.error.main,
46	margin: "8px 0",
47	},
48	});
49
50	/**
51	* FMCrosspostAccount displays the user's account on the other platform after
52	* it's already been authorized
53	*/
54	const FMCrosspostAccount = ({fmCrosspostUserId, classes}: {	1✔
55	fmCrosspostUserId: string,
56	classes: ClassesType,
57	}) => {
58	const apolloClient = useForeignApolloClient();	×
59	const {document, loading} = useSingle({	×
60	documentId: fmCrosspostUserId,
61	collectionName: "Users",
62	fragmentName: "UsersCrosspostInfo",
63	apolloClient,
64	});
65
66	const link = `${fmCrosspostBaseUrlSetting.get()}users/${document?.slug}`;	×
67
68	const {Loading} = Components;	×
69
70	if (!document \|\| loading) {	×
71	return <Loading/>	×
72	}
73	return <div className={classes.crosspostMessage}>	×
74	This post will be crossposted to {fmCrosspostSiteNameSetting.get()} by
75	your account <a className={classes.link} href={link} target="_blank" rel="noreferrer">
76	{document.username}
77	</a>
78	</div>
79	}
80
81	/**
82	* FMCrosspostAuth shows the user their account if they've already set up crossposting along
83	* with an option to remove the account to perhaps add another, or, if they've not set up an
84	* account yet they'll be prompted to do so.
85	*/
86	const FMCrosspostAuth = ({fmCrosspostUserId, loading, onClickLogin, onClickUnlink, classes}: {	1✔
87	fmCrosspostUserId?: string,
88	loading: boolean,
89	onClickLogin: () => void,
90	onClickUnlink: () => void,
91	classes: ClassesType,
92	}) => {
93	const {Loading} = Components;	×
94
95	if (loading) {	×
96	return (	×
97	<Loading />
98	);
99	}
100
101	return fmCrosspostUserId	×
102	? (
103	<div>	×
104	<FMCrosspostAccount fmCrosspostUserId={fmCrosspostUserId} classes={classes} />
105	<Button onClick={onClickUnlink} className={classes.button}>
106	<UnlinkIcon className={classes.buttonIcon} />
107	Unlink this account
108	</Button>
109	</div>
110	)
111	:(
112	<div>
113	<Button onClick={onClickLogin} className={classes.button}>
114	<LoginIcon className={classes.buttonIcon} />
115	Login to {fmCrosspostSiteNameSetting.get()} to enable crossposting
116	</Button>
117	</div>
118	);
119	}
120
121	const unlinkCrossposterMutation = gql`	1✔
122	mutation unlinkCrossposter {
123	unlinkCrossposter
124	}
125	`;
126
127	/**
128	* FMCrosspostControl is the main form component for setting up crossposts
129	* It allows the user to choose whether or not to make this post a crosspost,
130	* and it also allows them to connect or disconnect their account on the other
131	* platform.
132	*/
133	const FMCrosspostControl = ({updateCurrentValues, classes, value, path, currentUser}: {	1✔
134	updateCurrentValues: Function,
135	classes: ClassesType,
136	value: {isCrosspost: boolean, hostedHere?: boolean, foreignPostId?: string},
137	path: string,
138	currentUser: UsersCurrent,
139	}) => {
140	const {isCrosspost} = value ?? {};	×
141
142	const [unlink, {loading: loadingUnlink}] = useMutation(unlinkCrossposterMutation, {errorPolicy: "all"});	×
143	const {document, refetch, loading: loadingDocument} = useSingle({	×
144	documentId: currentUser._id,
145	collectionName: "Users",
146	fragmentName: "UsersCrosspostInfo",
147	notifyOnNetworkStatusChange: true,
148	});
149	const [error, setError] = useState<string \| null>(null);	×
150
151	const loading = loadingUnlink \|\| loadingDocument;	×
152
153	useOnFocusTab(() => {	×
154	if (!loading && !document?.fmCrosspostUserId) {	×
155	refetch();	×
156	}
157	});
158
159	const onClickLogin = async () => {	×
160	try {	×
NEW 161	const {token} = await generateTokenRoute.makeRequest({});	×
162	if (token) {	×
163	const url = combineUrls(fmCrosspostBaseUrlSetting.get() ?? "", `crosspostLogin?token=${token}`);	×
164	window.open(url, "_blank")?.focus();	×
165	} else {
166	setError("Couldn't create login token");	×
167	}
168	} catch (err) {
NEW 169	setError(err instanceof Error ? err.message : "Couldn't create login token");	×
170	}
171	}
172
173	const onClickUnlink = async () => {	×
174	await unlink();	×
175	await refetch();	×
176	}
177
178	return (	×
179	<div className={classes.root}>
180	<FormControlLabel
181	label={`Crosspost to ${fmCrosspostSiteNameSetting.get()}`}
182	control={
183	<Checkbox
184	className={classes.size}
185	checked={isCrosspost}
186	onChange={(_, checked) => {
187	updateCurrentValues({	×
188	[path]: {
189	isCrosspost: checked,
190	hostedHere: true,
191	},
192	})
193	}}
194	disableRipple
195	/>
196	}
197	/>
198	{error && <div className={classes.error}>Error: {error}</div>}	×
199	{!error && isCrosspost &&	×
200	<FMCrosspostAuth
201	fmCrosspostUserId={document?.fmCrosspostUserId}	×
202	loading={loading}
203	onClickLogin={onClickLogin}
204	onClickUnlink={onClickUnlink}
205	classes={classes}
206	/>
207	}
208	</div>
209	);
210	};
211
212	const FMCrosspostControlComponent = registerComponent("FMCrosspostControl", FMCrosspostControl, {styles});	1✔
213
214	declare global {
215	interface ComponentTypes {
216	FMCrosspostControl: typeof FMCrosspostControlComponent
217	}
218	}

ForumMagnum / ForumMagnum / 10721840668

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