removed styled-component

temmietope · Jan 4, 2021 · d764db0 · d764db0
1 parent e872914
commit d764db0
Show file tree

Hide file tree

Showing 6 changed files with 183 additions and 161 deletions.
diff --git a/src/components/Post.js b/src/components/Post.js
@@ -1,6 +1,7 @@
 import React from 'react'
-import { formatDate } from '../utils'
-import { Button, H3, P, PostCard, PostDate } from '../style'
+import { formatDate } from '../utils/formatDate'
+import { useMediaQuery } from '../utils/useMediaQuery'
+import PropTypes from 'prop-types'
 
 const Post = ({
   post,
@@ -16,30 +17,130 @@ const Post = ({
   buttonFontColor,
   buttonText
 }) => {
+  const mediumScreen = useMediaQuery('(max-width: 950px)')
+  const smallScreen = useMediaQuery('(max-width: 768px)')
+  const smallerScreen = useMediaQuery('(max-width: 500px)')
+
+  const validInts = [1, 2, 3, 4]
+  const styles = {
+    a: {
+      textDecoration: 'none',
+      color: 'inherit'
+    },
+
+    postCard: {
+      height: postHeight ? (smallScreen ? '100%' : postHeight) : '20rem',
+      borderRadius: '10px',
+      padding: '1.5% 2%',
+      boxSizing: 'border-box',
+      display: smallScreen ? 'flex' : 'grid',
+      flexFlow: smallScreen && 'column',
+      gridTemplateRows: '35% 10% 40% 15%',
+      marginBottom: '1rem',
+      margin: margin ? `${margin} 0` : '1% 0',
+      boxShadow: '0 0 1px 0 rgba(0,0,0,0.6)',
+      width:
+        validInts.includes(itemsPerRow) && !smallScreen
+          ? `calc(((1 / ${itemsPerRow}) * 100%) - ${margin ? margin : '1%'})`
+          : '100%'
+    },
+
+    postHeader: {
+      fontSize: headerSize
+        ? mediumScreen
+          ? '1.2rem'
+          : smallScreen
+          ? '1.25rem'
+          : smallerScreen
+          ? '1.05rem'
+          : headerSize
+        : '1.5rem',
+      color: headerColor ? headerColor : '#333',
+      maxHeight: '100%',
+      lineHeight: '110%',
+      textTransform: headerTextTransform ? headerTextTransform : 'capitalize',
+      margin: smallScreen ? '1% 0' : '0',
+      padding: '0',
+      display: '-webkit-box',
+      WebkitBoxOrient: 'vertical',
+      WebkitLineClamp: '2'
+    },
+
+    postExcerpt: {
+      fontSize: excerptSize
+        ? smallScreen
+          ? '0.95rem'
+          : smallerScreen
+          ? '0.85rem'
+          : excerptSize
+        : '1.05rem',
+      color: excerptColor ? excerptColor : '#333',
+      margin: '2% 0'
+    },
+
+    postDate: {
+      textAlign: 'right',
+      fontSize: smallerScreen ? '0.5rem' : '0.7rem',
+      margin: '0',
+      padding: '0'
+    },
+
+    postButton: {
+      cursor: 'pointer',
+      padding: smallScreen ? '1.5% 3%' : '2% 5%',
+      boxSizing: 'border-box',
+      background: buttonBgColor
+        ? buttonBgColor
+        : 'linear-gradient(225deg, rgb(38, 60, 139) 0%, rgb(6, 14, 76) 100%)',
+      color: buttonFontColor ? buttonFontColor : '#fff',
+      fontWeight: '700',
+      border: 'none',
+      outline: 'none',
+      borderRadius: '5px',
+      fontSize: smallerScreen ? '0.7rem' : '0.9rem'
+    }
+  }
   return (
-    <PostCard itemsPerRow={itemsPerRow} margin={margin} postHeight={postHeight}>
-      <H3
-        headerSize={headerSize}
-        headerColor={headerColor}
-        headerTextTransform={headerTextTransform}
-      >
-        <a href={post.canonical_url} target='_blank' rel='noopener noreferrer'>
+    <div style={styles.postCard}>
+      <h3 style={styles.postHeader}>
+        <a
+          href={post.canonical_url}
+          target='_blank'
+          rel='noopener noreferrer'
+          style={styles.a}
+        >
           {post.title}
         </a>
-      </H3>
-      <PostDate>
+      </h3>
+      <div style={styles.postDate}>
         <span>{formatDate(post.created_at)}</span>
-      </PostDate>
-      <P excerptSize={excerptSize} excerptColor={excerptColor}>
-        {post.description}
-      </P>
-      <a href={post.canonical_url} target='_blank' rel='noopener noreferrer'>
-        <Button buttonBgColor={buttonBgColor} buttonFontColor={buttonFontColor}>
-          {buttonText}
-        </Button>
+      </div>
+      <p style={styles.postExcerpt}>{post.description}</p>
+      <a
+        href={post.canonical_url}
+        target='_blank'
+        rel='noopener noreferrer'
+        style={{ width: '100%' }}
+      >
+        <button style={styles.postButton}>{buttonText}</button>
       </a>
-    </PostCard>
+    </div>
   )
 }
 
+Post.propTypes = {
+  post: PropTypes.object,
+  itemsPerRow: PropTypes.number,
+  postHeight: PropTypes.string,
+  margin: PropTypes.string,
+  headerSize: PropTypes.string,
+  headerColor: PropTypes.string,
+  headerTextTransform: PropTypes.string,
+  excerptSize: PropTypes.string,
+  excerptColor: PropTypes.string,
+  buttonBgColor: PropTypes.string,
+  buttonFontColor: PropTypes.string,
+  buttonText: PropTypes.string
+}
+
 export default Post
diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import Post from './components/Post'
-import { PostsContainer, PostsWrapper } from './style'
+import { useMediaQuery } from './utils/useMediaQuery'
 
 const ReactDevTo = ({
   username,
@@ -19,6 +19,7 @@ const ReactDevTo = ({
   errorMessage,
   loadingMessage
 }) => {
+  const smallScreen = useMediaQuery('(max-width: 768px)')
   const [posts, setPosts] = useState([])
   const [loading, setLoading] = useState(true)
   useEffect(() => {
@@ -32,12 +33,31 @@ const ReactDevTo = ({
         setLoading(false)
       })
   }, [])
+  const styles = {
+    postWrapper: {
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexWrap: 'wrap'
+    },
+    postContainer: {
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      flexDirection: smallScreen ? 'column' : 'row',
+      flexWrap: smallScreen ? 'no-wrap' : 'wrap'
+    }
+  }
+
   return (
-    <PostsWrapper>
+    <div style={styles.postWrapper}>
       {loading ? (
         <div className='loading'>{loadingMessage}</div>
       ) : !loading && posts && posts.length > 0 ? (
-        <PostsContainer>
+        <div className='container' style={styles.postContainer}>
           {posts.map((post) => {
             return (
               <Post
@@ -57,16 +77,29 @@ const ReactDevTo = ({
               />
             )
           })}
-        </PostsContainer>
+        </div>
       ) : (
         <div className='error__page'> {errorMessage} </div>
       )}
-    </PostsWrapper>
+    </div>
   )
 }
 
 ReactDevTo.propTypes = {
-  username: PropTypes.string
+  username: PropTypes.string,
+  itemsPerRow: PropTypes.number,
+  postHeight: PropTypes.string,
+  margin: PropTypes.string,
+  headerSize: PropTypes.string,
+  headerColor: PropTypes.string,
+  headerTextTransform: PropTypes.string,
+  excerptSize: PropTypes.string,
+  excerptColor: PropTypes.string,
+  buttonBgColor: PropTypes.string,
+  buttonFontColor: PropTypes.string,
+  buttonText: PropTypes.string,
+  errorMessage: PropTypes.string,
+  loadingMessage: PropTypes.string
 }
 
 export default ReactDevTo
diff --git a/src/style.js b/src/style.js
diff --git a/src/utils.js b/src/utils.js
diff --git a/src/utils/formatDate.js b/src/utils/formatDate.js
@@ -0,0 +1,4 @@
+export const formatDate = (dateString) => {
+  const options = { year: 'numeric', month: 'long', day: 'numeric' }
+  return new Date(dateString).toLocaleDateString(undefined, options)
+}