Added user and search page, renamed images

eightants · Nov 15, 2020 · c736a83 · c736a83
1 parent 3ab5e2c
commit c736a83
Show file tree

Hide file tree

Showing 44 changed files with 794 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -29,3 +29,16 @@ On Reddium
 - Search Reddit through the Medium search interface (WIP)
 - Visit user profiles (WIP)
 - Login with Reddit to view your personal subscriptions in Reddium (Planned)
+
+## Contribute
+
+1. Clone the repository to your local machine. 
+2. Install all packages. 
+```
+$ npm i
+```
+3. Start the development server. 
+```
+$ npm run dev
+```
+4. Make a pull request
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -18,7 +18,7 @@ const Layout = ({ children, title }: Props) => (
           <a href="/">
             <div className="pr-4 nav-img h-8 flex flex-row items-center cursor-pointer sm:border-0">
               <img className="h-full sm:h-6" src="reddium_symbol.svg" />
-              <h1 className="ml-4 site-name text-3xl tracking-tighter sm:hidden">
+              <h1 className="ml-4 site-name text-3xl tracking-tighter sm:hidden text-black">
                 Reddium
               </h1>
             </div>

diff --git a/components/common/index.tsx b/components/common/index.tsx
@@ -1,6 +1,6 @@
 import { zipObject } from "lodash";
 import React, { useEffect, useRef, useState } from "react";
-import { getTime } from "../../functions/common";
+import { getIntFromString, getTime } from "../../functions/common";
 import {
   POPULAR_PARAM_KEY,
   POPULAR_PARAM_VALUES
@@ -74,7 +74,7 @@ export const PostMetadata = ({
   <div className={className}>
     <span>{getTime(created_utc)}</span>
     <span className="px-2">·</span>
-    <a className="link-black-hover" href={subreddit_name_prefixed}>
+    <a className="link-black-hover" href={`/${subreddit_name_prefixed}`}>
       {subreddit_name_prefixed}
     </a>
   </div>
@@ -83,6 +83,8 @@ export const PostMetadata = ({
 export const NavMenu = () => {
   const [showSearch, setShowSearch] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
+  const newSearch = () => (window.location.href = `/search/?q=${searchTerm}`);
+
   return (
     <div className="items-center flex flex-row h-full justify-end">
       <div className="flex flex-row items-center justify-end h-full">
@@ -97,6 +99,7 @@ export const NavMenu = () => {
             placeholder="Search Reddit"
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && newSearch()}
           />
         ) : (
           ""
@@ -134,3 +137,72 @@ export const NavMenu = () => {
     </div>
   );
 };
+
+export const SubredditCard = ({
+  display_name,
+  public_description,
+  url,
+  icon_img
+}: any) => (
+  <div className="pb-4 mb-4 flex flex-row w-full sub-bottom-border">
+    <a href={url}>
+      <div
+        className="rounded"
+        style={{
+          backgroundImage: `url(${
+            icon_img ? icon_img : "/placeholders/default.jpg"
+          })`,
+          width: "60px",
+          height: "60px",
+          backgroundSize: "cover"
+        }}
+      >
+        {" "}
+      </div>
+    </a>
+    <div className="pl-4 flex-grow">
+      <a className="heading-text text-lg" href={url}>
+        <h3 className="mb-1 font-normal">{display_name}</h3>
+      </a>
+      <p className="text-sm mb-1">{public_description}</p>
+    </div>
+    <a href={url}>
+      <button className="px-4 py-1 ml-5 cursor-pointer text-center rounded btn-outline-green">
+        Visit
+      </button>
+    </a>
+  </div>
+);
+
+export const UserCard = ({ name, icon_img }: any) => (
+  <div className="pb-4 mb-4 flex flex-row w-full sub-bottom-border">
+    <a href={`/user/${name}`}>
+      <div
+        className="rounded-full"
+        style={{
+          backgroundImage: `url(${
+            !icon_img.includes("styles")
+              ? icon_img
+              : "/avatars/avatar_" + getIntFromString(name, 18) + ".jpg"
+          })`,
+          width: "60px",
+          height: "60px",
+          backgroundSize: "cover"
+        }}
+      >
+        {" "}
+      </div>
+    </a>
+    <div className="pl-4 flex-grow">
+      <a className="heading-text text-lg" href={`/user/${name}`}>
+        <h3 className="mb-1 font-normal">{name}</h3>
+      </a>
+      <p className="text-sm mb-1"></p>
+    </div>
+    <a href={`/user/${name}`}>
+      <button className="px-4 py-1 ml-5 cursor-pointer text-center rounded btn-outline-green">
+        Visit
+      </button>
+    </a>
+  </div>
+);
diff --git a/components/home-page/LargeCard.tsx b/components/home-page/LargeCard.tsx
@@ -30,16 +30,18 @@ const LargeCard = (post: Post) =>
         <div
           className="rounded-full"
           style={{
-            backgroundImage: `url('/avatars/avatar (${getIntFromString(
+            backgroundImage: `url('/avatars/avatar_${getIntFromString(
               post.author,
               18
-            )}).jpg')`,
+            )}.jpg')`,
             width: "20px",
             height: "20px",
             backgroundSize: "cover"
           }}
         ></div>
-        <span className="ml-2 font-semibold">{post.author}</span>
+        <a href={`/user/${post.author}`}>
+          <span className="ml-2 font-semibold">{post.author}</span>
+        </a>
       </div>
       <a href={post.permalink}>
         <h2 className="text-2xl mt-2 leading-6">{post.title}</h2>

diff --git a/components/home-page/MidCard.tsx b/components/home-page/MidCard.tsx
@@ -19,16 +19,16 @@ const MidCard = ({
           <div
             className="rounded-full"
             style={{
-              backgroundImage: `url('/avatars/avatar (${getIntFromString(
+              backgroundImage: `url('/avatars/avatar_${getIntFromString(
                 author,
                 18
-              )}).jpg')`,
+              )}.jpg')`,
               width: "20px",
               height: "20px",
               backgroundSize: "cover"
             }}
           ></div>
-          <span className="ml-2 font-semibold">{author}</span>
+          <a href={`/user/${author}`}><span className="ml-2 font-semibold">{author}</span></a>
         </div>
         <div className="overflow-hidden">
           <a href={permalink}>

diff --git a/components/home-page/RankedCard.tsx b/components/home-page/RankedCard.tsx
@@ -23,16 +23,18 @@ const RankedCard = ({
             <div
               className="rounded-full"
               style={{
-                backgroundImage: `url('/avatars/avatar (${getIntFromString(
+                backgroundImage: `url('/avatars/avatar_${getIntFromString(
                   author,
                   18
-                )}).jpg')`,
+                )}.jpg')`,
                 width: "20px",
                 height: "20px",
                 backgroundSize: "cover"
               }}
             ></div>
-            <span className="ml-2 font-semibold">{author}</span>
+            <a href={`/user/${author}`}>
+              <span className="ml-2 font-semibold">{author}</span>
+            </a>
           </div>
           <a href={permalink}>
             <h2 className="mt-2">{title}</h2>

diff --git a/components/home-page/WideCard.tsx b/components/home-page/WideCard.tsx
@@ -20,16 +20,18 @@ const WideCard = ({
           <div
             className="rounded-full"
             style={{
-              backgroundImage: `url('/avatars/avatar (${getIntFromString(
+              backgroundImage: `url('/avatars/avatar_${getIntFromString(
                 author,
                 18
-              )}).jpg')`,
+              )}.jpg')`,
               width: "20px",
               height: "20px",
               backgroundSize: "cover"
             }}
           ></div>
-          <span className="ml-2 font-semibold">{author}</span>
+          <a href={`/user/${author}`}>
+            <span className="ml-2 font-semibold">{author}</span>
+          </a>
         </div>
         <a href={permalink}>
           <h2 className="mt-2 overflow-hidden max-h-14 leading-8 text-2xl sm:text-base sm:leading-5">

diff --git a/components/post-page/Comment.tsx b/components/post-page/Comment.tsx
@@ -41,22 +41,22 @@ export const Comment = ({
               <div
                 className="rounded-full"
                 style={{
-                  backgroundImage: `url('/avatars/avatar (${getIntFromString(
+                  backgroundImage: `url('/avatars/avatar_${getIntFromString(
                     author,
                     18
-                  )}).jpg')`,
+                  )}.jpg')`,
                   width: "32px",
                   height: "32px",
                   backgroundSize: "cover"
                 }}
               ></div>
               <div className="pl-3">
-                <Link href="/">
+                <Link href={`/user/${author}`}>
                   <span className="main-black text-md cursor-pointer sm:text-sm">
                     {author}
                   </span>
                 </Link>
-                <div className="tracking-5 text-sm sub-opacity-68">
+                <div className="tracking-5 text-sm sub-opacity-68 font-normal">
                   <span>{getTime(created_utc)}</span>
                 </div>
               </div>
@@ -65,7 +65,7 @@ export const Comment = ({
               <img className="" src="/more.svg" />
             </button>
           </div>
-          <h4 className="py-2 main-black">
+          <h4 className="py-2 font-normal main-black">
             <MarkdownView markdown={body} options={{ emoji: true }} />
           </h4>
           <div className="w-full mt-4 flex flex-row justify-start items-center">

diff --git a/components/post-page/PostContent.tsx b/components/post-page/PostContent.tsx
@@ -44,17 +44,17 @@ const PostContent = ({
         <div
           className="rounded-full"
           style={{
-            backgroundImage: `url('/avatars/avatar (${getIntFromString(
+            backgroundImage: `url('/avatars/avatar_${getIntFromString(
               author,
               18
-            )}).jpg')`,
+            )}.jpg')`,
             width: "48px",
             height: "48px",
             backgroundSize: "cover"
           }}
         ></div>
         <div className="pl-3">
-          <Link href="/">
+          <Link href={`/user/${author}`}>
             <span className="main-black text-md hover:underline cursor-pointer sm:text-sm">
               {author}
             </span>
@@ -96,8 +96,7 @@ const PostContent = ({
               ] || "default.jpg"
             })`,
             height: "300px",
-            backgroundSize: "cover",
-            backgroundPosition: "center"
+            backgroundSize: "cover"
           }}
         ></div>
       )}