check image sizes on profile updates

permaweb · Aug 1, 2024 · 3e1415b · 3e1415b
1 parent bab10f8
commit 3e1415b
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 3 deletions.
diff --git a/src/components/organisms/ProfileManage/ProfileManage.tsx b/src/components/organisms/ProfileManage/ProfileManage.tsx
@@ -21,6 +21,7 @@ import * as S from './styles';
 import { IProps } from './types';
 
 const MAX_BIO_LENGTH = 500;
+export const MAX_IMAGE_SIZE = 100000;
 const ALLOWED_BANNER_TYPES = 'image/png, image/jpeg, image/gif';
 const ALLOWED_AVATAR_TYPES = 'image/png, image/jpeg, image/gif';
 
@@ -251,6 +252,18 @@ export default function ProfileManage(props: IProps) {
 		}
 	}
 
+	function getImageSizeMessage() {
+		if (!avatar && !banner) return null;
+		if (checkValidAddress(avatar) && checkValidAddress(banner)) return null;
+
+		const avatarSize = avatar ? (avatar.length * 3) / 4 : 0;
+		const bannerSize = banner ? (banner.length * 3) / 4 : 0;
+
+		if (avatarSize > MAX_IMAGE_SIZE || bannerSize > MAX_IMAGE_SIZE)
+			return <span>One or more images exceeds max size of 100KB</span>;
+		return null;
+	}
+
 	function getInvalidBio() {
 		if (bio && bio.length > MAX_BIO_LENGTH) {
 			return {
@@ -360,6 +373,9 @@ export default function ProfileManage(props: IProps) {
 										disabled={loading || !banner}
 									/>
 								</S.PActions>
+								<S.PInfoMessage>
+									<span>Images have a max size of 100KB</span>
+								</S.PInfoMessage>
 							</S.PWrapper>
 							<S.Form>
 								<S.TForm>
@@ -409,10 +425,11 @@ export default function ProfileManage(props: IProps) {
 									type={'alt1'}
 									label={language.save}
 									handlePress={handleSubmit}
-									disabled={!username || !name || loading}
+									disabled={!username || !name || loading || getImageSizeMessage() !== null}
 									loading={loading}
 								/>
 							</S.SAction>
+							<S.MInfoWrapper>{getImageSizeMessage()}</S.MInfoWrapper>
 						</S.Body>
 					</S.Wrapper>
 					{profileResponse && (

diff --git a/src/components/organisms/ProfileManage/styles.ts b/src/components/organisms/ProfileManage/styles.ts
@@ -260,6 +260,18 @@ export const PActions = styled.div`
 	}
 `;
 
+export const PInfoMessage = styled.div`
+	margin: 15px 0 0 0;
+	display: flex;
+	justify-content: flex-end;
+	span {
+		color: ${(props) => props.theme.colors.font.alt1};
+		font-size: ${(props) => props.theme.typography.size.xSmall};
+		font-weight: ${(props) => props.theme.typography.weight.medium};
+		line-height: 1.5;
+	}
+`;
+
 export const SAction = styled.div`
 	width: 100%;
 	display: flex;
@@ -303,3 +315,19 @@ export const MActions = styled.div`
 	flex-wrap: wrap;
 	gap: 15px;
 `;
+
+export const MInfoWrapper = styled.div`
+	width: fit-content;
+	margin: 20px 0 0 auto;
+	span {
+		background: ${(props) => props.theme.colors.warning.primary};
+		color: ${(props) => props.theme.colors.font.light1};
+		font-size: ${(props) => props.theme.typography.size.xxSmall};
+		font-weight: ${(props) => props.theme.typography.weight.bold};
+		border-radius: ${STYLING.dimensions.radius.alt2};
+		text-align: center;
+		display: block;
+		padding: 2.5px 12.5px;
+		margin: 0 0 7.5px 0;
+	}
+`;
diff --git a/src/components/organisms/Streaks/Streaks.tsx b/src/components/organisms/Streaks/Streaks.tsx
@@ -21,7 +21,7 @@ import { RootState } from 'store';
 import * as S from './styles';
 import { IProps } from './types';
 
-const GROUP_COUNT = 500;
+const GROUP_COUNT = 250;
 
 export default function Streaks(props: IProps) {
 	const navigate = useNavigate();
@@ -38,6 +38,7 @@ export default function Streaks(props: IProps) {
 	const [streakGroups, setStreakGroups] = React.useState<StreakType[][]>([]);
 	const [streaks, setStreaks] = React.useState<StreakType[] | null>(null);
 	const [streakCursor, setStreakCursor] = React.useState<number>(0);
+	const [streakHolderCount, setStreakHolderCount] = React.useState<number | null>(null);
 	const [updating, setUpdating] = React.useState<boolean>(false);
 
 	const [count, setCount] = React.useState<number>(0);
@@ -67,6 +68,8 @@ export default function Streaks(props: IProps) {
 						};
 					});
 
+				setStreakHolderCount(sortedStreaks.length);
+
 				let groups = [];
 				for (let i = 0, j = 0; i < sortedStreaks.length; i += GROUP_COUNT, j++) {
 					groups[j] = sortedStreaks.slice(i, i + GROUP_COUNT);
@@ -347,7 +350,7 @@ export default function Streaks(props: IProps) {
 		return (
 			<S.StreaksPanelWrapper ref={streaksWrapperRef}>
 				<S.StreaksPanelHeader>
-					<p>{`${streaksReducer ? Object.keys(streaksReducer).length : '-'} ${language.streakHolders}`}</p>
+					<p>{`${streakHolderCount ? streakHolderCount : '-'} ${language.streakHolders}`}</p>
 				</S.StreaksPanelHeader>
 				<S.StreaksWrapper>
 					{streaks.map((streak: StreakType, index: number) => {