add dummy data

Author: solygambas

components/layout/MainNavigation.js

@@ -5,7 +5,9 @@ import classes from "./MainNavigation.module.css";
 function MainNavigation() {
   return (
     <header className={classes.header}>
-      <div className={classes.logo}>Meetups</div>
+      <div className={classes.logo}>
+        <Link href="/">Meetups</Link>
+      </div>
       <nav>
         <ul>
           <li>

components/layout/MainNavigation.module.css

@@ -8,10 +8,11 @@
   padding: 0 10%;
 }
 
-.logo {
+.logo a {
   font-size: 2rem;
   color: white;
   font-weight: bold;
+  text-decoration: none;
 }
 
 .header ul {
@@ -26,14 +27,14 @@
   margin-left: 3rem;
 }
 
-.header a {
+.header li a {
   text-decoration: none;
   font-size: 1.5rem;
   color: #fcb8d2;
 }
 
-.header a:hover,
-.header a:active,
-.header a.active {
+.header li a:hover,
+.header li a:active,
+.header li a.active {
   color: white;
 }

pages/[meetupId]/index.js

@@ -1,14 +1,37 @@
 import MeetupDetail from "../../components/meetups/MeetupDetail";
 
-function MeetupDetailsPage() {
+function MeetupDetailsPage(props) {
   return (
     <MeetupDetail
-      title="A First Meetup"
-      address="85 S. Edgemont Street, Crawfordsville, IN 47933"
-      description="This is a first meetup!"
-      image="https://images.unsplash.com/photo-1611095790444-1dfa35e37b52?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80"
+      title={props.meetupData.title}
+      address={props.meetupData.address}
+      description={props.meetupData.description}
+      image={props.meetupData.image}
     />
   );
 }
 
+export async function getStaticProps(context) {
+  const meetupId = context.params.meetupId;
+  return {
+    props: {
+      meetupData: {
+        id: meetupId,
+        title: "A First Meetup",
+        address: "85 S. Edgemont Street, Crawfordsville, IN 47933",
+        description: "This is a first meetup!",
+        image: "/images/m1.jpg",
+      },
+    },
+    revalidate: 3600,
+  };
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: [{ params: { meetupId: "m1" } }, { params: { meetupId: "m2" } }],
+    fallback: false,
+  };
+}
+
 export default MeetupDetailsPage;

pages/index.js

@@ -4,23 +4,42 @@ const DUMMY_MEETUPS = [
   {
     id: "m1",
     title: "A First Meetup",
-    image:
-      "https://images.unsplash.com/photo-1611095790444-1dfa35e37b52?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80",
+    image: "/images/m1.jpg",
     address: "85 S. Edgemont Street, Crawfordsville, IN 47933",
     description: "This is a first meetup!",
   },
   {
     id: "m2",
     title: "A Second Meetup",
-    image:
-      "https://images.unsplash.com/photo-1611095973015-2c65f77541e1?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80",
+    image: "/images/m2.jpg",
     address: "7718 Ann Court, Greensburg, PA 15601",
     description: "This is a second meetup!",
   },
 ];
 
-function HomePage() {
-  return <MeetupList meetups={DUMMY_MEETUPS} />;
+function HomePage(props) {
+  return <MeetupList meetups={props.meetups} />;
+}
+
+// On every request
+// export async function getServerSideProps(context) {
+//   const req = context.req;
+//   const res = context.res;
+//   return {
+//     props: {
+//       meetups: DUMMY_MEETUPS,
+//     },
+//   };
+// }
+
+// During build process
+export async function getStaticProps() {
+  return {
+    props: {
+      meetups: DUMMY_MEETUPS,
+    },
+    // revalidate: 3600,
+  };
 }
 
 export default HomePage;