Merge pull request #1025 from meziyum/refactor-achivement

refactor(profile): refactor achievement to typescript

src/client/components/forms/parts/achievement.js → src/client/components/forms/parts/achievement.tsx

@@ -1,5 +1,6 @@
 /*
  * Copyright (C) 2016  Max Prettyjohns
+ * 				 2023  Meziyum
  *
  * This program is free software; you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
@@ -17,12 +18,13 @@
  */
 
 import * as bootstrap from 'react-bootstrap';
+import type {Achievement} from '../../input/drag-and-drop';
 import DragAndDropImage from '../../input/drag-and-drop-image';
-import PropTypes from 'prop-types';
 import React from 'react';
 
 
 const {Card, Col, Container, Row} = bootstrap;
+/* eslint-disable sort-keys */
 const maxAchievementProgress = {
 	1: 1,
 	2: 50,
@@ -33,7 +35,6 @@ const maxAchievementProgress = {
 	7: 1,
 	8: 10,
 	9: 100,
-	// eslint-disable-next-line sort-keys
 	10: 10,
 	11: 7,
 	12: 30,
@@ -56,28 +57,41 @@ const maxAchievementProgress = {
 	29: 10,
 	30: 100
 };
+/* eslint-enable sort-keys */
 
-function Achievement(props) {
-	const {achievement, counter, unlocked} = props;
-	const {id, name, description, badgeUrl} = achievement;
+interface AchievementComponentProps {
+	achievement: Achievement
+}
+
+/**
+ * Achievement Component
+ *
+ * A React component that displays an achievement card with its details, including name,
+ * description, badge image, and progress if the achievement is locked.
+ *
+ * @component
+ *
+ * @param {Object} props - The props for the Achievement component.
+ * @param {Achievement} props.achievement - The achievement object containing details.
+ * @param {number} props.counter - The current progress or counter for the achievement.
+ * @param {boolean} props.unlocked - A boolean indicating whether the achievement is unlocked.
+ *
+ * @returns {JSX.Element} The rendered Achievement card component.
+ */
+function AchievementComponent({achievement}: AchievementComponentProps): JSX.Element {
+	const {id, name, description, badgeUrl, counter, unlocked} = achievement;
 	const imgElement = unlocked ? (
 		<DragAndDropImage
 			achievementId={id}
 			achievementName={name}
 			height="100px"
 			src={badgeUrl}
-			style={{
-				zIndex: 2
-			}}
 		/>
 	) : (
 		<img
 			alt={name}
 			height="100px"
 			src={badgeUrl}
-			style={{
-				zIndex: 2
-			}}
 		/>
 	);
 
@@ -107,21 +121,6 @@ function Achievement(props) {
 	);
 }
 
-Achievement.displayName = 'achievement';
-
-Achievement.propTypes = {
-	achievement: PropTypes.shape({
-		badgeUrl: PropTypes.string,
-		description: PropTypes.string,
-		id: PropTypes.number,
-		name: PropTypes.string
-	}).isRequired,
-	counter: PropTypes.number,
-	unlocked: PropTypes.bool
-};
-Achievement.defaultProps = {
-	counter: 0,
-	unlocked: false
-};
+AchievementComponent.displayName = 'achievement';
 
-export default Achievement;
+export default AchievementComponent;

src/client/components/input/drag-and-drop-image.tsx

@@ -16,7 +16,6 @@
  * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
  */
 
-import PropTypes from 'prop-types';
 import React from 'react';
 
 
@@ -71,11 +70,5 @@ function DragAndDropImage({achievementId, achievementName, height, src}: Props):
 }
 
 DragAndDropImage.displayName = 'DragAndDropImage';
-DragAndDropImage.propTypes = {
-	achievementId: PropTypes.number.isRequired,
-	achievementName: PropTypes.string.isRequired,
-	height: PropTypes.string.isRequired,
-	src: PropTypes.string.isRequired
-};
 
 export default DragAndDropImage;

src/client/components/input/drag-and-drop.tsx

@@ -17,7 +17,6 @@
  */
 
 import * as bootstrap from 'react-bootstrap';
-import PropTypes from 'prop-types';
 import React from 'react';
 
 
@@ -31,10 +30,20 @@ const {useState, useCallback} = React;
 * @property {string} badgeUrl - The source URL of the achievement's badge image.
 * @property {number} id - The ID of the achievement.
 */
-type Achievement = {
-	name: string;
+export type Achievement = {
 	badgeUrl: string | null;
+	counter:number;
+	description: string;
 	id: number;
+	name: string;
+	unlocked: boolean;
+};
+type AchievementForDisplay = Pick<Achievement, 'badgeUrl' | 'id' | 'name'>;
+
+const blankBadge:AchievementForDisplay = {
+	badgeUrl: '/images/blankbadge.svg',
+	id: null,
+	name: 'drag badge to set'
 };
 
 /**
@@ -56,18 +65,14 @@ type Props = {
 * @returns {JSX.Element} A React component that displays a drag-and-drop card for an achievement.
 */
 function DragAndDrop({name, initialAchievement}: Props): JSX.Element {
-	const [achievement, setAchievement] = useState<Achievement>(initialAchievement);
+	const [achievement, setAchievement] = useState<AchievementForDisplay>(initialAchievement);
 	const handleClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
 		event.preventDefault();
-		setAchievement({
-			badgeUrl: '/images/blankbadge.svg',
-			id: null,
-			name: 'drag badge to set'
-		});
-	});
+		setAchievement(blankBadge);
+	}, []);
 	const handleDragOver = useCallback((event: React.DragEvent<HTMLDivElement>) => {
 		event.preventDefault();
-	});
+	}, []);
 	const handleDrop = useCallback((event: React.DragEvent<HTMLDivElement>) => {
 		event.preventDefault();
 		let data;
@@ -83,7 +88,7 @@ function DragAndDrop({name, initialAchievement}: Props): JSX.Element {
 			id: data.id,
 			name: data.name
 		});
-	});
+	}, [setAchievement]);
 	return (
 		<Card
 			bg="light"
@@ -114,20 +119,9 @@ function DragAndDrop({name, initialAchievement}: Props): JSX.Element {
 }
 
 DragAndDrop.displayName = 'DragAndDrop';
-DragAndDrop.propTypes = {
-	initialAchievement: PropTypes.shape({
-		badgeUrl: PropTypes.string,
-		id: PropTypes.number,
-		name: PropTypes.string.isRequired
-	}),
-	name: PropTypes.string.isRequired
-};
+
 DragAndDrop.defaultProps = {
-	initialAchievement: {
-		badgeUrl: '/images/blankbadge.svg',
-		id: null,
-		name: 'drag badge to set'
-	}
+	initialAchievement: blankBadge
 };
 
 export default DragAndDrop;

src/client/components/pages/parts/editor-achievements.js

@@ -59,9 +59,7 @@ class EditorAchievementTab extends React.Component {
 			const achievementHTML = (
 				<Achievement
 					achievement={achievement}
-					counter={achievement.counter}
 					key={`${this.state.editor.id}${achievement.id}`}
-					unlocked={achievement.unlocked}
 				/>
 			);
 			if (achievement.unlocked) {