From d764db093a7930fcdb97a2690a2099797c505dc5 Mon Sep 17 00:00:00 2001 From: temmietope Date: Mon, 4 Jan 2021 16:16:26 +0100 Subject: [PATCH] removed styled-component --- src/components/Post.js | 141 +++++++++++++++++++++++++++++++------ src/index.js | 45 ++++++++++-- src/style.js | 130 ---------------------------------- src/utils.js | 5 -- src/utils/formatDate.js | 4 ++ src/utils/useMediaQuery.js | 19 +++++ 6 files changed, 183 insertions(+), 161 deletions(-) delete mode 100644 src/style.js delete mode 100644 src/utils.js create mode 100644 src/utils/formatDate.js create mode 100644 src/utils/useMediaQuery.js diff --git a/src/components/Post.js b/src/components/Post.js index ca578a1..25df6e7 100644 --- 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 ( - -

- +
+

+ {post.title} -

- +

+
{formatDate(post.created_at)} - -

- {post.description} -

- - +
+

{post.description}

+ + - + ) } +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 index 2a0ba92..1fb10c4 100644 --- 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 ( - +
{loading ? (
{loadingMessage}
) : !loading && posts && posts.length > 0 ? ( - +
{posts.map((post) => { return ( ) })} - +
) : (
{errorMessage}
)} - +
) } 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 deleted file mode 100644 index 163a9e9..0000000 --- a/src/style.js +++ /dev/null @@ -1,130 +0,0 @@ -import styled, { css } from 'styled-components' - -export const PostsWrapper = styled.div` - width: 100%; - display: flex; - justify-content: center; - align-items: center; - flex-wrap: wrap; -` - -export const PostsContainer = styled.div` - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; - @media screen and (max-width: 768px) { - flex-flow: column; - flex-wrap: no-wrap; - } -` - -export const PostCard = styled.div` - height: ${(props) => (props.postHeight ? props.postHeight : '20rem')}; - border-radius: 10px; - padding: 1.5% 2%; - box-sizing: border-box; - display: grid; - grid-template-rows: 35% 10% 40% 15%; - margin-bottom: 1rem; - width: 100%; - margin: ${(props) => (props.margin ? `${props.margin} 0` : '1% 0')}; - ${(props) => { - const validInts = [1, 2, 3, 4] - return ( - validInts.includes(props.itemsPerRow) && - css` - width: calc( - ((1 / ${props.itemsPerRow}) * 100%) - - ${props.margin ? props.margin : '1%'} - ); - ` - ) - }} - box-shadow: 0 0 1px 0 rgba(0,0,0,0.6); - a { - text-decoration: none; - color: inherit; - } - @media screen and (max-width: 900px) { - height: ${(props) => (props.postHeight ? props.postHeight : '20rem')}; - } - @media screen and (max-width: 768px) { - width: 100%; - display: flex; - flex-flow: column; - height: 100%; - } -` - -export const H3 = styled.h3` - font-size: ${(props) => (props.headerSize ? props.headerSize : '1.5rem')}; - max-height: 100%; - line-height: 110%; - text-transform: ${(props) => - props.headerTextTransform ? props.headerTextTransform : 'capitalize'}; - margin: 0; - padding: 0; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - color: ${(props) => (props.headerColor ? props.headerColor : '#333')}; - a:hover { - text-decoration: underline; - } - @media screen and (max-width: 768px) { - font-size: 1.25rem; - margin: 1% 0; - } - @media screen and (max-width: 500px) { - font-size: 1.05rem; - } -` - -export const P = styled.p` - font-size: ${(props) => (props.excerptSize ? props.excerptSize : '1.05rem')}; - color: ${(props) => (props.excerptColor ? props.excerptColor : '#333')}; - margin: 2% 0; - @media screen and (max-width: 768px) { - font-size: 0.95rem; - } - @media screen and (max-width: 500px) { - font-size: 0.85rem; - } -` - -export const PostDate = styled.div` - text-align: right; - font-size: 0.7rem; - margin: 0; - padding: 0; - @media screen and (max-width: 500px) { - font-size: 0.5rem; - } -` - -export const Button = styled.button` - cursor: pointer; - padding: 2% 5%; - box-sizing: border-box; - background: ${(props) => - props.buttonBgColor - ? props.buttonBgColor - : 'linear-gradient(225deg, rgb(38, 60, 139) 0%, rgb(6, 14, 76) 100%);'}; - color: ${(props) => (props.buttonFontColor ? props.buttonFontColor : '#fff')}; - font-weight: 700; - border: none; - outline: none; - border-radius: 5px; - a { - width: 100%; - } - @media screen and (max-width: 768px) { - padding: 1.5% 3%; - } - @media screen and (max-width: 768px) { - font-size: 0.7rem; - } -` diff --git a/src/utils.js b/src/utils.js deleted file mode 100644 index d0ed334..0000000 --- a/src/utils.js +++ /dev/null @@ -1,5 +0,0 @@ -export const formatDate = (dateString) => { - const options = { year: 'numeric', month: 'long', day: 'numeric' } - return new Date(dateString).toLocaleDateString(undefined, options) - } - \ No newline at end of file diff --git a/src/utils/formatDate.js b/src/utils/formatDate.js new file mode 100644 index 0000000..4023e30 --- /dev/null +++ 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) +} diff --git a/src/utils/useMediaQuery.js b/src/utils/useMediaQuery.js new file mode 100644 index 0000000..3e75f7f --- /dev/null +++ b/src/utils/useMediaQuery.js @@ -0,0 +1,19 @@ +import { useState, useEffect } from 'react' + +export function useMediaQuery(query) { + const [matches, setMatches] = useState(false) + + useEffect(() => { + const media = window.matchMedia(query) + if (media.matches !== matches) { + setMatches(media.matches) + } + const listener = () => { + setMatches(media.matches) + } + media.addListener(listener) + return () => media.removeListener(listener) + }, [matches, query]) + + return matches +}