CL-124-Styling-at-CatProfile.tsx-to-be-done

src/Components/CatProfile.tsx

@@ -13,28 +13,24 @@ import Messages from './Styling/Messages';
 
 const { REACT_APP_LOGGED_IN_USER } = process.env;
 
-function CatProfile() {
+interface Props {
+	selectedCat: CatFromAxios;
+}
+
+function CatProfile({ selectedCat }: Props) {
 	const [catName, setCatName] = useState<string>('');
 	const [catPicture, setCatPicture] = useState<string | null>('');
 	const [catDescription, setCatDescription] = useState<string | null>('');
 	const [catProfiles, setCatProfiles] = useState<CatFromAxios[]>([]);
-	const [isLoading, setIsLoading] = useState<boolean>(true);
+	const [isLoading, setIsLoading] = useState<boolean>(false);
 	const [message, setMessage] = useState<string>('');
 
 	useEffect(() => {
-		getCatsProfiles(REACT_APP_LOGGED_IN_USER as string).then(
-			(fetchedProfiles) => {
-				if (Array.isArray(fetchedProfiles) && fetchedProfiles.length > 0) {
-					const profile = fetchedProfiles[0];
-					setCatProfiles(fetchedProfiles);
-					setCatName(profile.name);
-					setCatPicture(profile.picture_url);
-					setCatDescription(profile.description);
-				}
-				setIsLoading(false);
-			}
-		);
-	}, []);
+		setCatName(selectedCat.name);
+		setCatPicture(selectedCat.picture_url);
+		setCatDescription(selectedCat.description);
+		setCatProfiles([selectedCat]);
+	}, [selectedCat]);
 
 	if (isLoading) {
 		return <p>Loading...</p>;
@@ -93,8 +89,8 @@ function CatProfile() {
 	};
 
 	return (
-		<div className="w-72 p-20 m-auto bg-emerald-100	">
-			<H3>Cat&apos;s Profile</H3>
+		<>
+			<H3>{selectedCat.name}&apos;s Profile</H3>
 			{message && (
 				<>
 					{message === 'Updates have been saved' && (
@@ -111,7 +107,7 @@ function CatProfile() {
 					)}
 				</>
 			)}
-			<div className="flex flex-col">
+			<form>
 				<FormInput
 					label="Name"
 					type="text"
@@ -133,12 +129,14 @@ function CatProfile() {
 					value={catDescription ?? ''}
 					onChange={handleProfileEditBy}
 				/>
-				<Button type="submit" onClick={handleSavedChanges}>
-					Submit
-				</Button>
-				<Button onClick={handleDeleteProfile}>Delete</Button>
-			</div>
-		</div>
+				<div className="flex">
+					<Button type="submit" onClick={handleSavedChanges}>
+						Submit
+					</Button>
+					<Button onClick={handleDeleteProfile}>Delete</Button>
+				</div>
+			</form>
+		</>
 	);
 }
 export default CatProfile;

src/Components/MyClowder.tsx

@@ -22,20 +22,22 @@ export default function MyClowder() {
 		}
 	}, [userId]);
 
-	return selectedCat ? (
-		<ModalPopover>
-			<CatProfile></CatProfile>
-		</ModalPopover>
-	) : (
+	return (
 		<>
 			<H2>My Clowder</H2>
-			<ul>
-				{myCats.map((cat) => (
-					<li key={cat.id}>
-						<CatCard cat={cat} setSelectedCat={setSelectedCat} />
-					</li>
-				))}
-			</ul>
+			{selectedCat ? (
+				<ModalPopover>
+					<CatProfile selectedCat={selectedCat}></CatProfile>
+				</ModalPopover>
+			) : (
+				<ul>
+					{myCats.map((cat) => (
+						<li key={cat.id}>
+							<CatCard cat={cat} setSelectedCat={setSelectedCat} />
+						</li>
+					))}
+				</ul>
+			)}
 		</>
 	);
 }

src/Components/Styling/Button.tsx

@@ -8,14 +8,28 @@ interface Props {
 }
 
 export default function Button({ children, type, onClick, disabled }: Props) {
+	let colour = 'bg-blue-500';
+	switch (children) {
+		case 'Submit':
+			colour = 'bg-green-500';
+			break;
+		case 'Delete':
+			colour = 'bg-red-500';
+			break;
+		default:
+			break;
+	}
+
 	return (
 		<button
 			type={type}
 			onClick={onClick}
 			disabled={disabled}
-			className="bg-blue-500 text-white
-			text-base border-none rounded-xl cursor-pointer h-10 mx-auto my-5 p-2
-			block disabled:bg-gray-200"
+			className={
+				'text-white text-base border-none rounded-xl cursor-pointer h-10 mx-auto my-5 p-2 block disabled:bg-gray-200' +
+				' ' +
+				colour
+			}
 		>
 			{children}
 		</button>

src/Components/Styling/FormInput.tsx

@@ -20,7 +20,7 @@ export default function FormInput({
 	return (
 		<FormElement label={label}>
 			<input
-				className="m-5 shadow-inner bg-gray-200 p-2 rounded-xl max-w-40 sm:max-w-none"
+				className="mx-5 mb-5 shadow-inner bg-gray-200 p-2 rounded-xl max-w-40 sm:max-w-none"
 				type={type}
 				name={name}
 				value={value}

src/Components/Styling/ModalPopover.tsx

@@ -6,7 +6,7 @@ interface Props {
 
 export default function ModalPopover({ children }: Props) {
 	return (
-		<div className="shadow-2xl rounded-2xl bg-white p-5 my-5 mx-auto border-2 w-2/3">
+		<div className="shadow-2xl rounded-2xl bg-white p-5 my-5 mx-auto border-2 w-full sm:w-2/3">
 			{children}
 		</div>
 	);