3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-05-15 01:46:47 +02:00
Code Issues Projects Releases Packages Wiki Activity

Update analytics (#432)

Browse source
This commit is contained in:
Luke Vella 2023-01-24 14:04:13 +00:00 • committed by GitHub
parent a4ca5f1676
commit b0aa9db26d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 122 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

3
declarations/environment.d.ts vendored
View file

@ -6,7 +6,8 @@ declare global {
SECRET_PASSWORD: string;
NEXT_PUBLIC_LEGACY_POLLS?: string;
NEXT_PUBLIC_MAINTENANCE_MODE?: string;
PLAUSIBLE_DOMAIN?: string;
NEXT_PUBLIC_POSTHOG_API_KEY?: string;
NEXT_PUBLIC_POSTHOG_API_HOST?: string;
NEXT_PUBLIC_CRISP_WEBSITE_ID?: string;
LEGACY_MONGODB_URI?: string;
SUPPORT_EMAIL: string;

2
package.json
View file

@ -49,10 +49,10 @@
"nanoid": "^3.1.30",
"next": "^13.1.3",
"next-i18next": "^12.1.0",
"next-plausible": "^3.6.4",
"next-seo": "^5.15.0",
"nodemailer": "^6.7.2",
"postcss": "^8.4.21",
"posthog-js": "^1.40.2",
"prisma": "^4.9.0",
"react": "^18.2.0",
"react-big-calendar": "^1.5.0",

8
src/components/create-poll.tsx
View file

@ -2,7 +2,7 @@ import { NextPage } from "next";
import Head from "next/head";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { usePlausible } from "next-plausible";
import posthog from "posthog-js";
import React from "react";
import { useSessionStorage } from "react-use";
@ -92,16 +92,12 @@ const Page: NextPage<CreatePollPageProps> = ({
const [isRedirecting, setIsRedirecting] = React.useState(false);
const plausible = usePlausible();
const createPoll = trpc.useMutation(["polls.create"], {
onSuccess: (res) => {
setIsRedirecting(true);
plausible("Created poll", {
props: {
posthog.capture("created poll", {
numberOfOptions: formData.options?.options?.length,
optionsView: formData?.options?.view,
},
});
setPersistedFormData(initialNewEventData);
router.replace(`/admin/${res.urlId}?sharing=true`);

10
src/components/discussion/discussion.tsx
View file

@ -1,7 +1,7 @@
import clsx from "clsx";
import { AnimatePresence, motion } from "framer-motion";
import { useTranslation } from "next-i18next";
import { usePlausible } from "next-plausible";
import posthog from "posthog-js";
import * as React from "react";
import { Controller, useForm } from "react-hook-form";
@ -39,18 +39,16 @@ const Discussion: React.VoidFunctionComponent = () => {
},
);
const plausible = usePlausible();
const addComment = trpc.useMutation("polls.comments.add", {
onSuccess: (newComment) => {
session.refresh();
posthog.capture("created comment");
queryClient.setQueryData(
["polls.comments.list", { pollId }],
(existingComments = []) => {
return [...existingComments, newComment];
},
);
plausible("Created comment");
},
});
@ -64,7 +62,7 @@ const Discussion: React.VoidFunctionComponent = () => {
);
},
onSuccess: () => {
plausible("Deleted comment");
posthog.capture("deleted comment");
},
});

13
src/components/dropdown.tsx
View file

@ -83,13 +83,20 @@ const Dropdown: React.VoidFunctionComponent<DropdownProps> = ({
);
};
const AnchorLink: React.VoidFunctionComponent<{
const AnchorLink = React.forwardRef<
HTMLAnchorElement,
{
href?: string;
children?: React.ReactNode;
className?: string;
}> = ({ href = "", className, children, ...forwardProps }) => {
}
>(function AnchorLink(
{ href = "", className, children, ...forwardProps },
ref,
) {
return (
<Link
ref={ref}
href={href}
passHref
className={clsx(
@ -101,7 +108,7 @@ const AnchorLink: React.VoidFunctionComponent<{
{children}
</Link>
);
};
});
export const DropdownItem: React.VoidFunctionComponent<{
icon?: React.ComponentType<{ className?: string }>;

4
src/components/forms/poll-options-form/month-calendar/month-calendar.tsx
View file

@ -1,6 +1,5 @@
import clsx from "clsx";
import { useTranslation } from "next-i18next";
import { usePlausible } from "next-plausible";
import * as React from "react";
import {
@ -40,8 +39,6 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
const { t } = useTranslation("app");
const isTimedEvent = options.some((option) => option.type === "timeSlot");
const plausible = usePlausible();
const optionsByDay = React.useMemo(() => {
const res: Record<
string,
@ -355,7 +352,6 @@ const MonthCalendar: React.VoidFunctionComponent<DateTimePickerProps> = ({
disabled={datepicker.selection.length < 2}
label={t("applyToAllDates")}
onClick={() => {
plausible("Applied options to all dates");
const times = optionsForDay.map(
({ option }) => {
if (option.type === "date") {

5
src/components/login-form.tsx
View file

@ -1,7 +1,7 @@
import clsx from "clsx";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { usePlausible } from "next-plausible";
import posthog from "posthog-js";
import * as React from "react";
import { useForm } from "react-hook-form";
@ -18,7 +18,6 @@ const LoginForm: React.VoidFunctionComponent = () => {
const login = trpc.useMutation(["login"]);
const plausible = usePlausible();
const router = useRouter();
return (
<div className="flex">
@ -32,7 +31,7 @@ const LoginForm: React.VoidFunctionComponent = () => {
{!formState.isSubmitSuccessful ? (
<form
onSubmit={handleSubmit(async ({ email }) => {
plausible("Login requested");
posthog.capture("login requested", { email });
await login.mutateAsync({ email, path: router.asPath });
})}
>

9
src/components/poll.tsx
View file

@ -3,7 +3,7 @@ import { NextPage } from "next";
import Head from "next/head";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { usePlausible } from "next-plausible";
import posthog from "posthog-js";
import React from "react";
import toast from "react-hot-toast";
import { useMount } from "react-use";
@ -43,7 +43,6 @@ const PollPage: NextPage = () => {
const session = useUser();
const queryClient = trpc.useContext();
const plausible = usePlausible();
const { mutate: updatePollMutation } = useUpdatePollMutation();
@ -55,7 +54,7 @@ const PollPage: NextPage = () => {
verified: true,
});
session.refresh();
plausible("Verified email");
posthog.capture("verified email");
},
onError: () => {
toast.error(t("linkHasExpired"));
@ -81,7 +80,7 @@ const PollPage: NextPage = () => {
{
onSuccess: () => {
toast.success(t("notificationsDisabled"));
plausible("Unsubscribed from notifications");
posthog.capture("unsubscribed from notifications");
},
},
);
@ -89,7 +88,7 @@ const PollPage: NextPage = () => {
shallow: true,
});
}
}, [plausible, urlId, router, updatePollMutation, t]);
}, [urlId, router, updatePollMutation, t]);
const checkIfWideScreen = () => window.innerWidth > 640;

6
src/components/poll/manage-poll/delete-poll-form.tsx
View file

@ -1,6 +1,6 @@
import clsx from "clsx";
import { Trans, useTranslation } from "next-i18next";
import { usePlausible } from "next-plausible";
import posthog from "posthog-js";
import * as React from "react";
import { useForm } from "react-hook-form";
@ -19,13 +19,11 @@ export const DeletePollForm: React.VoidFunctionComponent<{
const { register, handleSubmit, formState, watch } =
useForm<{ confirmation: string }>();
const plausible = usePlausible();
const confirmationText = watch("confirmation");
const canDelete = confirmationText === confirmText;
const deletePoll = trpc.useMutation("polls.delete", {
onSuccess: () => {
plausible("Deleted poll");
posthog.capture("deleted poll");
},
});

27
src/components/poll/mutations.ts
View file

@ -1,8 +1,7 @@
import { usePlausible } from "next-plausible";
import posthog from "posthog-js";
import { trpc } from "../../utils/trpc";
import { usePoll } from "../poll-context";
import { useUser } from "../user-provider";
import { ParticipantForm } from "./types";
export const normalizeVotes = (
@ -17,12 +16,12 @@ export const normalizeVotes = (
export const useAddParticipantMutation = () => {
const queryClient = trpc.useContext();
const session = useUser();
const plausible = usePlausible();
return trpc.useMutation(["polls.participants.add"], {
onSuccess: (participant) => {
plausible("Add participant");
posthog.capture("add participant", {
name: participant.name,
});
queryClient.setQueryData(
["polls.participants.list", { pollId: participant.pollId }],
(existingParticipants = []) => {
@ -33,17 +32,17 @@ export const useAddParticipantMutation = () => {
"polls.participants.list",
{ pollId: participant.pollId },
]);
session.refresh();
},
});
};
export const useUpdateParticipantMutation = () => {
const queryClient = trpc.useContext();
const plausible = usePlausible();
return trpc.useMutation("polls.participants.update", {
onSuccess: (participant) => {
plausible("Update participant");
posthog.capture("update participant", {
name: participant.name,
});
queryClient.setQueryData(
["polls.participants.list", { pollId: participant.pollId }],
(existingParticipants = []) => {
@ -66,7 +65,6 @@ export const useUpdateParticipantMutation = () => {
export const useDeleteParticipantMutation = () => {
const queryClient = trpc.useContext();
const plausible = usePlausible();
return trpc.useMutation("polls.participants.delete", {
onMutate: ({ participantId, pollId }) => {
queryClient.setQueryData(
@ -76,20 +74,23 @@ export const useDeleteParticipantMutation = () => {
},
);
},
onSuccess: () => {
plausible("Remove participant");
onSuccess: (_, { participantId }) => {
posthog.capture("remove participant", {
participantId,
});
},
});
};
export const useUpdatePollMutation = () => {
const { urlId, admin } = usePoll();
const plausible = usePlausible();
const queryClient = trpc.useContext();
return trpc.useMutation(["polls.update"], {
onSuccess: (data) => {
queryClient.setQueryData(["polls.get", { urlId, admin }], data);
plausible("Updated poll");
posthog.capture("updated poll", {
id: data.id,
});
},
});
};

9
src/components/poll/notifications-toggle.tsx
View file

@ -1,5 +1,4 @@
import { Trans, useTranslation } from "next-i18next";
import { usePlausible } from "next-plausible";
import * as React from "react";
import { Button } from "@/components/button";
@ -18,7 +17,6 @@ const NotificationsToggle: React.VoidFunctionComponent = () => {
const { mutate: updatePollMutation } = useUpdatePollMutation();
const plausible = usePlausible();
return (
<Tooltip
content={
@ -63,12 +61,7 @@ const NotificationsToggle: React.VoidFunctionComponent = () => {
notifications: !poll.notifications,
},
{
onSuccess: ({ notifications }) => {
plausible(
notifications
? "Turned notifications on"
: "Turned notifications off",
);
onSuccess: () => {
setIsUpdatingNotifications(false);
},
},

22
src/components/preferences.tsx
View file

@ -1,7 +1,6 @@
import clsx from "clsx";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { usePlausible } from "next-plausible";
import React from "react";
import { useDayjs } from "../utils/dayjs";
@ -14,7 +13,6 @@ const Preferences: React.VoidFunctionComponent = () => {
useDayjs();
const router = useRouter();
const plausible = usePlausible();
return (
<div>
<div className="mb-4 space-y-2">
@ -36,11 +34,6 @@ const Preferences: React.VoidFunctionComponent = () => {
})}
onClick={() => {
setWeekStartsOn("monday");
plausible("Change week start", {
props: {
timeFormat: "monday",
},
});
}}
type="button"
>
@ -52,11 +45,6 @@ const Preferences: React.VoidFunctionComponent = () => {
})}
onClick={() => {
setWeekStartsOn("sunday");
plausible("Change week start", {
props: {
timeFormat: "sunday",
},
});
}}
type="button"
>
@ -76,11 +64,6 @@ const Preferences: React.VoidFunctionComponent = () => {
})}
onClick={() => {
setTimeFormat("12h");
plausible("Change time format", {
props: {
timeFormat: "12h",
},
});
}}
type="button"
>
@ -92,11 +75,6 @@ const Preferences: React.VoidFunctionComponent = () => {
})}
onClick={() => {
setTimeFormat("24h");
plausible("Change time format", {
props: {
timeFormat: "24h",
},
});
}}
type="button"
>

4
src/components/profile/user-details.tsx
View file

@ -1,5 +1,6 @@
import { motion } from "framer-motion";
import { useTranslation } from "next-i18next";
import posthog from "posthog-js";
import * as React from "react";
import { useForm } from "react-hook-form";
@ -33,7 +34,8 @@ export const UserDetails: React.VoidFunctionComponent<UserDetailsProps> = ({
const { refresh } = useUser();
const changeName = trpc.useMutation("user.changeName", {
onSuccess: () => {
onSuccess: (_, { name }) => {
posthog.people.set({ name });
refresh();
},
});

38
src/components/user-provider.tsx
View file

@ -1,5 +1,7 @@
import { useTranslation } from "next-i18next";
import posthog from "posthog-js";
import React from "react";
import { useMount } from "react-use";
import { UserSession } from "@/utils/auth";
@ -49,12 +51,44 @@ export const UserProvider = (props: { children?: React.ReactNode }) => {
const { t } = useTranslation("app");
const { data: user, refetch } = trpcNext.whoami.get.useQuery();
const logout = trpcNext.whoami.destroy.useMutation();
const logout = trpcNext.whoami.destroy.useMutation({
onSuccess: () => {
posthog.reset();
},
});
useMount(() => {
if (!process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
return;
}
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_API_KEY, {
api_host: process.env.NEXT_PUBLIC_POSTHOG_API_HOST,
opt_out_capturing_by_default: false,
capture_pageview: false,
capture_pageleave: false,
autocapture: false,
loaded: (posthog) => {
if (process.env.NODE_ENV === "development") {
posthog.opt_out_capturing();
}
if (user && posthog.get_distinct_id() !== user.id) {
posthog.identify(
user.id,
!user.isGuest
? { email: user.email, name: user.name }
: { name: user.id },
);
}
},
});
});
const shortName = user
? user.isGuest === false
? user.name
: `${t("guest")}-${user.id.substring(user.id.length - 4)}`
: user.id.substring(0, 10)
: t("guest");
if (!user) {

11
src/pages/_app.tsx
View file

@ -8,7 +8,6 @@ import { NextPage } from "next";
import { AppProps } from "next/app";
import Head from "next/head";
import { appWithTranslation } from "next-i18next";
import PlausibleProvider from "next-plausible";
import { DefaultSeo } from "next-seo";
import React from "react";
import { Toaster } from "react-hot-toast";
@ -44,13 +43,7 @@ const MyApp: NextPage<AppProps> = ({ Component, pageProps }) => {
}
return (
<PlausibleProvider
domain="rallly.co"
customDomain={process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN}
trackOutboundLinks={true}
selfHosted={true}
enabled={!!process.env.NEXT_PUBLIC_PLAUSIBLE_DOMAIN}
>
<>
<DefaultSeo
openGraph={{
siteName: "Rallly",
@ -84,7 +77,7 @@ const MyApp: NextPage<AppProps> = ({ Component, pageProps }) => {
}
`}</style>
<Component {...pageProps} />
</PlausibleProvider>
</>
);
};

13
src/pages/demo.tsx
View file

@ -1,11 +1,13 @@
import { NextPage } from "next";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { usePlausible } from "next-plausible";
import posthog from "posthog-js";
import React from "react";
import { useMount } from "react-use";
import FullPageLoader from "../components/full-page-loader";
import { withSession } from "../components/user-provider";
import { withSessionSsr } from "../utils/auth";
import { trpc } from "../utils/trpc";
import { withPageTranslations } from "../utils/with-page-translations";
@ -13,18 +15,19 @@ const Demo: NextPage = () => {
const { t } = useTranslation("app");
const router = useRouter();
const plausible = usePlausible();
const createDemo = trpc.useMutation(["polls.demo.create"]);
useMount(async () => {
const urlId = await createDemo.mutateAsync();
plausible("Create demo poll");
posthog.capture("create demo poll");
router.replace(`/admin/${urlId}`);
});
return <FullPageLoader>{t("creatingDemo")}</FullPageLoader>;
};
export const getServerSideProps = withPageTranslations(["common", "app"]);
export const getServerSideProps = withSessionSsr(
withPageTranslations(["common", "app"]),
);
export default Demo;
export default withSession(Demo);

5
src/pages/login.tsx
View file

@ -1,7 +1,7 @@
import { GetServerSideProps, NextPage } from "next";
import Head from "next/head";
import { useRouter } from "next/router";
import { usePlausible } from "next-plausible";
import posthog from "posthog-js";
import React from "react";
import toast from "react-hot-toast";
import { useTimeoutFn } from "react-use";
@ -20,14 +20,13 @@ const Page: NextPage<{ success: boolean; redirectTo: string }> = ({
redirectTo,
}) => {
const router = useRouter();
const pluasible = usePlausible();
if (!success) {
toast.error("Login failed! Link is expired or invalid");
}
useTimeoutFn(() => {
if (success) {
pluasible("Login completed");
posthog.capture("login completed");
}
router.replace(redirectTo);
}, 100);

29
yarn.lock
View file

@ -1677,6 +1677,11 @@
"@sentry/utils" "7.32.1"
tslib "^1.9.3"
"@sentry/types@7.22.0":
version "7.22.0"
resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.22.0.tgz#58e4ce77b523048e0f31e2ea4b597946d76f6079"
integrity sha512-LhCL+wb1Jch+OesB2CIt6xpfO1Ab6CRvoNYRRzVumWPLns1T3ZJkarYfhbLaOEIb38EIbPgREdxn2AJT560U4Q==
"@sentry/types@7.32.1":
version "7.32.1"
resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.32.1.tgz#24728cf098694d31ceb4f556164674477c6433d6"
@ -3482,6 +3487,11 @@ fastq@^1.6.0:
dependencies:
reusify "^1.0.4"
fflate@^0.4.1:
version "0.4.8"
resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
file-entry-cache@^6.0.1:
version "6.0.1"
resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz"
@ -4504,11 +4514,6 @@ next-i18next@^12.1.0:
i18next-fs-backend "^1.1.5"
react-i18next "^11.18.4"
next-plausible@^3.6.4:
version "3.6.4"
resolved "https://registry.yarnpkg.com/next-plausible/-/next-plausible-3.6.4.tgz#15684340736e47d3ffa49f9c8fae598e3cfefca6"
integrity sha512-aHL4IL+gkkjs5ScB18LZ3LMEWXKR5VTvnMDs/fHNFHadOh23i37fD+VP5oAQLALR8Mde63l9JJljrw9DkvjWjQ==
next-seo@^5.15.0:
version "5.15.0"
resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-5.15.0.tgz#b1a90508599774982909ea44803323c6fb7b50f4"
@ -4925,6 +4930,15 @@ postcss@^8.4.21:
picocolors "^1.0.0"
source-map-js "^1.0.2"
posthog-js@^1.40.2:
version "1.40.2"
resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.40.2.tgz#f9658f532653789287015f7df9f61988949e08e9"
integrity sha512-jVq/g5J/339u2uHulfpTR57iyG8xmbSKpB9xtbEqp5gQpr/eu0P4OAdfye12tsjm8IB3+7RR/SDArQ7PI/m6Yg==
dependencies:
"@sentry/types" "7.22.0"
fflate "^0.4.1"
rrweb-snapshot "^1.1.14"
prelude-ls@^1.2.1:
version "1.2.1"
resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
@ -5330,6 +5344,11 @@ rollup@2.78.0:
optionalDependencies:
fsevents "~2.3.2"
rrweb-snapshot@^1.1.14:
version "1.1.14"
resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.14.tgz#9d4d9be54a28a893373428ee4393ec7e5bd83fcc"
integrity sha512-eP5pirNjP5+GewQfcOQY4uBiDnpqxNRc65yKPW0eSoU1XamDfc4M8oqpXGMyUyvLyxFDB0q0+DChuxxiU2FXBQ==
rtl-css-js@^1.14.0:
version "1.15.0"
resolved "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.15.0.tgz"