Skip to content
This repository has been archived by the owner on Jan 3, 2025. It is now read-only.

Commit

Permalink
chore: enable semicolons in prettier config
Browse files Browse the repository at this point in the history
  • Loading branch information
sdanialraza committed Feb 18, 2024
1 parent 8801e5a commit 4c1c23a
Show file tree
Hide file tree
Showing 19 changed files with 129 additions and 130 deletions.
3 changes: 1 addition & 2 deletions .prettierrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,5 @@
"endOfLine": "lf",
"plugins": ["prettier-plugin-tailwindcss"],
"printWidth": 120,
"quoteProps": "as-needed",
"semi": false
"quoteProps": "as-needed"
}
2 changes: 1 addition & 1 deletion postcss.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@ export default {
tailwindcss: {},
autoprefixer: {},
},
}
};
10 changes: 5 additions & 5 deletions src/components/ExternalLink.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import type { ReactNode } from "react"
import type { ReactNode } from "react";

interface Props {
children: ReactNode
href: string
title?: string
children: ReactNode;
href: string;
title?: string;
}

export default function ExternalLink({ children, href, title }: Props) {
Expand All @@ -17,5 +17,5 @@ export default function ExternalLink({ children, href, title }: Props) {
>
{children}
</a>
)
);
}
22 changes: 11 additions & 11 deletions src/components/Quote.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import type { Quote } from "../util"
import type { Quote } from "../util";

interface Props {
quote: Quote | undefined
isFavorite?: boolean
onCopy?: () => void
onFavorite?: () => void
onGenerate?: () => void
onShare?: () => void
quote: Quote | undefined;
isFavorite?: boolean;
onCopy?: () => void;
onFavorite?: () => void;
onGenerate?: () => void;
onShare?: () => void;
}

export default function Quote({ quote, isFavorite, onCopy, onFavorite, onGenerate, onShare }: Props) {
Expand All @@ -15,11 +15,11 @@ export default function Quote({ quote, isFavorite, onCopy, onFavorite, onGenerat
<div className="m-1 flex flex-col gap-4 rounded-xl bg-card-color px-5 py-6 shadow-2xl md:gap-6">
<p>Unable to find a quote with that ID.</p>
</div>
)
);
}

if ([onCopy, onFavorite, onGenerate, onShare].includes(undefined)) {
return showQuote(quote)
return showQuote(quote);
}

return (
Expand All @@ -45,7 +45,7 @@ export default function Quote({ quote, isFavorite, onCopy, onFavorite, onGenerat
</div>
</div>
</div>
)
);
}

function showQuote(quote: Quote) {
Expand All @@ -56,5 +56,5 @@ function showQuote(quote: Quote) {
</p>
<p className="pb-2 text-center text-sm text-gray-300/85 dark:text-white">Submitted by {quote.submitter}</p>
</div>
)
);
}
4 changes: 2 additions & 2 deletions src/data/rawQuotes.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Quote } from "../util"
import type { Quote } from "../util";

export const rawQuotes: Quote[] = [
{
Expand Down Expand Up @@ -407,4 +407,4 @@ export const rawQuotes: Quote[] = [
submitter: "sdanialraza",
verified: true,
},
]
];
40 changes: 20 additions & 20 deletions src/hooks/useFavoriteQuotes.ts
Original file line number Diff line number Diff line change
@@ -1,36 +1,36 @@
import { useState } from "react"
import { useState } from "react";

import { notify } from "../util"
import { notify } from "../util";

export default function useFavoriteQuotes() {
const getFavoriteQuoteIds = () => {
if (typeof window === "undefined") return []
if (typeof window === "undefined") return [];

const favoriteQuoteIds = window.localStorage.getItem("favoriteQuoteIds")
return favoriteQuoteIds ? (JSON.parse(favoriteQuoteIds) as number[]) : []
}
const favoriteQuoteIds = window.localStorage.getItem("favoriteQuoteIds");
return favoriteQuoteIds ? (JSON.parse(favoriteQuoteIds) as number[]) : [];
};

const [favoriteQuoteIds, setFavoriteQuoteIds] = useState(getFavoriteQuoteIds)
const [favoriteQuoteIds, setFavoriteQuoteIds] = useState(getFavoriteQuoteIds);

const addFavoriteQuote = (quoteId: number) => {
if (favoriteQuoteIds.includes(quoteId)) {
const filteredQuoteIds = favoriteQuoteIds.filter(id => id !== quoteId)
const filteredQuoteIds = favoriteQuoteIds.filter(id => id !== quoteId);

setFavoriteQuoteIds(filteredQuoteIds)
window.localStorage.setItem("favoriteQuoteIds", JSON.stringify(filteredQuoteIds))
notify("💔", "Quote removed from favorites!")
setFavoriteQuoteIds(filteredQuoteIds);
window.localStorage.setItem("favoriteQuoteIds", JSON.stringify(filteredQuoteIds));
notify("💔", "Quote removed from favorites!");
} else {
setFavoriteQuoteIds([...favoriteQuoteIds, quoteId])
window.localStorage.setItem("favoriteQuoteIds", JSON.stringify([...favoriteQuoteIds, quoteId]))
notify("❤️", "Quote added to favorites!")
setFavoriteQuoteIds([...favoriteQuoteIds, quoteId]);
window.localStorage.setItem("favoriteQuoteIds", JSON.stringify([...favoriteQuoteIds, quoteId]));
notify("❤️", "Quote added to favorites!");
}
}
};

const setFavoriteQuotes = (quoteIds: number[]) => {
setFavoriteQuoteIds(quoteIds)
window.localStorage.setItem("favoriteQuoteIds", JSON.stringify(quoteIds))
notify("❤️", "Quotes added to favorites!")
}
setFavoriteQuoteIds(quoteIds);
window.localStorage.setItem("favoriteQuoteIds", JSON.stringify(quoteIds));
notify("❤️", "Quotes added to favorites!");
};

return { favoriteQuoteIds, addFavoriteQuote, setFavoriteQuotes }
return { favoriteQuoteIds, addFavoriteQuote, setFavoriteQuotes };
}
50 changes: 25 additions & 25 deletions src/hooks/useQuotes.ts
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
import { useNavigate } from "react-router-dom"
import { useCallback } from "react"
import copy from "copy-to-clipboard"
import { useNavigate } from "react-router-dom";
import { useCallback } from "react";
import copy from "copy-to-clipboard";

import { notify } from "../util"
import { rawQuotes } from "../data/rawQuotes"
import useFavoriteQuotes from "./useFavoriteQuotes"
import useRandomItem from "./useRandomItem"
import { notify } from "../util";
import { rawQuotes } from "../data/rawQuotes";
import useFavoriteQuotes from "./useFavoriteQuotes";
import useRandomItem from "./useRandomItem";

export default function useQuotes(quoteId: string) {
const navigate = useNavigate()
const navigate = useNavigate();

const filteredQuotes = rawQuotes.filter(quote => quote.verified)
const { item: randomQuote, change: changeRandomQuote } = useRandomItem(filteredQuotes)
const { favoriteQuoteIds, addFavoriteQuote } = useFavoriteQuotes()
const filteredQuotes = rawQuotes.filter(quote => quote.verified);
const { item: randomQuote, change: changeRandomQuote } = useRandomItem(filteredQuotes);
const { favoriteQuoteIds, addFavoriteQuote } = useFavoriteQuotes();

const quote = filteredQuotes.find(quote => quote.id === parseInt(quoteId))
const quote = filteredQuotes.find(quote => quote.id === parseInt(quoteId));

const isFavorite = quote ? favoriteQuoteIds.includes(quote.id) : false
const isFavorite = quote ? favoriteQuoteIds.includes(quote.id) : false;

const handleCopy = useCallback(() => {
const copied = copy(`${quote?.text} - ${quote?.author || "Unknown"}`)
if (copied) notify("📋", "Quote copied to the clipboard!")
}, [quote?.text, quote?.author])
const copied = copy(`${quote?.text} - ${quote?.author || "Unknown"}`);
if (copied) notify("📋", "Quote copied to the clipboard!");
}, [quote?.text, quote?.author]);

const handleFavorite = useCallback(() => {
if (quote) addFavoriteQuote(quote.id)
}, [addFavoriteQuote, quote])
if (quote) addFavoriteQuote(quote.id);
}, [addFavoriteQuote, quote]);

const handleGenerate = () => {
changeRandomQuote()
navigate(`/${randomQuote.id}`)
}
changeRandomQuote();
navigate(`/${randomQuote.id}`);
};

const handleShare = useCallback(() => {
const copied = copy(`${window.location.host}/${quote?.id}`)
if (copied) notify("🔗", "Quote link copied to the clipboard!")
}, [quote?.id])
const copied = copy(`${window.location.host}/${quote?.id}`);
if (copied) notify("🔗", "Quote link copied to the clipboard!");
}, [quote?.id]);

return { quote, isFavorite, handleCopy, handleFavorite, handleGenerate, handleShare }
return { quote, isFavorite, handleCopy, handleFavorite, handleGenerate, handleShare };
}
20 changes: 10 additions & 10 deletions src/hooks/useRandomItem.ts
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
import { useCallback, useEffect, useState } from "react"
import { useCallback, useEffect, useState } from "react";

export default function useRandomItem<T>(items: T[]) {
const [pickedIndex, setPickedIndex] = useState(-1)
const [pickedIndex, setPickedIndex] = useState(-1);

if (items.length < 2) throw new Error("Items must have at least 2 elements")
if (items.length < 2) throw new Error("Items must have at least 2 elements");

const change = useCallback(() => {
let randomIndex = Math.floor(Math.random() * items.length)
let randomIndex = Math.floor(Math.random() * items.length);

while (randomIndex === pickedIndex) {
randomIndex = Math.floor(Math.random() * items.length)
randomIndex = Math.floor(Math.random() * items.length);
}

setPickedIndex(randomIndex)
}, [items.length, pickedIndex])
setPickedIndex(randomIndex);
}, [items.length, pickedIndex]);

useEffect(change, [change])
useEffect(change, [change]);

const item = items[pickedIndex]
const item = items[pickedIndex];

return { item, change }
return { item, change };
}
16 changes: 8 additions & 8 deletions src/main.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import { Analytics } from "@vercel/analytics/react"
import { createRoot } from "react-dom/client"
import { Toaster } from "react-hot-toast"
import { StrictMode } from "react"
import { createBrowserRouter, RouterProvider } from "react-router-dom"
import { Analytics } from "@vercel/analytics/react";
import { createRoot } from "react-dom/client";
import { Toaster } from "react-hot-toast";
import { StrictMode } from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

import "./styles/globals.css"
import { routes } from "./pages"
import "./styles/globals.css";
import { routes } from "./pages";

createRoot(document.querySelector("#root")!).render(
<StrictMode>
<Analytics />
<Toaster />
<RouterProvider router={createBrowserRouter(routes)} />
</StrictMode>,
)
);
18 changes: 9 additions & 9 deletions src/pages/FavoriteQuotes.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { Link } from "react-router-dom"
import { Link } from "react-router-dom";

import Quote from "../components/Quote"
import useFavoriteQuotes from "../hooks/useFavoriteQuotes"
import { rawQuotes } from "../data/rawQuotes"
import Quote from "../components/Quote";
import useFavoriteQuotes from "../hooks/useFavoriteQuotes";
import { rawQuotes } from "../data/rawQuotes";

export default function FavoriteQuotes() {
const { favoriteQuoteIds } = useFavoriteQuotes()
const { favoriteQuoteIds } = useFavoriteQuotes();

return (
<div className="flex h-screen flex-col items-center justify-center gap-2">
Expand All @@ -15,19 +15,19 @@ export default function FavoriteQuotes() {
<button className="button bg-card-color hover:bg-gray-800">Back to home</button>
</Link>
</div>
)
);
}

function showFavoriteQuotes(favoriteQuoteIds: number[]) {
if (favoriteQuoteIds.length === 0) {
return <p className="text-hover-color dark:text-white">You have no favorite quotes.</p>
return <p className="text-hover-color dark:text-white">You have no favorite quotes.</p>;
}

const favoriteQuotes = rawQuotes.filter(quote => quote.verified && favoriteQuoteIds.includes(quote.id))
const favoriteQuotes = rawQuotes.filter(quote => quote.verified && favoriteQuoteIds.includes(quote.id));

return favoriteQuotes.map(favoriteQuote => (
<div key={favoriteQuote.id} className="flex flex-col">
<Quote quote={favoriteQuote} />
</div>
))
));
}
4 changes: 2 additions & 2 deletions src/pages/NotFound.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Link } from "react-router-dom"
import { Link } from "react-router-dom";

export default function NotFound() {
return (
Expand All @@ -11,5 +11,5 @@ export default function NotFound() {
</Link>
</div>
</div>
)
);
}
18 changes: 9 additions & 9 deletions src/pages/QuotesShow.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { FaGithub } from "react-icons/fa"
import { Link, useParams } from "react-router-dom"
import { FaGithub } from "react-icons/fa";
import { Link, useParams } from "react-router-dom";

import { REPOSITORY_LINK } from "../util"
import ExternalLink from "../components/ExternalLink"
import Quote from "../components/Quote"
import useQuotes from "../hooks/useQuotes"
import { REPOSITORY_LINK } from "../util";
import ExternalLink from "../components/ExternalLink";
import Quote from "../components/Quote";
import useQuotes from "../hooks/useQuotes";

export default function QuotesShow() {
const { quoteId } = useParams<{ quoteId: string }>()
const { quote, isFavorite, handleCopy, handleFavorite, handleGenerate, handleShare } = useQuotes(quoteId!)
const { quoteId } = useParams<{ quoteId: string }>();
const { quote, isFavorite, handleCopy, handleFavorite, handleGenerate, handleShare } = useQuotes(quoteId!);

return (
<div className="flex h-screen flex-col items-center justify-center gap-2">
Expand All @@ -28,5 +28,5 @@ export default function QuotesShow() {
<FaGithub size={24} />
</ExternalLink>
</div>
)
);
}
18 changes: 9 additions & 9 deletions src/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
import { redirect, type RouteObject } from "react-router-dom"
import { redirect, type RouteObject } from "react-router-dom";

import { rawQuotes } from "../data/rawQuotes"
import FavoriteQuotes from "./FavoriteQuotes"
import NotFound from "./NotFound"
import QuotesShow from "./QuotesShow"
import { rawQuotes } from "../data/rawQuotes";
import FavoriteQuotes from "./FavoriteQuotes";
import NotFound from "./NotFound";
import QuotesShow from "./QuotesShow";

export const routes: RouteObject[] = [
{
path: "/",
loader: () => {
const filteredIds = rawQuotes.filter(quote => quote.verified).map(quote => quote.id)
const randomId = Math.floor(Math.random() * filteredIds.length)
const filteredIds = rawQuotes.filter(quote => quote.verified).map(quote => quote.id);
const randomId = Math.floor(Math.random() * filteredIds.length);

return redirect(`/${randomId}`)
return redirect(`/${randomId}`);
},
},
{
Expand All @@ -27,4 +27,4 @@ export const routes: RouteObject[] = [
path: "*",
element: <NotFound />,
},
]
];
2 changes: 1 addition & 1 deletion src/util/constants.ts
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export const REPOSITORY_LINK = "https://github.com/sdanialraza/quotes-generator" as const
export const REPOSITORY_LINK = "https://github.com/sdanialraza/quotes-generator" as const;
Loading

0 comments on commit 4c1c23a

Please sign in to comment.