Skip to content

Class to functional components #193

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NarekGermirlian merged 30 commits into from
Dec 17, 2025
Merged

Class to functional components #193

Show file tree
Hide file tree
Changes from 29 commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
5c16865
Converted class to functional component for Page in privacy.jsx
Willjianger9 Oct 30, 2025
c95e791
Converted submit
Willjianger9 Oct 30, 2025
a8e3d3d
Converted requests
Willjianger9 Oct 30, 2025
e64da5f
Community guide conversion
Willjianger9 Oct 30, 2025
b20262c
Tag pages conversion
Willjianger9 Oct 30, 2025
3ecfdd0
Sports conversion
Willjianger9 Oct 30, 2025
82a0f73
sponsored conversion
Willjianger9 Oct 30, 2025
d6a6c0d
quad conversion
Willjianger9 Oct 31, 2025
1b095ac
Convert pages/post/[slug].jsx from class to functional component
Willjianger9 Nov 13, 2025
97ec94e
Convert pages/page/[slug].jsx from class to functional component
Willjianger9 Nov 17, 2025
d7b3228
opinion conversion from class to functional
Willjianger9 Nov 17, 2025
41fd8a9
new conversion from class to functional
Willjianger9 Nov 17, 2025
796a801
arts conversion
Willjianger9 Nov 17, 2025
7d4f3ff
join conversion
Willjianger9 Nov 17, 2025
799ed7c
editorial conversion
Willjianger9 Nov 17, 2025
7aa18e8
intern desc converison
Willjianger9 Nov 17, 2025
f9456f6
comment conversion
Willjianger9 Nov 17, 2025
df12f4f
home page conversion
Willjianger9 Nov 17, 2025
e014976
infocus conversion
Willjianger9 Nov 17, 2025
88282f5
video conversion
Willjianger9 Nov 17, 2025
d6194e1
uncategorized conversion
Willjianger9 Nov 17, 2025
f2c57f8
Spectrum conversion
Willjianger9 Nov 17, 2025
aaaad31
podcasts conversion
Willjianger9 Nov 17, 2025
83db5a3
illo conversion
Willjianger9 Nov 17, 2025
916da5c
graphics conversion
Willjianger9 Nov 18, 2025
ff26655
cartoon conv
Willjianger9 Nov 18, 2025
e79732b
Rest of conversions
Willjianger9 Nov 18, 2025
e12506f
PR changes
Willjianger9 Dec 1, 2025
e8db42c
Fix
Willjianger9 Dec 1, 2025
43320e4
Merge branch 'master' into class-to-functional-components
NarekGermirlian Dec 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 13 additions & 14 deletions pages/arts.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
import PageWrapper from "../layouts/PageWrapper";
import React, { Component } from "react";
import React, { useEffect } from "react";

class Page extends Component {
render() {
// If the window isn't loaded yet, don't let it throw an error
if (typeof window === "undefined") {
<p>
Oops! We meant to redirect you to https://dailybruin.com/category/arts
</p>;
} else {
// Redirect
window.location.href = "https://dailybruin.com/category/arts-entertainment";
}
return null;
}
function Page() {
useEffect(() => {
// Redirect on client-side, runs once on mount
window.location.href = "https://dailybruin.com/category/arts-entertainment";
}, []);

// Show message during server-side rendering (before redirect happens)
return (
<p>
Oops! We meant to redirect you to https://dailybruin.com/category/arts
</p>
);
}

export default PageWrapper(Page);
83 changes: 41 additions & 42 deletions pages/author/[slug].jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,52 @@
import PageWrapper from "../../layouts/PageWrapper";
import React, { Component } from "react";
import React from "react";
import Error from "next/error";
import { Config } from "../../config.js";
import Head from "next/head";

import AuthorLayout from "../../layouts/Author";

class Author extends Component {
static async getInitialProps(context) {
const { slug } = context.query;
const authorRes = await fetch(
`${Config.apiUrl}/wp-json/wp/v2/users?slug=${slug}`
);
const author = await authorRes.json();
const postsRes = await fetch(
`${Config.apiUrl}/wp-json/wp/v2/posts?_embed&filter[author_name]=${slug}&categories_exclude=27179,27127` // 27179 is the category id of breaking feed posts
);
const posts = await postsRes.json();
const classifiedsRes = await fetch(
`${Config.apiUrl}/wp-json/wp/v2/classifieds?_embed&Featured=3`
);
const classifieds = await classifiedsRes.json();
return { author, posts, classifieds };
}
render() {
if (this.props.author == undefined || this.props.author.length == 0) {
return <Error statusCode={404} />;
}
return (
<>
<Head>
<title>{this.props.author[0].name + " - Daily Bruin"}</title>
</Head>
<AuthorLayout
author={this.props.author[0]}
posts={this.props.posts}
classifieds={this.props.classifieds.map(c => {
return {
category: {
name: c._embedded["wp:term"][1][0].name,
url: c._embedded["wp:term"][1][0].link
},
content: { name: c.content.rendered, url: c.link }
};
})}
/>
</>
);
function Author({ author, posts, classifieds }) {
if (author == undefined || author.length == 0) {
return <Error statusCode={404} />;
}
return (
<>
<Head>
<title>{author[0].name + " - Daily Bruin"}</title>
</Head>
<AuthorLayout
author={author[0]}
posts={posts}
classifieds={classifieds.map(c => {
return {
category: {
name: c._embedded["wp:term"][1][0].name,
url: c._embedded["wp:term"][1][0].link
},
content: { name: c.content.rendered, url: c.link }
};
})}
/>
</>
);
}

Author.getInitialProps = async (context) => {
const { slug } = context.query;
const authorRes = await fetch(
`${Config.apiUrl}/wp-json/wp/v2/users?slug=${slug}`
);
const author = await authorRes.json();
const postsRes = await fetch(
`${Config.apiUrl}/wp-json/wp/v2/posts?_embed&filter[author_name]=${slug}&categories_exclude=27179,27127` // 27179 is the category id of breaking feed posts
);
const posts = await postsRes.json();
const classifiedsRes = await fetch(
`${Config.apiUrl}/wp-json/wp/v2/classifieds?_embed&Featured=3`
);
const classifieds = await classifiedsRes.json();
return { author, posts, classifieds };
};

export default PageWrapper(Author);
234 changes: 116 additions & 118 deletions pages/category/[slug].jsx
View file
Open in desktop
Copy link
Collaborator

@NarekGermirlian NarekGermirlian Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can remove Component from import

Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import PageWrapper from "../../layouts/PageWrapper";
import React, { Component } from "react";
import React from "react";
import Error from "next/error";
import { Config } from "../../config.js";
import Head from "next/head";
Expand Down Expand Up @@ -46,136 +46,134 @@ const categoryMetaDescriptions = {
"Sponsored is an advertisement page managed by the Bruin Media Group. Increase visibility and traffic to your company's brand or products through the Daily Bruin website. Grow your business online with Sponsored to bring in new customers."
};

class Category extends Component {
static async getInitialProps(context) {
// slug is from url
const { slug } = context.query;
if (slug == 'breaking') {
const category = undefined
return { category }
function Category({ category, subcategories, posts, classifieds }) {
if (
category == undefined ||
category.data != undefined ||
category.length == 0
) {
return <Error statusCode={404} />;
}
const sectionLinks = subcategories.map(index => {
const subsubcategoriesSimple = index.subsubcategories.map(index => {
return { name: index.name, link: `/category/${index.slug}` };
});
return {
name: index.name,
link: `/category/${index.slug}`,
subsubcategories: subsubcategoriesSimple
};
});

// Fetch meta description from categoryMetaDescriptions
let metaDescription = null;
try {
const slug = category[0].slug;
if (categoryMetaDescriptions && categoryMetaDescriptions[slug]) {
metaDescription = categoryMetaDescriptions[slug];
}
const categoryRes = await fetch(
`${Config.apiUrl}/wp-json/wp/v2/categories?slug=${slug}`
);
const category = await categoryRes.json();
if (category.length > 0) {
const subcategoriesRes = await fetch(
`${Config.apiUrl}/wp-json/wp/v2/categories?parent=${category[0].id}&per_page=100`
);
const subcategories = await subcategoriesRes.json();
for (let i = 0; i < subcategories.length; i++) {
// const subsubcategoriesRes = await fetch(
// `${Config.apiUrl}/wp-json/wp/v2/categories?parent=${subcategories[i].id}`
// );
// subcategories[i].subsubcategories = await subsubcategoriesRes.json();
subcategories[i].subsubcategories = [];
}
} catch (e) {
metaDescription = null;
}

// Put Opinion Column Series after Opinion Columns
if (slug == "opinion") {
const columnsIndex = subcategories.findIndex(
sub => sub.slug == "opinion-columns"
);
const columnSeriesIndex = subcategories.findIndex(
sub => sub.slug == "opinion-column-series"
);
const temp = subcategories[columnsIndex];
subcategories[columnsIndex] = subcategories[columnSeriesIndex];
subcategories[columnSeriesIndex] = temp;
let pageTitle = category[0].name + " - Daily Bruin"
return (
<>
<Head>
<title>{pageTitle}</title>

if (!COLUMN_SERIES_FEATURE_FLAG) {
subcategories.pop();
}
}
<meta itemprop="name" content={pageTitle}></meta>
<meta property="og:type" content="website"></meta>
<meta property="og:title" content={pageTitle}></meta>
<meta name="twitter:title" content={pageTitle}></meta>

const postsRes = await fetch(
`${Config.apiUrl}/wp-json/wp/v2/posts?_embed&categories=${category[0].id}`
);
const posts = await postsRes.json();
{metaDescription && (
<>
<meta name="description" content={metaDescription} />
<meta itemprop="description" content={metaDescription} />
<meta property="og:description" content={metaDescription} />
<meta name="twitter:description" content={metaDescription} />
</>
)}
</Head>
<div style={{ padding: "6px" }}>
<SectionHeader
category={category[0].name}
description={categoryDescriptions[category[0].slug]}
subcategories={sectionLinks}
/>
</div>
<CategoryLayout
posts={posts}
categoryID={category[0].id}
classifieds={classifieds.map(c => {
return {
category: {
name: c._embedded["wp:term"][1][0].name,
url: c._embedded["wp:term"][1][0].link
},
content: { name: c.content.rendered, url: c.link }
};
})}
/>
</>
);
}

const classifiedsRes = await fetch(
`${Config.apiUrl}/wp-json/wp/v2/classifieds?_embed&Featured=3`
);
const classifieds = await classifiedsRes.json();
return { category, subcategories, posts, classifieds };
} else {
return { category };
}
Category.getInitialProps = async (context) => {
// slug is from url
const { slug } = context.query;
if (slug == 'breaking') {
const category = undefined
return { category }
}
render() {
if (
this.props.category == undefined ||
this.props.category.data != undefined ||
this.props.category.length == 0 ||
this.slug == 'breaking'
) {
return <Error statusCode={404} />;
const categoryRes = await fetch(
`${Config.apiUrl}/wp-json/wp/v2/categories?slug=${slug}`
);
const category = await categoryRes.json();
if (category.length > 0) {
const subcategoriesRes = await fetch(
`${Config.apiUrl}/wp-json/wp/v2/categories?parent=${category[0].id}&per_page=100`
);
const subcategories = await subcategoriesRes.json();
for (let i = 0; i < subcategories.length; i++) {
// const subsubcategoriesRes = await fetch(
// `${Config.apiUrl}/wp-json/wp/v2/categories?parent=${subcategories[i].id}`
// );
// subcategories[i].subsubcategories = await subsubcategoriesRes.json();
subcategories[i].subsubcategories = [];
}
const sectionLinks = this.props.subcategories.map(index => {
const subsubcategoriesSimple = index.subsubcategories.map(index => {
return { name: index.name, link: `/category/${index.slug}` };
});
return {
name: index.name,
link: `/category/${index.slug}`,
subsubcategories: subsubcategoriesSimple
};
});

// Fetch meta description from categoryMetaDescriptions
let metaDescription = null;
try {
const slug = this.props.category[0].slug;
if (categoryMetaDescriptions && categoryMetaDescriptions[slug]) {
metaDescription = categoryMetaDescriptions[slug];
// Put Opinion Column Series after Opinion Columns
if (slug == "opinion") {
const columnsIndex = subcategories.findIndex(
sub => sub.slug == "opinion-columns"
);
const columnSeriesIndex = subcategories.findIndex(
sub => sub.slug == "opinion-column-series"
);
const temp = subcategories[columnsIndex];
subcategories[columnsIndex] = subcategories[columnSeriesIndex];
subcategories[columnSeriesIndex] = temp;

if (!COLUMN_SERIES_FEATURE_FLAG) {
subcategories.pop();
}
} catch (e) {
metaDescription = null;
}

let pageTitle = this.props.category[0].name + " - Daily Bruin"
return (
<>
<Head>
<title>{pageTitle}</title>

<meta itemprop="name" content={pageTitle}></meta>
<meta property="og:type" content="website"></meta>
<meta property="og:title" content={pageTitle}></meta>
<meta name="twitter:title" content={pageTitle}></meta>
const postsRes = await fetch(
`${Config.apiUrl}/wp-json/wp/v2/posts?_embed&categories=${category[0].id}`
);
const posts = await postsRes.json();

{metaDescription && (
<>
<meta name="description" content={metaDescription} />
<meta itemprop="description" content={metaDescription} />
<meta property="og:description" content={metaDescription} />
<meta name="twitter:description" content={metaDescription} />
</>
)}
</Head>
<div style={{ padding: "6px" }}>
<SectionHeader
category={this.props.category[0].name}
description={categoryDescriptions[this.props.category[0].slug]}
subcategories={sectionLinks}
/>
</div>
<CategoryLayout
posts={this.props.posts}
categoryID={this.props.category[0].id}
classifieds={this.props.classifieds.map(c => {
return {
category: {
name: c._embedded["wp:term"][1][0].name,
url: c._embedded["wp:term"][1][0].link
},
content: { name: c.content.rendered, url: c.link }
};
})}
/>
</>
const classifiedsRes = await fetch(
`${Config.apiUrl}/wp-json/wp/v2/classifieds?_embed&Featured=3`
);
const classifieds = await classifiedsRes.json();
return { category, subcategories, posts, classifieds };
} else {
return { category };
}
}
};

export default PageWrapper(Category);
Loading