Skip to content

Commit

Permalink
changed file structure
Browse files Browse the repository at this point in the history
  • Loading branch information
@ayush4345
ayush4345 committed Feb 27, 2024
1 parent d5ebaed commit 1695fa3
Show file tree
Hide file tree
Showing 24 changed files with 476 additions and 409 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
"lint": "next lint",
"static": "next build && next export"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.5.1",
Expand Down
106 changes: 15 additions & 91 deletions src/app/blogs/[blogid]/page.js
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,15 @@
// Import necessary modules
"use client"
import { useEffect, useState } from "react";
import Navbar from "@/components/Navbar/Navbar";
import Footer from "@/components/footer";
import ReactMarkdown from "react-markdown";
import './styleblog.css'
// Import Tailwind CSS classes
import 'tailwindcss/tailwind.css';

// Component definition
const BlogId = ({ params }) => {
console.log(params.blogid)
// State to store the fetched data
const [blogData, setBlogData] = useState(null);

// Effect to fetch data when the component mounts
useEffect(() => {
const fetchData = async () => {
try {
// Fetch data from the API
const response = await fetch('https://tetragram.codered.cloud/api/v2/pages/?type=blog.BlogPage&fields=*');
const data = await response.json();
console.log("check", data);
// Find the blog post with the matching id
const matchingBlog = data.items.find(blog => blog?.blog_slug === params.blogid);
console.log("matchingBlog", data.items[0]);
// Update the state with the matching blog data
setBlogData(matchingBlog);
console.log("blog :", matchingBlog.blog_img_url)

} catch (error) {
console.error('Error fetching data:', error);
}
};

// Call the fetchData function
fetchData();
}, [params.blogid]); // Include params.id in the dependency array to refetch data when id changes
console.log(blogData?.blog_tags.split(","))

let inputDate = blogData?.published_on;
let dateObj = new Date(inputDate);
let day = dateObj.getDate();
let month = dateObj.toLocaleString('default', { month: 'short' });
let year = dateObj.getFullYear();

let formattedDate = `${day} ${month} ${year}`;

// Render the component
return (
<>

<div className="mt-20 pb-10 min-h-screen flex items-center justify-center">
<div className="w-full">
{blogData ? (
<div >
<section className="w-full bg-[#461461] mb-10">
<div className=" flex flex-col text-white py-6 mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg lg:pt-16">
<div className="flex flex-wrap gap-2">
{blogData?.blog_tags.split(",").map((data, index) => {
return (
<span key={index} className="px-2 py-1 bg-purple-600/40 rounded-full">{data}</span>
)
}
)}
</div>
<div className="text-xl text-white font-bold font-sans mt-4">
{blogData.title}
</div>
<div className="text-xl text-gray-300 font-thin font-sans mt-2">
{blogData.blog_description}
</div>
<div className="text-xl text-purple-200/90 font-medium font-sans mt-6 flex justify-between items-center">
<span>{blogData.blog_authors}</span><span className=" border-l-4 pl-2 border-purple-200/90">{formattedDate}</span>
</div>
</div>
</section>
<ReactMarkdown className="prose mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg text-black">{blogData.blog_body}</ReactMarkdown>
</div>
) : (
<p>Loading...</p>
)}
</div>
</div>
</>
);
};

// Export the component
export default BlogId;
import BlogId from "@/components/blog/blogDetail";

export default function BlogDetail({ params }){
return(
<BlogId params={params}/>
)
}

export async function generateStaticParams() {
const posts = await fetch('https://tetragram.codered.cloud/api/v2/pages/?type=blog.BlogPage&fields=*').then((res) => res.json())

return posts.items.map((post) => ({
blogid: post.blog_slug,
}))
}
67 changes: 5 additions & 62 deletions src/app/blogs/page.js
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,7 @@
"use client"
import React, { useEffect, useState } from 'react';
import BlogCard from './Blogcard';

const BlogList = () => {
const [blogs, setBlogs] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const blogsPerPage = 6;

useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://tetragram.codered.cloud/api/v2/pages/?type=blog.BlogPage&fields=*');
const data = await response.json();
setBlogs(data.items);
} catch (error) {
console.error('Error fetching data:', error);
}
};

fetchData();
}, []);

// Calculate the index range for the current page
const indexOfLastBlog = currentPage * blogsPerPage;
const indexOfFirstBlog = indexOfLastBlog - blogsPerPage;
const currentBlogs = blogs.slice(indexOfFirstBlog, indexOfLastBlog);

// Function to handle page change
const handlePageChange = (newPage) => {
setCurrentPage(newPage);
};
import BlogList from "@/components/blog/blogList";

export default function Blog() {
return (
<>
<div className='mt-20 min-h-[90vh]'>
<section className="w-full bg-[#461461]">
<div className=" text-4xl py-16 flex justify-center text-white mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg">
Blog
</div>
</section>
<section className='py-6 p-5 md:p-8 grid justify-items-center gap-5 grid-cols-1 md:grid-cols-2 xl:px-20 lg:grid-cols-3 2xl:grid-cols-4 auto-rows-max'>
{blogs.map((blog, index) => {
return (
<>
<BlogCard
key={index}
title={blog.blog_title}
authors={blog.blog_authors}
img={blog.blog_img_url}
description={blog.blog_description}
slug={blog.blog_slug}
date={blog.published_on}
/>
</>
)
})}
</section>
</div>
</>
);
};

export default BlogList;
<BlogList />
)
}
103 changes: 15 additions & 88 deletions src/app/events/[eventid]/page.js
View file
Original file line number Diff line number Diff line change
@@ -1,88 +1,15 @@
// Import necessary modules
"use client"
import { useEffect, useState } from "react";
import Navbar from "@/components/Navbar/Navbar";
import Footer from "@/components/footer";
import ReactMarkdown from "react-markdown";
import './styleblog.css'
// Import Tailwind CSS classes
import 'tailwindcss/tailwind.css';

// Component definition
const BlogId = ({ params }) => {
console.log(params.blogid)
// State to store the fetched data
const [eventData, setEventData] = useState(null);

// Effect to fetch data when the component mounts
useEffect(() => {
const fetchData = async () => {
try {
// Fetch data from the API
const response = await fetch('https://tetragram.codered.cloud/api/v2/pages/?type=events.EventsPage&fields=*');
const data = await response.json();
// Find the blog post with the matching id
const matchingBlog = data.items.find(blog => blog?.event_slug === params.eventid);
// Update the state with the matching blog data
setEventData(matchingBlog);

} catch (error) {
console.error('Error fetching data:', error);
}
};

// Call the fetchData function
fetchData();
}, [params.blogid]); // Include params.id in the dependency array to refetch data when id changes
console.log(eventData?.event_tags.split(","))

let inputDate = eventData?.event_date;
let dateObj = new Date(inputDate);
let day = dateObj.getDate();
let month = dateObj.toLocaleString('default', { month: 'short' });
let year = dateObj.getFullYear();

let formattedDate = `${day} ${month} ${year}`;

// Render the component
return (
<>

<div className="mt-20 pb-10 min-h-screen flex items-center justify-center">
<div className="w-full">
{eventData ? (
<div >
<section className="w-full bg-[#461461] mb-10">
<div className=" flex flex-col text-white py-6 mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg lg:pt-10">
<div className="flex flex-wrap gap-2">
{eventData?.event_tags.split(",").map((data, index) => {
return (
<span key={index} className="px-2 py-1 bg-purple-600/40 rounded-full">{data}</span>
)
}
)}
</div>
<div className="text-xl text-white font-bold font-sans mt-4">
{eventData.title}
</div>
<div className="rounded-lg overflow-hidden w-[100%] mx-auto mt-6">
<img src={eventData.event_img_url}/>
</div>
<div className="text-xl text-purple-200/90 font-medium font-sans mt-6 flex justify-between items-center">
<span>{eventData.event_organizer}</span><span className=" border-l-4 pl-2 border-purple-200/90">{formattedDate}</span>
</div>
</div>
</section>
<ReactMarkdown className="prose mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg text-black">{eventData.event_body}</ReactMarkdown>
</div>
) : (
<p>Loading...</p>
)}
</div>
</div>
</>
);
};

// Export the component
export default BlogId;
import EventId from "@/components/event/eventDetail";

export default function EventDetail({ params }){
return(
<EventId params={params}/>
)
}

export async function generateStaticParams() {
const posts = await fetch('https://tetragram.codered.cloud/api/v2/pages/?type=events.EventsPage&fields=*').then((res) => res.json())

return posts.items.map((post) => ({
eventid: post.event_slug,
}))
}
68 changes: 5 additions & 63 deletions src/app/events/page.js
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,7 @@
"use client"
import React, { useEffect, useState } from 'react';
import BlogCard from './eventCard';

const EventList = () => {
const [blogs, setBlogs] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const blogsPerPage = 6;

useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://tetragram.codered.cloud/api/v2/pages/?type=events.EventsPage&fields=*');
const data = await response.json();
setBlogs(data.items);
} catch (error) {
console.error('Error fetching data:', error);
}
};

fetchData();
}, []);

// Calculate the index range for the current page
const indexOfLastBlog = currentPage * blogsPerPage;
const indexOfFirstBlog = indexOfLastBlog - blogsPerPage;
const currentBlogs = blogs.slice(indexOfFirstBlog, indexOfLastBlog);

// Function to handle page change
const handlePageChange = (newPage) => {
setCurrentPage(newPage);
};
import EventList from "@/components/event/eventList";

export default function Event(){
return (
<>
<div className='mt-20 min-h-[90vh]'>
<section className="w-full bg-[#461461]">
<div className=" text-4xl py-16 flex justify-center text-white mx-auto w-4/5 md:max-w-full lg:max-w-screen-md 2xl:max-w-screen-lg">
Events
</div>
</section>
<section className='py-6 p-5 md:p-8 grid justify-items-center gap-5 grid-cols-1 md:grid-cols-2 xl:px-20 lg:grid-cols-3 2xl:grid-cols-4 auto-rows-max'>
{blogs.map((blog, index) => {
return (
<>
<BlogCard
key={index}
title={blog.title}
organizer={blog.event_organizer}
img="https://images.unsplash.com/photo-1549451371-64aa98a6f660?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
description="A fun-filled event to bring out the gamer in you and compete to be the best gamer out there. Register in teams of 5 or individually and showcase your gaming talent! Individual registrants will be teamed up with other individual registrants to form teams of 5."
slug={blog.event_slug}
date={blog.event_date}
location={blog.event_location}
/>
</>
)
})}
</section>
</div>
</>
);
};

export default EventList;
<EventList/>
)
}
Loading

0 comments on commit 1695fa3

Please sign in to comment.