Skip to content

Commit b144de4

Browse files
abhitrueprogrammerabhitrueprogrammer
committed
added make paper/id ssr
1 parent fbf0914 commit b144de4

File tree

5 files changed

+297
-159
lines changed

5 files changed

+297
-159
lines changed

‎src/app/actions/get-papers-by-id.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// "use server";
2+
import { ErrorResponse, PaperResponse } from "@/interface";
3+
import axios, { AxiosResponse } from "axios";
4+
5+
export const fetchPaperID = async (
6+
id: string,
7+
) => {
8+
try {
9+
const response: AxiosResponse<PaperResponse> = await axios.get(
10+
`http://localhost:3000/api/paper-by-id/${id}`,
11+
);
12+
return response.data;
13+
} catch (err: unknown) {
14+
throw err;
15+
16+
}
17+
};

‎src/app/fe_api/index.ts

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎src/app/paper/[id]/backup.tsx

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
"use client";
2+
import { useState, useEffect } from "react";
3+
import axios, { type AxiosResponse } from "axios";
4+
import Footer from "@/components/Footer";
5+
import Navbar from "@/components/Navbar";
6+
import { Download, Eye, Maximize } from "lucide-react";
7+
import { useRouter } from "next/navigation";
8+
import { Worker } from "@react-pdf-viewer/core";
9+
import { Viewer } from "@react-pdf-viewer/core";
10+
import {
11+
zoomPlugin,
12+
ZoomInIcon,
13+
ZoomOutIcon,
14+
type RenderZoomOutProps,
15+
type RenderZoomInProps,
16+
type RenderCurrentScaleProps,
17+
} from "@react-pdf-viewer/zoom";
18+
import { getFilePlugin } from "@react-pdf-viewer/get-file";
19+
20+
import {
21+
fullScreenPlugin,
22+
type RenderEnterFullScreenProps,
23+
} from "@react-pdf-viewer/full-screen";
24+
25+
import "@react-pdf-viewer/full-screen/lib/styles/index.css";
26+
import "@react-pdf-viewer/core/lib/styles/index.css";
27+
import "@react-pdf-viewer/zoom/lib/styles/index.css";
28+
import Loader from "@/components/ui/loader";
29+
import Link from "next/link";
30+
import { PaperResponse } from "@/interface";
31+
import { fetchPaperID } from "@/app/actions/get-papers-by-id";
32+
33+
interface ErrorResponse {
34+
message: string;
35+
}
36+
37+
interface Params {
38+
params: { id: string };
39+
}
40+
41+
export default function PaperPage({ params }: Params) {
42+
const [paper, setPaper] = useState<PaperResponse | null>(null);
43+
const [error, setError] = useState<string | null>(null);
44+
const router = useRouter();
45+
const getFilePluginInstance = getFilePlugin();
46+
const zoomPluginInstance = zoomPlugin();
47+
const { CurrentScale, ZoomIn, ZoomOut } = zoomPluginInstance;
48+
const fullScreenPluginInstance = fullScreenPlugin();
49+
const EnterFullScreen = fullScreenPluginInstance.EnterFullScreen.bind(
50+
fullScreenPluginInstance,
51+
);
52+
53+
useEffect(() => {pag
54+
try {
55+
const response = await fetchPaperID(params.id)
56+
// const response: AxiosResponse<PaperResponse> = await axios.get(
57+
// `/api/paper-by-id/${params.id}`,
58+
// );
59+
if(response)
60+
{
61+
setPaper(response);
62+
}
63+
} catch (err: unknown) {
64+
if (axios.isAxiosError(err)) {
65+
const errorResponse = err.response as AxiosResponse<ErrorResponse>;
66+
if (errorResponse?.status === 400 || errorResponse?.status === 404) {
67+
router.push("/");
68+
} else {
69+
setError(errorResponse?.data?.message ?? "Failed to fetch paper");
70+
}
71+
} else {
72+
throw(err)
73+
// setError("An unknown error occurred");
74+
}
75+
}
76+
};
77+
78+
if (params.id) {
79+
void fetchPaper();
80+
}
81+
}, [params.id, router]);
82+
83+
if (error) {
84+
return <div>Error: {error}</div>;
85+
}
86+
87+
if (!paper) {
88+
return <Loader prop="h-screen w-screen" />;
89+
}
90+
91+
return (
92+
<div>
93+
<Navbar />
94+
<div className="flex flex-col items-center justify-center">
95+
<h1 className="jost mb-4 text-center text-2xl font-semibold md:mb-10 md:text-3xl">
96+
{paper.subject} {paper.exam} {paper.slot} {paper.year}
97+
</h1>
98+
<div className="flex w-[95%] items-center justify-between bg-gray-900 px-4 py-4 md:w-[80%]">
99+
<div className="flex gap-x-4">
100+
<ZoomOut>
101+
{(props: RenderZoomOutProps) => (
102+
<button onClick={props.onClick}>
103+
<ZoomOutIcon />
104+
</button>
105+
)}
106+
</ZoomOut>
107+
<CurrentScale>
108+
{(props: RenderCurrentScaleProps) => (
109+
<>{`${Math.round(props.scale * 100)}%`}</>
110+
)}
111+
</CurrentScale>
112+
<ZoomIn>
113+
{(props: RenderZoomInProps) => (
114+
<button onClick={props.onClick}>
115+
<ZoomInIcon />
116+
</button>
117+
)}
118+
</ZoomIn>
119+
</div>
120+
<div className="hidden gap-x-4 md:flex md:items-center">
121+
<getFilePluginInstance.Download>
122+
{(props) => (
123+
<button className="" onClick={props.onClick}>
124+
<Download />
125+
</button>
126+
)}
127+
</getFilePluginInstance.Download>
128+
<EnterFullScreen>
129+
{(props: RenderEnterFullScreenProps) => (
130+
<button onClick={() => props.onClick()}>
131+
<Maximize />
132+
</button>
133+
)}
134+
</EnterFullScreen>
135+
</div>
136+
<Link className="flex md:hidden" href={paper.finalUrl}>
137+
<Download />
138+
</Link>
139+
</div>
140+
141+
<Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">
142+
<div className="border-1 w-[95%] overflow-x-hidden md:w-[80%]">
143+
<Viewer
144+
fileUrl={paper.finalUrl}
145+
plugins={[
146+
zoomPluginInstance,
147+
getFilePluginInstance,
148+
fullScreenPluginInstance,
149+
]}
150+
/>
151+
</div>
152+
</Worker>
153+
</div>
154+
<Footer />
155+
</div>
156+
);
157+
}

‎src/app/paper/[id]/page.tsx

Lines changed: 20 additions & 135 deletions
Original file line numberDiff line numberDiff line change
@@ -1,152 +1,37 @@
1-
"use client";
2-
import { useState, useEffect } from "react";
3-
import axios, { type AxiosResponse } from "axios";
1+
import { fetchPaperID } from "@/app/actions/get-papers-by-id";
42
import Footer from "@/components/Footer";
53
import Navbar from "@/components/Navbar";
6-
import { Download, Eye, Maximize } from "lucide-react";
7-
import { useRouter } from "next/navigation";
8-
import { Worker } from "@react-pdf-viewer/core";
9-
import { Viewer } from "@react-pdf-viewer/core";
10-
import {
11-
zoomPlugin,
12-
ZoomInIcon,
13-
ZoomOutIcon,
14-
type RenderZoomOutProps,
15-
type RenderZoomInProps,
16-
type RenderCurrentScaleProps,
17-
} from "@react-pdf-viewer/zoom";
18-
import { getFilePlugin } from "@react-pdf-viewer/get-file";
19-
20-
import {
21-
fullScreenPlugin,
22-
type RenderEnterFullScreenProps,
23-
} from "@react-pdf-viewer/full-screen";
24-
25-
import "@react-pdf-viewer/full-screen/lib/styles/index.css";
26-
import "@react-pdf-viewer/core/lib/styles/index.css";
27-
import "@react-pdf-viewer/zoom/lib/styles/index.css";
4+
import PdfViewer from "@/components/pdfViewer";
285
import Loader from "@/components/ui/loader";
29-
import Link from "next/link";
30-
import { PaperResponse } from "@/interface";
31-
32-
interface ErrorResponse {
33-
message: string;
34-
}
35-
36-
interface Params {
37-
params: { id: string };
38-
}
39-
40-
export default function PaperPage({ params }: Params) {
41-
const [paper, setPaper] = useState<PaperResponse | null>(null);
42-
const [error, setError] = useState<string | null>(null);
43-
const router = useRouter();
44-
const getFilePluginInstance = getFilePlugin();
45-
const zoomPluginInstance = zoomPlugin();
46-
const { CurrentScale, ZoomIn, ZoomOut } = zoomPluginInstance;
47-
const fullScreenPluginInstance = fullScreenPlugin();
48-
const EnterFullScreen = fullScreenPluginInstance.EnterFullScreen.bind(
49-
fullScreenPluginInstance,
50-
);
516

52-
useEffect(() => {
53-
const fetchPaper = async (): Promise<void> => {
54-
try {
55-
const response: AxiosResponse<PaperResponse> = await axios.get(
56-
`/api/paper-by-id/${params.id}`,
57-
);
58-
setPaper(response.data);
59-
} catch (err: unknown) {
60-
if (axios.isAxiosError(err)) {
61-
const errorResponse = err.response as AxiosResponse<ErrorResponse>;
62-
if (errorResponse?.status === 400 || errorResponse?.status === 404) {
63-
router.push("/");
64-
} else {
65-
setError(errorResponse?.data?.message ?? "Failed to fetch paper");
66-
}
67-
} else {
68-
setError("An unknown error occurred");
69-
}
70-
}
71-
};
72-
73-
if (params.id) {
74-
void fetchPaper();
75-
}
76-
}, [params.id, router]);
77-
78-
if (error) {
79-
return <div>Error: {error}</div>;
80-
}
7+
const PaperPage = async ({ params }: { params: { id: string } }) => {
8+
const paper = await fetchPaperID(params.id);
9+
console.log("HIII");
8110

8211
if (!paper) {
8312
return <Loader prop="h-screen w-screen" />;
8413
}
85-
8614
return (
8715
<div>
8816
<Navbar />
89-
<div className="flex flex-col items-center justify-center">
9017
<h1 className="jost mb-4 text-center text-2xl font-semibold md:mb-10 md:text-3xl">
9118
{paper.subject} {paper.exam} {paper.slot} {paper.year}
9219
</h1>
93-
<div className="flex w-[95%] items-center justify-between bg-gray-900 px-4 py-4 md:w-[80%]">
94-
<div className="flex gap-x-4">
95-
<ZoomOut>
96-
{(props: RenderZoomOutProps) => (
97-
<button onClick={props.onClick}>
98-
<ZoomOutIcon />
99-
</button>
100-
)}
101-
</ZoomOut>
102-
<CurrentScale>
103-
{(props: RenderCurrentScaleProps) => (
104-
<>{`${Math.round(props.scale * 100)}%`}</>
105-
)}
106-
</CurrentScale>
107-
<ZoomIn>
108-
{(props: RenderZoomInProps) => (
109-
<button onClick={props.onClick}>
110-
<ZoomInIcon />
111-
</button>
112-
)}
113-
</ZoomIn>
114-
</div>
115-
<div className="hidden gap-x-4 md:flex md:items-center">
116-
<getFilePluginInstance.Download>
117-
{(props) => (
118-
<button className="" onClick={props.onClick}>
119-
<Download />
120-
</button>
121-
)}
122-
</getFilePluginInstance.Download>
123-
<EnterFullScreen>
124-
{(props: RenderEnterFullScreenProps) => (
125-
<button onClick={() => props.onClick()}>
126-
<Maximize />
127-
</button>
128-
)}
129-
</EnterFullScreen>
130-
</div>
131-
<Link className="flex md:hidden" href={paper.finalUrl}>
132-
<Download />
133-
</Link>
134-
</div>
135-
136-
<Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">
137-
<div className="border-1 w-[95%] overflow-x-hidden md:w-[80%]">
138-
<Viewer
139-
fileUrl={paper.finalUrl}
140-
plugins={[
141-
zoomPluginInstance,
142-
getFilePluginInstance,
143-
fullScreenPluginInstance,
144-
]}
145-
/>
146-
</div>
147-
</Worker>
148-
</div>
20+
<center>
21+
<PdfViewer url={paper.finalUrl}></PdfViewer>
22+
</center>
14923
<Footer />
15024
</div>
15125
);
152-
}
26+
};
27+
export default PaperPage;
28+
{/* <div>
29+
<Navbar />
30+
<div className="flex flex-col items-center justify-center">
31+
<h1 className="jost mb-4 text-center text-2xl font-semibold md:mb-10 md:text-3xl">
32+
{paper.subject} {paper.exam} {paper.slot} {paper.year}
33+
</h1>
34+
<PdfViewer url={paper.finalUrl}></PdfViewer>
35+
</div>
36+
<Footer />
37+
</div> */}

0 commit comments

Comments
 (0)