migrate to nextjs

Author: il3ven

.env.example

@@ -1 +1 @@
-mongourl=<your-mongodb-url>
+MONGODB_URI=<your-mongodb-url>

.gitignore

@@ -23,3 +23,5 @@ yarn-error.log*
 
 # db files
 *.db
+
+.next

api/index.js

@@ -0,0 +1,33 @@
+import { MongoClient } from "mongodb";
+
+const uri = process.env.MONGODB_URI;
+const options = {};
+
+let client;
+
+/**
+ * @type {Promise<MongoClient>}
+ */
+let clientPromise;
+
+if (!process.env.MONGODB_URI) {
+  throw new Error("Please add your Mongo URI to .env.local");
+}
+
+if (process.env.NODE_ENV === "development") {
+  // In development mode, use a global variable so that the value
+  // is preserved across module reloads caused by HMR (Hot Module Replacement).
+  if (!global._mongoClientPromise) {
+    client = new MongoClient(uri, options);
+    global._mongoClientPromise = client.connect();
+  }
+  clientPromise = global._mongoClientPromise;
+} else {
+  // In production mode, it's best to not use a global variable.
+  client = new MongoClient(uri, options);
+  clientPromise = client.connect();
+}
+
+// Export a module-scoped MongoClient promise. By doing this in a
+// separate module, the client can be shared across functions.
+export default clientPromise;

lib/mongoClient.js

@@ -15,22 +15,19 @@
     "dotenv": "^8.2.0",
     "express-simple-stats": "https://github.com/il3ven/express-simple-stats/",
     "highlight.js": "^10.5.0",
-    "mongodb": "^3.6.3",
-    "react": "^17.0.1",
+    "mongodb": "^4.3.1",
+    "next": "^12.0.8",
+    "react": "^17.0.2",
     "react-codemirror2": "^7.2.1",
     "react-collapse": "^5.1.0",
-    "react-dom": "^17.0.1",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.0",
+    "react-dom": "^17.0.2",
     "styled-components": "^5.2.1",
     "web-vitals": "^0.2.4"
   },
   "scripts": {
-    "start": "node server.js",
-    "dev": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
   },
   "proxy": "http://localhost:5000",
   "eslintConfig": {
@@ -50,5 +47,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "babel-plugin-styled-components": "^2.0.2"
   }
 }

models/paste.js

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import clientPromise from "../../lib/mongoClient";
+import base64url from 'base64url'
+import { ObjectId } from "mongodb";
+
+import Main from "../../src/main";
+import codeMirrorLanguages from "../../src/static/langauges.json";
+import { getTheme, getLangFromExt } from "../../src/utils/utils";
+import { postDump, getDump } from "../../src/api";
+
+// prettier-ignore
+const START_INPUT = `${'*'.repeat(44)}\n\n# Press Ctrl/CMD + V or Paste something here\n\n${'*'.repeat(44)}${'\n'.repeat(11)}`;
+
+function WithInputCode(props) {
+  return <Main {...props} />;
+}
+
+export const getServerSideProps = async (ctx) => {
+  console.log('getServerSideProps', new Date())
+  // get input from query
+  const { id } = ctx.query;
+  const { res } = ctx;
+
+  try {
+    const client = await clientPromise;
+    const db = client.db();
+
+    
+    const idBase64 = base64url.toBase64(id);
+    const readid = Buffer.from(idBase64, "base64").toString("hex");
+    
+    const pastesCollection = db.collection("pastes");
+    const paste = await pastesCollection.findOne({
+      _id: ObjectId(readid),
+    });
+
+    if (!paste.content) {
+      throw new Error("Paste not found");
+    }
+
+    res.setHeader(
+      "Cache-Control",
+      "max-age=31536000, s-max-age=31536000, public"
+    );
+
+    return {
+      props: {
+        input: paste.content,
+      },
+    };
+  } catch (err) {
+    console.error("Error in retrieving document", err);
+    return {
+      props: {
+        input: "Some error occured (•_•)",
+      },
+    };
+  }
+};
+
+export default WithInputCode;

package.json

@@ -0,0 +1,3 @@
+import Main from "../../src/main";
+
+export default Main;

pages/[langExt]/[id].js

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+
+import { ThemeProvider } from "styled-components";
+import { GlobalStyles } from "../src/components/globalStyles";
+import { themes } from "../src/components/themes";
+import { useDarkMode } from "../src/hooks/useDarkMode";
+import { config } from "@fortawesome/fontawesome-svg-core";
+import "@fortawesome/fontawesome-svg-core/styles.css";
+import { Collapse } from "react-collapse";
+import Welcome from "../src/components/welcome";
+import { useWelcomePref } from "../src/hooks/useWelcomePref";
+
+// config.autoAddCss = false;
+
+const App = ({ Component, pageProps, initialWelcomePref }) => {
+  const [themeKey, themeSetter] = useDarkMode();
+  const [welcomePref, setWelcomePref] = useWelcomePref(initialWelcomePref);
+  const [featureOpen, setFeatureOpen] = useState(false);
+
+  const handleTips = () => {
+    setWelcomePref(true);
+    setFeatureOpen(true);
+  };
+
+  return (
+    <ThemeProvider theme={themes[themeKey]}>
+      <GlobalStyles />
+      <Collapse isOpened={welcomePref}>
+        <Welcome
+          onClose={() => {
+            setWelcomePref(false);
+          }}
+          featureOpen={featureOpen}
+          setFeatureOpen={setFeatureOpen}
+        />
+      </Collapse>
+
+      <Component
+        themeKey={themeKey}
+        themeSetter={themeSetter}
+        handleTips={handleTips}
+        {...pageProps}
+      />
+    </ThemeProvider>
+  );
+};
+
+App.getInitialProps = async ({ ctx }) => {
+  const { req, res } = ctx;
+
+  let props = { initialWelcomePref: true };
+
+  if (req?.cookies.welcomePref) {
+    props.initialWelcomePref = req?.cookies.welcomePref === "true";
+  } else {
+    res?.setHeader("Set-Cookie", "welcomePref=true; path=/");
+  }
+
+  return props;
+};
+
+export default App;

pages/[langExt]/index.js

@@ -0,0 +1,30 @@
+import Document from 'next/document'
+import { ServerStyleSheet } from 'styled-components'
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const sheet = new ServerStyleSheet()
+    const originalRenderPage = ctx.renderPage
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        })
+
+      const initialProps = await Document.getInitialProps(ctx)
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      }
+    } finally {
+      sheet.seal()
+    }
+  }
+}