Fix ui errors (preview and image upload) (#347)

* fix broken preview

* fix broken image upload

frontend/app/components/comment/comment.tsx

@@ -19,6 +19,7 @@ import { Input } from '@app/components/input';
 import { AvatarIcon } from '@app/components/avatar-icon';
 import Countdown from '../countdown';
 import { boundActions } from './connected-comment';
+import { getPreview, uploadImage } from '@app/common/api';
 
 export type Props = {
   user: User | null;
@@ -43,6 +44,8 @@ export type Props = {
   theme: Theme;
   level?: number;
   mix?: string;
+  getPreview?: typeof getPreview;
+  uploadImage?: typeof uploadImage;
 } & Partial<typeof boundActions>;
 
 export interface State {

frontend/app/components/comment/connected-comment.ts

@@ -28,7 +28,15 @@ import { bindActions } from '@app/utils/actionBinder';
 const mapStateToProps = (state: StoreState, cprops: { data: CommentType }) => {
   const props: Pick<
     Props,
-    'editMode' | 'user' | 'isUserBanned' | 'post_info' | 'isCommentsDisabled' | 'theme' | 'collapsed'
+    | 'editMode'
+    | 'user'
+    | 'isUserBanned'
+    | 'post_info'
+    | 'isCommentsDisabled'
+    | 'theme'
+    | 'collapsed'
+    | 'getPreview'
+    | 'uploadImage'
   > = {
     editMode: getCommentMode(state, cprops.data.id),
     user: state.user,
@@ -37,6 +45,8 @@ const mapStateToProps = (state: StoreState, cprops: { data: CommentType }) => {
     isCommentsDisabled: state.info.read_only || false,
     theme: state.theme,
     collapsed: getThreadIsCollapsed(state, cprops.data),
+    getPreview,
+    uploadImage,
   };
   return props;
 };
@@ -53,8 +63,6 @@ export const boundActions = bindActions({
   unblockUser,
   hideUser,
   setVerifyStatus: setVerifiedStatus,
-  uploadImage,
-  getPreview,
 });
 
 /** Comment component connected to redux */

frontend/app/components/root/root.tsx

@@ -59,7 +59,6 @@ const boundActions = bindActions({
   logIn,
   logOut: logout,
   setTheme,
-  getPreview,
   enableComments: () => setCommentsReadOnlyState(false),
   disableComments: () => setCommentsReadOnlyState(true),
   changeSort: setSort,
@@ -69,7 +68,6 @@ const boundActions = bindActions({
   unhideUser,
   addComment,
   updateComment,
-  uploadImage,
 });
 
 type Props = {
@@ -82,6 +80,8 @@ type Props = {
   hiddenUsers: StoreState['hiddenUsers'];
   blockedUsers: BlockedUser[];
   isSettingsVisible: boolean;
+  getPreview: typeof getPreview;
+  uploadImage: typeof uploadImage;
 } & typeof boundActions;
 
 interface State {
@@ -330,6 +330,8 @@ export const ConnectedRoot = connect(
     info: state.info,
     hiddenUsers: state.hiddenUsers,
     blockedUsers: state.bannedUsers,
+    getPreview,
+    uploadImage,
   }),
   boundActions
 )(Root);