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
@@ -33,7 +34,6 @@ const maxAchievementProgress = {
 	7: 1,
 	8: 10,
 	9: 100,
-	// eslint-disable-next-line sort-keys
 	10: 10,
 	11: 7,
 	12: 30,
@@ -57,8 +57,37 @@ const maxAchievementProgress = {
 	30: 100
 };
 
-function Achievement(props) {
-	const {achievement, counter, unlocked} = props;
+interface Props {
+	achievement: {
+		id: number;
+		name: string;
+		description: string;
+		badgeUrl: string;
+	},
+	counter: number;
+	unlocked: boolean;
+};
+
+/**
+ * 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 {Object} props.achievement - The achievement object containing details.
+ * @param {number} props.achievement.id - The unique ID of the achievement.
+ * @param {string} props.achievement.name - The name of the achievement.
+ * @param {string} props.achievement.description - The description of the achievement.
+ * @param {string} props.achievement.badgeUrl - The URL of the achievement badge image.
+ * @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 Achievement({achievement, counter, unlocked}: Props): React.JSX.Element {
 	const {id, name, description, badgeUrl} = achievement;
 	const imgElement = unlocked ? (
 		<DragAndDropImage