add currency starring feature

Author: yethranayeh

src/components/CalculationView/CalculationView.tsx

@@ -3,6 +3,7 @@ import clsx from "clsx";
 
 import { convert } from "../../utils/convert";
 import { CurrencyMapContext } from "../../context/CurrencyMapContext";
+import { StorageContext } from "../../context/StorageContext";
 
 import { Gears } from "../Gears";
 import { CurrencySelection } from "./CurrencySelection";
@@ -13,7 +14,8 @@ import { HiddenDataInfo } from "./HiddenDataInfo";
 import { currencies } from "../../constant";
 
 export function CalculationView() {
-	const [selected, setSelected] = useState<CurrencyKey | "">("");
+	const { preferences } = useContext(StorageContext);
+	const [selected, setSelected] = useState<CurrencyKey | "">(preferences.starred ?? "");
 	const [value, setValue] = useState("");
 	const currencyMap = useContext(CurrencyMapContext);
 

src/components/CalculationView/CurrencyInput.tsx

@@ -1,8 +1,24 @@
 import type { ChangeEvent } from "react";
-import { useCallback } from "react";
+import { useCallback, useContext } from "react";
+import { Star, StarOff } from "lucide-react";
 
 import { Currency } from "../Currency";
 import { Input } from "../shadcn/Input";
+import { StorageContext } from "../../context/StorageContext";
+
+function StarButton({ currency }: { currency: CurrencyKey }) {
+	const { setPreferences, preferences } = useContext(StorageContext);
+	const isSelected = preferences.starred === currency;
+
+	return (
+		<button
+			title={`Select "${currency}" on page load`}
+			className='ml-10'
+			onClick={() => setPreferences(isSelected ? { starred: null } : { starred: currency })}>
+			{isSelected ? <StarOff className='w-4 h-4' /> : <Star className='w-4 h-4' />}
+		</button>
+	);
+}
 
 type Props = {
 	value: string;
@@ -36,6 +52,8 @@ export function CurrencyInput({ value, setValue, selected }: Props) {
 			<span className='ml-[-5px]'>×</span>
 			<Currency name={selected} />
 			<span> equals</span>
+
+			<StarButton currency={selected} />
 		</div>
 	);
 }

src/context/types.d.ts

@@ -2,5 +2,5 @@ interface IStorage {
 	cache: ReturnType<typeof getCache>;
 	setCache: (data: RateDefinitions) => void;
 	preferences: Preference;
-	setPreferences: (pref: Preference) => void;
+	setPreferences: (pref: Partial<Preference>) => void;
 }

src/utils/storage.ts

@@ -1,6 +1,6 @@
 const cacheKey = "currencyMapCache";
 const preferencesKey = "preferences";
-const initialPreferences: Preference = { pinned: null };
+const initialPreferences: Preference = { pinned: null, starred: null };
 
 export function getCache() {
 	const cacheData = localStorage.getItem(cacheKey);

src/utils/types.d.ts

@@ -1 +1 @@
-type Preference = { pinned: null | { primary: CurrencyKey; secondary: CurrencyKey } };
+type Preference = { pinned: null | { primary: CurrencyKey; secondary: CurrencyKey }; starred: CurrencyKey | null };