make the browser ask if you really want to leave without saving (closes

#137)

packages/bot/src/components/form/Selector.tsx

@@ -34,7 +34,7 @@ const resolveItem = (item: Channel | Role | null, type: SelectorProps['type']) =
   type === 'channel'
     ? { id: item?.id, name: item?.name }
     : // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      ({ color: (item as Role).color, id: item?.id, name: item?.name } as Role);
+      ({ color: (item as Role | null)?.color, id: item?.id, name: item?.name } as Role);
 
 // eslint-disable-next-line @typescript-eslint/no-namespace, @typescript-eslint/no-unused-vars
 declare namespace JSX {

packages/bot/src/pages/guilds/[id].tsx

@@ -59,7 +59,7 @@ export default function Guild({
   guildId,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const [menuOpen, setMenuOpen] = useState<boolean>(true);
-  const { errors, section, updateData, updateGuildId, updateSection, warnings } = useContext(GuildContext);
+  const { changes, errors, section, updateData, updateGuildId, updateSection, warnings } = useContext(GuildContext);
   const { authenticated } = useContext(UserContext);
   const router = useRouter();
 
@@ -69,6 +69,18 @@ export default function Guild({
   const sortedChannels = useMemo(() => [...(channels ?? [])].sort((a, b) => a.name.localeCompare(b.name)), [channels]);
   const sortedRoles = useMemo(() => [...(guild?.roles ?? [])].sort((a, b) => b.position - a.position), [guild]);
 
+  useEffect(() => {
+    if (!Object.keys(changes).length) return;
+
+    const handleUnload = (event: BeforeUnloadEvent) => {
+      event.returnValue = 'Changes that you made may not be saved.';
+      return event.returnValue;
+    };
+
+    window.addEventListener('beforeunload', handleUnload);
+    return () => window.removeEventListener('beforeunload', handleUnload);
+  }, [changes]);
+
   useEffect(() => {
     const pageQuery = String(router.query.p);