Flexbox playing around

components/layout.scss

@@ -2,12 +2,12 @@
 
 .container {
   min-height: 100%;
+  padding-top: 32px;
 }
 
 :global {
   html {
     height: 100%;
-    overflow: hidden;
   }
   body {
     margin: 0;

components/title.scss

@@ -3,7 +3,6 @@
   justify-content: center;
   margin-left: 16px;
   margin-right: 16px;
-  margin-top: 32px;
 }
 
 .title {

lib/mongodb.js

@@ -24,5 +24,15 @@ export const findOne = async (collection, query) => {
   const result = await col.findOne(query);
   client.close();
 
+  return result;
+}
+
+export const findMany = async (collection, query) => {
+  const client = await MongoClient.connect(url, options);
+  const db = client.db(dbName);
+  const col = db.collection(collection);
+  const result = await col.find(query).toArray();
+  client.close();
+
   return result;
 }

next.config.js

@@ -4,6 +4,7 @@ module.exports = withSass({
   cssModules: true,
   cssLoaderOptions: {
     importLoaders: 1,
-    localIdentName: "[local]___[hash:base64:5]"
+    localIdentName: "[local]___[hash:base64:5]",
+    camelCase: true
   }
 });

pages/api/get-quotes/[username].js

@@ -1,7 +1,7 @@
 import { MongoClient } from "mongodb";
 import { dbName, url, options } from "../../../lib/mongodb";
 
-const main = async (req, res) => {
+export default async (req, res) => {
   const { username } = req.query;
 
   const client = await MongoClient.connect(url, options);
@@ -19,4 +19,3 @@ const main = async (req, res) => {
   }
 };
 
-export default main;

pages/api/get-quotes/index.js

@@ -0,0 +1,6 @@
+import { findMany } from "../../../lib/mongodb";
+
+export default async (req, res) => {
+ const quotes = await findMany("quotations", {})
+ res.json(quotes)
+};

pages/index.js

@@ -16,24 +16,37 @@ const Home = props => {
   const setTitle = useStoreActions(actions => actions.setTitle);
   setTitle("Quoke");
 
+  const { quotes } = props;
+
   return (
     <div className={css.root}>
       <Title text="/quoke" />
       <Quotation quote={props.randomQuote} />
       <hr />
+
       {/* <Info quote={props.randomQuote} /> */}
+      {/* <div className={css.quotesRoot}>
+        <div className={css.quotesContainer}>
+          {quotes &&
+            quotes.map((quote, index) => <div key={index} className={css.quoteTeaser}>{quote.text}</div>)}
+        </div>
+      </div> */}
     </div>
   );
 };
 
 Home.getInitialProps = async ({ req, query }) => {
   const { origin } = absoluteUrl(req);
 
-  const fetched = await fetch(origin + "/api/random");
-  const data = await fetched.json();
+  let fetched = await fetch(origin + "/api/random");
+  const randomQuote = await fetched.json();
+
+  fetched = await fetch(origin + "/api/get-quotes");
+  const quotes = await fetched.json();
 
   return {
-    randomQuote: data
+    randomQuote: randomQuote,
+    quotes: quotes
   };
 };
 

pages/index.scss

@@ -1,3 +1,24 @@
 .root {
 
 }
+
+.quotes-root {
+  font-size: 14px;
+  display: flex;
+  justify-content: center;
+  margin-left: 16px;
+  margin-right: 16px;
+
+}
+
+.quotes-container {
+  max-width: 590px;
+  width: 100%;
+}
+
+.quote-teaser {
+  margin-bottom: 24px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}