Added problem url in editorial page, sends problem data as props to e…

…ditorial
pes-alcoding-club · Jul 14, 2020 · a6df1fb · a6df1fb
1 parent 711f70e
commit a6df1fb
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git a/lib/problems.js b/lib/problems.js
@@ -7,7 +7,15 @@ import matter from 'gray-matter';
 const dbPath = path.join(process.cwd(), 'editorials', 'db.json');
 const editorialFilesPath = path.join(process.cwd(), 'editorials', 'problems');
 
-export async function getEditorialData(id) {	
+export function getDbData() {
+	let dbFileData = fs.readFileSync(dbPath);
+	let db = JSON.parse(dbFileData);
+	return db;
+}
+
+const db = getDbData();
+
+export async function getEditorialData(id) {
 	const reqPath = path.join(editorialFilesPath, id);
 
 	const fileNames = fs.readdirSync(reqPath); 
@@ -17,7 +25,7 @@ export async function getEditorialData(id) {
 	editorial = await remark().use(html).process(editorial.content);
 	editorial = editorial.toString();
 
-	const editorialObj = {editorial, solutions:{}};
+	const editorialObj = { editorial, solutions: {}, problemData: db[id] };
 
 	fileNames.forEach( fileName => {
 		if(fileName !== 'editorial.md'){
@@ -31,19 +39,12 @@ export async function getEditorialData(id) {
 }
 
 export function getAllProblemIds() {
-	let dbFileData = fs.readFileSync(dbPath);
-	let db = JSON.parse(dbFileData);
+	const db = getDbData();
 	return Object.keys(db).map(key => {
 		return {
 			params: {
 				id: key
 			}
 		}
 	})
-}
-
-export function getDbData() {
-	let dbFileData = fs.readFileSync(dbPath);
-	let db = JSON.parse(dbFileData);
-	return db;
 }
diff --git a/pages/problems/[id].js b/pages/problems/[id].js
@@ -43,14 +43,17 @@ export default class Editorial extends React.Component {
 
         return (
             <Layout>
+                <button type="button" className="btn btn-link editorial-link">
+                    <a href={this.props.editorialData.problemData.problem_url} target="_blank">View Problem</a>
+                </button>
                 <div className="jumbotron">
                     <div dangerouslySetInnerHTML={{ __html: this.props.editorialData.editorial }} />
                 </div>
-                <ul class="nav nav-tabs">
+                <ul className="nav nav-tabs">
                     {
                         Object.keys(this.props.editorialData.solutions).map( lang => (
-                            <li key={lang} class="nav-item" onClick={() => {this.handleLanguageChange(lang)}}>
-                                <a class={`nav-link ${lang == this.state.selectedLanguage ? 'active' : ''}`} 
+                            <li key={lang} className="nav-item" onClick={() => {this.handleLanguageChange(lang)}}>
+                                <a className={`nav-link ${lang == this.state.selectedLanguage ? 'active' : ''}`} 
                                    data-toggle="tab">
                                        { this.languages[lang] }
                                 </a>