Skip to content

Commit

Permalink
feat(app): #81 pdf download button
Browse files Browse the repository at this point in the history 
toggle for downloading pdfs

Closes: #81
  • Loading branch information
@akshat-OwO
akshat-OwO committed Jan 20, 2024
1 parent f342c13 commit fa96c02
Showing 1 changed file with 125 additions and 99 deletions.
224 changes: 125 additions & 99 deletions src/components/StudyMaterial.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ import {
RefetchOptions,
useQuery,
} from "@tanstack/react-query";
import { Check, Frown, Heart, RotateCw } from "lucide-react";
import { useState } from "react";
import { Check, Download, Frown, Heart, RotateCw } from "lucide-react";
import React, { useState } from "react";
import { Badge } from "./ui/badge";
import { Button, buttonVariants } from "./ui/button";
import { Skeleton } from "./ui/skeleton";
Expand Down Expand Up @@ -42,23 +42,14 @@ const StudyMaterial = ({
subject,
}: StudyMaterialProps) => {
const [createFav, setCreateFav] = useState<boolean>(false);
const [download, setDownload] = useState<boolean>(false);
const [favorites, setFavorites] = useLocalStorage<string[]>({
key: "favorites",
defaultValue: [],
});

const [embed, setEmbed] = useEmbed();

const handleEmbed = (d: Drive) => {
if (!createFav) {
setEmbed({
embedLink: d.webViewLink.slice(0, -17) + "preview",
name: d.name.slice(0, -4),
isOpen: true,
});
}
};

const addFavorite = (materialId: string) => {
setFavorites((current) => {
return [...current, materialId];
Expand All @@ -71,6 +62,30 @@ const StudyMaterial = ({
});
};

const DownloadFile = (fileId: string) => {
window.open(
`https://drive.google.com/uc?export=download&id=${fileId}`,
"_blank"
);
};

const onClick = (d: Drive) => {
if (createFav) {
if (favorites.includes(d.id)) {
return removeFavorite(d.id);
}
return addFavorite(d.id);
}
if (download) {
return DownloadFile(d.id);
}
return setEmbed({
embedLink: d.webViewLink.slice(0, -17) + "preview",
name: d.name.slice(0, -4),
isOpen: true,
});
};

const generateQueryKey = (): QueryKey => {
if (course == "btech") {
return [course, tab, semester, branch, subject];
Expand Down Expand Up @@ -108,93 +123,91 @@ const StudyMaterial = ({
return (
<TabsContent value={tab}>
<StudyMaterial.Header
createFav={createFav}
error={error}
isFetching={isFetching}
isLoading={isLoading}
refetch={refetch}
download={download}
setDownload={setDownload}
createFav={createFav}
setCreateFav={setCreateFav}
/>
{error ? <StudyMaterial.Error /> : null}

{isLoading ? <StudyMaterial.Skeleton /> : null}

{data && !error ? (
<>
<div className="grid gap-5 rounded-md bg-accent p-5 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
{data.map((d) => (
{data && !error && (
<div className="grid gap-4 rounded-md bg-accent p-2 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
{data.map((d) => (
<Button
key={d.id}
variant={
embed.embedLink ===
d.webViewLink.slice(0, -17) + "preview"
? "ghost"
: favorites.includes(d.id)
? "default"
: "tertiary"
}
className="group relative h-full cursor-pointer whitespace-normal text-center font-semibold shadow-sm"
onClick={() => onClick(d)}
>
{!(
new Date(Date.parse(d.createdTime)).getTime() <
new Date(
Date.now() - 2 * 24 * 60 * 60 * 1000
).getTime()
) && (
<Badge
variant={"secondary"}
className="absolute -left-2 -top-2 z-10 rounded-sm bg-teal-600 hover:bg-teal-600 group-hover:animate-pulse"
>
New
</Badge>
)}
<div
key={d.id}
className={cn(
buttonVariants({
variant:
embed.embedLink ===
d.webViewLink.slice(0, -17) +
"preview"
? "ghost"
: favorites.includes(d.id)
? "default"
: "tertiary",
className:
"group relative h-full cursor-pointer whitespace-normal text-center shadow-sm",
})
"absolute hidden h-full w-full items-center justify-center rounded-md bg-background/90 hover:bg-secondary/80",
{
flex: createFav || download,
}
)}
onClick={() => handleEmbed(d)}
>
{!(
new Date(
Date.parse(d.createdTime)
).getTime() <
new Date(
Date.now() - 2 * 24 * 60 * 60 * 1000
).getTime()
) ? (
<Badge
variant={"secondary"}
className="absolute -left-2 -top-2 z-10 rounded-sm bg-teal-600 hover:bg-teal-600 group-hover:animate-pulse"
{createFav && (
<div
className={cn(
buttonVariants({
size: "icon",
variant: "tertiary",
})
)}
>
New
</Badge>
) : null}
{createFav ? (
<div className="absolute top-0 flex h-full w-full items-center justify-center bg-background/90">
{favorites.includes(d.id) ? (
<div
className={cn(
buttonVariants({
variant: "ghost",
size: "icon",
})
)}
onClick={() =>
removeFavorite(d.id)
}
>
<Heart className="h-4 w-4 fill-red-500 stroke-red-500" />
</div>
) : (
<div
className={cn(
buttonVariants({
variant: "ghost",
size: "icon",
})
)}
onClick={() =>
addFavorite(d.id)
}
>
<Heart className="h-4 w-4" />
</div>
<Heart
className={cn("h-4 w-4", {
"fill-red-500 stroke-red-500":
favorites.includes(d.id),
})}
/>
</div>
)}
{download && (
<div
className={cn(
buttonVariants({
size: "icon",
variant: "tertiary",
})
)}
>
<Download className="h-4 w-4" />
</div>
) : null}
<div>{d.name.slice(0, -4)}</div>
)}
</div>
))}
</div>
</>
) : null}
{d.name.slice(0, -4)}
</Button>
))}
</div>
)}
</TabsContent>
);
};
Expand Down Expand Up @@ -234,45 +247,58 @@ StudyMaterial.Error = function StudyMaterialError() {
};

StudyMaterial.Header = function StudyMaterialHeader({
createFav,
error,
isLoading,
isFetching,
refetch,
download,
setDownload,
createFav,
setCreateFav,
}: {
createFav: boolean;
error: Error | null;
isLoading: boolean;
isFetching: boolean;
refetch: (
options?: RefetchOptions | undefined
) => Promise<QueryObserverResult<Drive[] | null, Error>>;
download: boolean;
setDownload: (value: React.SetStateAction<boolean>) => void;
createFav: boolean;
setCreateFav: (value: React.SetStateAction<boolean>) => void;
}) {
return (
<div className="mb-2 flex items-center justify-end gap-2">
{createFav && !error && !isLoading ? (
<Button size={"icon"} onClick={() => setCreateFav(false)}>
<Button
variant={!createFav ? "secondary" : "default"}
size={"icon"}
disabled={download || isLoading || !!error}
onClick={() => setCreateFav(!createFav)}
>
{createFav ? (
<Check className="h-4 w-4" />
</Button>
) : (
!error &&
!isLoading && (
<Button
variant={"secondary"}
size={"icon"}
onClick={() => setCreateFav(true)}
>
<Heart className="h-4 w-4" />
</Button>
)
)}
) : (
<Heart className="h-4 w-4" />
)}
</Button>

<Button
variant={!download ? "secondary" : "default"}
size={"icon"}
disabled={createFav || isLoading || !!error}
onClick={() => setDownload(!download)}
>
{download ? (
<Check className="h-4 w-4" />
) : (
<Download className="h-4 w-4" />
)}
</Button>

<Button
variant={"secondary"}
size={"icon"}
disabled={isFetching}
disabled={isFetching || createFav || download}
onClick={() => refetch()}
>
<RotateCw
Expand Down

0 comments on commit fa96c02

Please sign in to comment.