more sane typing for the imageSize prop

mitodl · Jul 6, 2018 · f048197 · f048197
1 parent 3cf5cad
commit f048197
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 13 deletions.
diff --git a/static/js/components/CommentTree.js b/static/js/components/CommentTree.js
@@ -11,6 +11,7 @@ import { ReplyToCommentForm, EditCommentForm } from "./CommentForms"
 import CommentVoteForm from "./CommentVoteForm"
 import CommentRemovalForm from "./CommentRemovalForm"
 import { renderTextContent } from "./Markdown"
+import ProfileImage, { PROFILE_IMAGE_SMALL } from "../containers/ProfileImage"
 
 import { preventDefaultAndInvoke, userIsAnonymous } from "../lib/util"
 import {
@@ -28,7 +29,6 @@ import type {
 import type { FormsState } from "../flow/formTypes"
 import type { CommentRemoveFunc } from "./CommentRemovalForm"
 import type { CommentVoteFunc } from "./CommentVoteForm"
-import ProfileImage from "../containers/ProfileImage"
 
 type LoadMoreCommentsFunc = (comment: MoreCommentsInTree) => Promise<*>
 type BeginEditingFunc = (fk: string, iv: Object, e: ?Object) => void
@@ -116,7 +116,7 @@ export default class CommentTree extends React.Component<*, *> {
             image_small: comment.profile_image,
             username:    SETTINGS.username
           })}
-          imageSize="small"
+          imageSize={PROFILE_IMAGE_SMALL}
         />
         <div className="comment-contents">
           <div className="author-info">

diff --git a/static/js/components/ExpandedPostDisplay.js b/static/js/components/ExpandedPostDisplay.js
@@ -7,7 +7,7 @@ import R from "ramda"
 import { EditPostForm } from "./CommentForms"
 import { renderTextContent } from "./Markdown"
 import Embedly from "./Embedly"
-import ProfileImage from "../containers/ProfileImage"
+import ProfileImage, { PROFILE_IMAGE_MICRO } from "../containers/ProfileImage"
 import DropdownMenu from "./DropdownMenu"
 import SharePopup from "./SharePopup"
 
@@ -210,7 +210,7 @@ export default class ExpandedPostDisplay extends React.Component<
                   name:        post.author_name,
                   image_small: post.profile_image
                 })}
-                imageSize="micro"
+                imageSize={PROFILE_IMAGE_MICRO}
               />
               <div className="author-name">{post.author_name}</div>
             </div>

diff --git a/static/js/components/ProfileForm.js b/static/js/components/ProfileForm.js
@@ -2,14 +2,16 @@
 /* global SETTINGS: false */
 import React from "react"
 
-import ProfileImage from "../containers/ProfileImage"
+import ProfileImage, { PROFILE_IMAGE_MEDIUM } from "../containers/ProfileImage"
+
+import { validationMessage } from "../lib/validation"
+import { goBackAndHandleEvent } from "../lib/util"
+
 import type {
   Profile,
   ProfilePayload,
   ProfileValidation
 } from "../flow/discussionTypes"
-import { validationMessage } from "../lib/validation"
-import { goBackAndHandleEvent } from "../lib/util"
 
 type ProfileFormProps = {
   form: ProfilePayload,
@@ -45,7 +47,7 @@ export default class ProfileForm extends React.Component<*, void> {
           profile={profile}
           userName={profile.username}
           editable={profile.username === SETTINGS.username}
-          imageSize="medium"
+          imageSize={PROFILE_IMAGE_MEDIUM}
         />
         <form onSubmit={onSubmit} className="form">
           <div className="row image-and-name">

diff --git a/static/js/components/ProfileImageUploader.js b/static/js/components/ProfileImageUploader.js
@@ -6,6 +6,7 @@ import Dropzone from "react-dropzone"
 
 import CropperWrapper from "./CropperWrapper"
 import { FETCH_PROCESSING } from "../actions/image_upload"
+
 import type { ImageUploadState } from "../reducers/image_upload"
 
 const onDrop = R.curry((startPhotoEdit, files) => startPhotoEdit(...files))

diff --git a/static/js/components/UserMenu.js b/static/js/components/UserMenu.js
@@ -4,7 +4,7 @@ import React from "react"
 import { Link } from "react-router-dom"
 
 import DropdownMenu from "./DropdownMenu"
-import ProfileImage from "../containers/ProfileImage"
+import ProfileImage, { PROFILE_IMAGE_SMALL } from "../containers/ProfileImage"
 
 import { isProfileComplete } from "../lib/util"
 import { profileURL, SETTINGS_URL } from "../lib/url"
@@ -28,7 +28,7 @@ export default class UserMenu extends React.Component<*, *> {
           userName={SETTINGS.username}
           profile={profile}
           onClick={toggleShowUserMenu}
-          imageSize="small"
+          imageSize={PROFILE_IMAGE_SMALL}
         />
         {SETTINGS.profile_ui_enabled && !isProfileComplete(profile) ? (
           <div className="profile-incomplete" />

diff --git a/static/js/containers/ProfileImage.js b/static/js/containers/ProfileImage.js
@@ -23,7 +23,14 @@ import type { Dispatch } from "redux"
 
 const formatPhotoName = photo => `${photo.name.replace(/\.\w*$/, "")}.jpg`
 
-type ImageSize = "micro" | "small" | "medium"
+export const PROFILE_IMAGE_MICRO: "micro" = "micro"
+export const PROFILE_IMAGE_SMALL: "small" = "small"
+export const PROFILE_IMAGE_MEDIUM: "medium" = "medium"
+
+type ImageSize =
+  | typeof PROFILE_IMAGE_MICRO
+  | typeof PROFILE_IMAGE_SMALL
+  | typeof PROFILE_IMAGE_MEDIUM
 
 type ProfileImageProps = {
   clearPhotoEdit: () => void,

diff --git a/static/js/containers/ProfilePage.js b/static/js/containers/ProfilePage.js
@@ -6,7 +6,7 @@ import R from "ramda"
 import DocumentTitle from "react-document-title"
 
 import Card from "../components/Card"
-import ProfileImage from "./ProfileImage"
+import ProfileImage, { PROFILE_IMAGE_MEDIUM } from "./ProfileImage"
 import withLoading from "../components/Loading"
 import withSingleColumn from "../hoc/withSingleColumn"
 
@@ -74,7 +74,7 @@ class ProfilePage extends React.Component<*, void> {
                   profile={profile}
                   userName={userName}
                   editable={editable}
-                  imageSize="medium"
+                  imageSize={PROFILE_IMAGE_MEDIUM}
                 />
                 <div className="row image-and-name">
                   <div className="profile-view-fullname">