Add creating new posts (incl. url or image)

server.mjs

@@ -105,6 +105,16 @@ app.use(
 
       // Fake it to get around Lemmy API connection issue
       clientReq.setHeader("origin", `https://${req.params.actor}`);
+
+      // Hack to get around pictrs endpoint not allowing auth in pathname and/or body
+      if (
+        req.method === "POST" &&
+        req.path === "pictrs/image" &&
+        req.query?.auth
+      ) {
+        clientReq.setHeader("cookie", `jwt=${req.query.auth}`);
+        delete req.query.auth;
+      }
     },
     onProxyRes: (proxyRes, req, res) => {
       res.removeHeader("cookie");

src/features/auth/authSlice.ts

@@ -9,6 +9,7 @@ import { resetComments } from "../comment/commentSlice";
 import { resetUsers } from "../user/userSlice";
 import { resetInbox } from "../inbox/inboxSlice";
 import { differenceWith, uniqBy } from "lodash";
+import { resetCommunities } from "../community/communitySlice";
 
 const MULTI_ACCOUNT_STORAGE_NAME = "credentials";
 
@@ -220,6 +221,7 @@ export const changeAccount =
     dispatch(resetComments());
     dispatch(resetUsers());
     dispatch(resetInbox());
+    dispatch(resetCommunities());
     dispatch(setPrimaryAccount(handle));
 
     const iss = jwtIssSelector(getState());
@@ -246,14 +248,19 @@ function parseJWT(payload: string): LemmyJWT {
   return JSON.parse(jsonPayload);
 }
 
-export const clientSelector = createSelector(
+export const urlSelector = createSelector(
   [(state: RootState) => state.auth.connectedInstance, jwtIssSelector],
   (connectedInstance, iss) => {
     // never leak the jwt to the incorrect server
-    return getClient(iss ?? connectedInstance);
+    return iss ?? connectedInstance;
   }
 );
 
+export const clientSelector = createSelector([urlSelector], (url) => {
+  // never leak the jwt to the incorrect server
+  return getClient(url);
+});
+
 function updateCredentialsStorage(
   accounts: CredentialStoragePayload | undefined
 ) {

src/features/community/MoreActions.tsx

@@ -5,13 +5,19 @@ import {
   useIonModal,
   useIonToast,
 } from "@ionic/react";
-import { ellipsisHorizontal, heart, heartDislike } from "ionicons/icons";
+import {
+  createOutline,
+  ellipsisHorizontal,
+  heartDislikeOutline,
+  heartOutline,
+} from "ionicons/icons";
 import { useContext, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { followCommunity } from "./communitySlice";
 import { PageContext } from "../auth/PageContext";
 import Login from "../auth/Login";
 import { jwtSelector } from "../auth/authSlice";
+import { NewPostContext } from "../post/new/NewPostModal";
 
 interface MoreActionsProps {
   community: string;
@@ -24,13 +30,16 @@ export default function MoreActions({ community }: MoreActionsProps) {
   const jwt = useAppSelector(jwtSelector);
 
   const pageContext = useContext(PageContext);
-  const [login, onDismiss] = useIonModal(Login, {
-    onDismiss: (data: string, role: string) => onDismiss(data, role),
+  const [login, onDismissLogin] = useIonModal(Login, {
+    onDismiss: (data: string, role: string) => onDismissLogin(data, role),
   });
 
   const communityByHandle = useAppSelector(
     (state) => state.community.communityByHandle
   );
+
+  const { presentNewPost } = useContext(NewPostContext);
+
   const isSubscribed =
     communityByHandle[community]?.community_view.subscribed === "Subscribed" ||
     communityByHandle[community]?.community_view.subscribed === "Pending";
@@ -48,10 +57,15 @@ export default function MoreActions({ community }: MoreActionsProps) {
         cssClass="left-align-buttons"
         isOpen={open}
         buttons={[
+          {
+            text: "Submit Post",
+            role: "post",
+            icon: createOutline,
+          },
           {
             text: !isSubscribed ? "Subscribe" : "Unsubscribe",
             role: "subscribe",
-            icon: !isSubscribed ? heart : heartDislike,
+            icon: !isSubscribed ? heartOutline : heartDislikeOutline,
           },
           {
             text: "Cancel",
@@ -61,31 +75,39 @@ export default function MoreActions({ community }: MoreActionsProps) {
         onWillDismiss={async (e) => {
           setOpen(false);
 
-          if (e.detail.role === "subscribe") {
-            if (!jwt) return login({ presentingElement: pageContext.page });
+          switch (e.detail.role) {
+            case "subscribe": {
+              if (!jwt) return login({ presentingElement: pageContext.page });
+
+              try {
+                await dispatch(followCommunity(!isSubscribed, community));
+              } catch (error) {
+                present({
+                  message: `Problem ${
+                    isSubscribed ? "unsubscribing from" : "subscribing to"
+                  } c/${community}. Please try again.`,
+                  duration: 3500,
+                  position: "bottom",
+                  color: "danger",
+                });
+                throw error;
+              }
 
-            try {
-              await dispatch(followCommunity(!isSubscribed, community));
-            } catch (error) {
               present({
-                message: `Problem ${
-                  isSubscribed ? "unsubscribing from" : "subscribing to"
-                } c/${community}. Please try again.`,
+                message: `${
+                  isSubscribed ? "Unsubscribed from" : "Subscribed to"
+                } c/${community}.`,
                 duration: 3500,
                 position: "bottom",
-                color: "danger",
+                color: "success",
               });
-              throw error;
+              break;
             }
+            case "post": {
+              if (!jwt) return login({ presentingElement: pageContext.page });
 
-            present({
-              message: `${
-                isSubscribed ? "Unsubscribed from" : "Subscribed to"
-              } c/${community}.`,
-              duration: 3500,
-              position: "bottom",
-              color: "success",
-            });
+              presentNewPost();
+            }
           }
         }}
       />

src/features/community/communitySlice.ts

@@ -29,12 +29,16 @@ export const communitySlice = createSlice({
     ) => {
       state.trendingCommunities = action.payload;
     },
+    resetCommunities: () => initialState,
   },
 });
 
 // Action creators are generated for each case reducer function
-export const { receivedCommunity, recievedTrendingCommunities } =
-  communitySlice.actions;
+export const {
+  receivedCommunity,
+  recievedTrendingCommunities,
+  resetCommunities,
+} = communitySlice.actions;
 
 export default communitySlice.reducer;
 

src/features/post/new/NewPost.tsx

@@ -0,0 +1,17 @@
+import { IonNav } from "@ionic/react";
+import { CommunityResponse } from "lemmy-js-client";
+import NewPostRoot from "./NewPostRoot";
+import { useCallback } from "react";
+
+export type NewPostProps = {
+  setCanDismiss: (canDismiss: boolean) => void;
+  community: CommunityResponse | undefined;
+  dismiss: () => void;
+};
+
+export default function NewPost(props: NewPostProps) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const root = useCallback(() => <NewPostRoot {...props} />, []);
+
+  return <IonNav root={root} />;
+}

src/features/post/new/NewPostModal.tsx

@@ -0,0 +1,112 @@
+import { IonModal, useIonActionSheet } from "@ionic/react";
+import NewPost from "./NewPost";
+import { useAppSelector } from "../../../store";
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { createContext } from "react";
+import { PageContext } from "../../auth/PageContext";
+
+interface INewPostContext {
+  presentNewPost: () => void;
+}
+
+export const NewPostContext = createContext<INewPostContext>({
+  presentNewPost: () => {},
+});
+
+interface NewPostContextProviderProps {
+  children: React.ReactNode;
+  community: string;
+}
+
+export function NewPostContextProvider({
+  children,
+  community,
+}: NewPostContextProviderProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const presentNewPost = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+
+  return (
+    <NewPostContext.Provider value={{ presentNewPost }}>
+      <NewPostModal
+        community={community}
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+      />
+      {children}
+    </NewPostContext.Provider>
+  );
+}
+
+interface NewPostModalProps {
+  community: string;
+  setIsOpen: (open: boolean) => void;
+  isOpen: boolean;
+}
+
+function NewPostModal({ community, setIsOpen, isOpen }: NewPostModalProps) {
+  const pageContext = useContext(PageContext);
+
+  const [canDismiss, setCanDismiss] = useState(true);
+  const canDismissRef = useRef(canDismiss);
+
+  const communityByHandle = useAppSelector(
+    (state) => state.community.communityByHandle
+  );
+
+  const [presentActionSheet] = useIonActionSheet();
+
+  const onDismissAttemptCb = useCallback(async () => {
+    await presentActionSheet([
+      {
+        text: "Delete",
+        role: "destructive",
+        handler: () => {
+          setCanDismiss(true);
+          setTimeout(() => setIsOpen(false), 100);
+        },
+      },
+      {
+        text: "Cancel",
+        role: "cancel",
+      },
+    ]);
+
+    return false;
+  }, [presentActionSheet, setIsOpen]);
+
+  useEffect(() => {
+    // ಠ_ಠ
+    canDismissRef.current = canDismiss;
+  }, [canDismiss]);
+
+  return (
+    <IonModal
+      isOpen={isOpen}
+      canDismiss={canDismiss ? canDismiss : onDismissAttemptCb}
+      onDidDismiss={() => setIsOpen(false)}
+      presentingElement={pageContext.page}
+    >
+      <NewPost
+        setCanDismiss={setCanDismiss}
+        community={communityByHandle[community]}
+        dismiss={() => {
+          if (canDismissRef.current) {
+            setIsOpen(false);
+            return;
+          }
+
+          onDismissAttemptCb();
+        }}
+      />
+    </IonModal>
+  );
+}