From dba85e170c3b4b67fa3e3976c190fda512136fef Mon Sep 17 00:00:00 2001 From: shrilakshmishastry Date: Sun, 17 Apr 2022 09:54:51 +0530 Subject: [PATCH 001/101] fix Clear Search and Filter when switching between plages --- src/common/home/Home.jsx | 41 +++++++++------- src/common/routing/hooks/useBackListener.js | 20 ++++++++ src/common/search/SearchPlays.jsx | 52 +++++++++++++-------- 3 files changed, 75 insertions(+), 38 deletions(-) create mode 100644 src/common/routing/hooks/useBackListener.js diff --git a/src/common/home/Home.jsx b/src/common/home/Home.jsx index 705ef4437..7107b3ec7 100644 --- a/src/common/home/Home.jsx +++ b/src/common/home/Home.jsx @@ -1,10 +1,10 @@ -import { useState, useEffect } from "react"; -import useFetch from 'common/hooks/useFetch'; +import { useState, useEffect, useContext } from "react"; +import useFetch from "common/hooks/useFetch"; import { Link } from "react-router-dom"; import "./home.css"; import { RiSlideshow4Line } from "react-icons/ri"; import { BiShareAlt, BiAddToQueue } from "react-icons/bi"; -import { BsGithub } from 'react-icons/bs'; +import { BsGithub } from "react-icons/bs"; import { FiStar } from "react-icons/fi"; import { ReactComponent as Flower } from "images/icon-flower.svg"; import { MdManageSearch } from "react-icons/md"; @@ -12,14 +12,16 @@ import { MdManageSearch } from "react-icons/md"; import FeaturedPlays from "common/playlists/FeaturedPlays"; import Contributors from "./Contributors"; +import { SearchContext } from "common/search/search-context"; const Home = () => { - const [gitHubStars, setGitHubStars] = useState('...'); - const { data } = useFetch('https://api.github.com/repos/atapas/react-play'); - + const [gitHubStars, setGitHubStars] = useState("..."); + const { data } = useFetch("https://api.github.com/repos/atapas/react-play"); + const { setSearchTerm, searchTerm } = useContext(SearchContext); useEffect(() => { setGitHubStars(data.stargazers_count); - }, [data]); + setSearchTerm(""); + }, [data, setSearchTerm, searchTerm]); return (
@@ -35,8 +37,9 @@ const Home = () => { with ReactPlay

- ReactPlay is an open-source application to learn, create and share ReactJS - projects with the developer community. Start by browsing the plays or exploring the source code. + ReactPlay is an open-source application to learn, create and share + ReactJS projects with the developer community. Start by browsing the + plays or exploring the source code.

@@ -50,7 +53,9 @@ const Home = () => { className="body-c2a-btn" > - GitHub | {gitHubStars} + + GitHub | {gitHubStars}{" "} + {/* {

Learn how to "Think in React" and build applications inspired by several plays(source code & demos). Get to the source code of it, - find related article, or even a YouTube video. Learn from the expert - code reviews. + find related article, or even a YouTube video. Learn from the + expert code reviews.

  • @@ -88,10 +93,10 @@ const Home = () => {

    • Create

    - Create your own plays and own them by following a few simple steps. - Learned something new? Perfect to present as a play. You can also - contribute to the existing plays. Your play will be reviewed by the - experts before being made public. + Create your own plays and own them by following a few simple + steps. Learned something new? Perfect to present as a play. You + can also contribute to the existing plays. Your play will be + reviewed by the experts before being made public.

  • @@ -100,8 +105,8 @@ const Home = () => {

    • Socialize

    - Share your plays with the community. The best way of building in public - is by sharing the learning. You can share your plays on + Share your plays with the community. The best way of building in + public is by sharing the learning. You can share your plays on social media platforms like Facebook, Twitter, LinkedIn, to name a few, just with a single click.

    diff --git a/src/common/routing/hooks/useBackListener.js b/src/common/routing/hooks/useBackListener.js new file mode 100644 index 000000000..bcf968843 --- /dev/null +++ b/src/common/routing/hooks/useBackListener.js @@ -0,0 +1,20 @@ +import { useContext, useEffect } from "react"; +import { UNSAFE_NavigationContext } from "react-router-dom"; + +const useBackListener = (callback) => { + const { navigator } = useContext(UNSAFE_NavigationContext); + useEffect(() => { + const listener = ({ location, action }) => { + if (action === "POP") { + callback({ location, action }); + } + if (action === "PUSH") { + callback({ location, action }); + } + }; + const unlisten = navigator.listen(listener); + return unlisten; + }, [callback, navigator]); +}; + +export default useBackListener; diff --git a/src/common/search/SearchPlays.jsx b/src/common/search/SearchPlays.jsx index f1fa642d4..b437d75e1 100644 --- a/src/common/search/SearchPlays.jsx +++ b/src/common/search/SearchPlays.jsx @@ -1,36 +1,48 @@ - -import { useContext } from 'react'; +import { useContext, useRef } from "react"; import { useLocation, useNavigate } from "react-router-dom"; -import { SearchContext } from './search-context'; -import './search.css'; +import { SearchContext } from "./search-context"; +import "./search.css"; import { BiSearch } from "react-icons/bi"; +import useBackListener from "common/routing/hooks/useBackListener"; const SearchPlays = () => { const location = useLocation(); const navigate = useNavigate(); - const {setSearchTerm} = useContext(SearchContext); - + const { setSearchTerm } = useContext(SearchContext); + const inputRef = useRef(null); + useBackListener(({ action }) => { + if (action === "POP") { + inputRef.current.value = ""; + setSearchTerm(""); + } + if (action === "PUSH") { + inputRef.current.value = ""; + setSearchTerm(""); + } + }); + const handleSearch = (event) => { event.preventDefault(); - if(event.key === 'Enter') { + if (event.key === "Enter") { setSearchTerm(event.target.value); - if(location.pathname !== '/plays') { - navigate('/plays', { replace: true}); + if (location.pathname !== "/plays") { + navigate("/plays", { replace: true }); } } - } - + }; + return ( <> -
    - - -
    +
    + + +
    ); }; From b37d05bebb6e08bb44babdf2ec1f42889dea4e59 Mon Sep 17 00:00:00 2001 From: Nirmal Kumar Date: Sun, 17 Apr 2022 14:18:53 +0530 Subject: [PATCH 002/101] adding 404 styling --- src/common/404/404.css | 42 +++++++++++++++++++++++++++++++++ src/common/404/PageNotFound.jsx | 11 +++++---- src/images/img-404.svg | 1 + 3 files changed, 50 insertions(+), 4 deletions(-) create mode 100644 src/common/404/404.css create mode 100644 src/images/img-404.svg diff --git a/src/common/404/404.css b/src/common/404/404.css new file mode 100644 index 000000000..ac212242e --- /dev/null +++ b/src/common/404/404.css @@ -0,0 +1,42 @@ +.page-404 { + padding: 2rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: calc(100vh - 120px); +} + +.page-404-image { + max-width: 100%; + height: auto; +} + +.page-404-lead { + margin: 0; + font-family: var(--ff-accent); + font-size: var(--fs-xl); + text-align: center; +} + +@media screen and (max-width: 768px) { + .page-404-lead { + line-height: var(--lh-rg); + margin-bottom: 1rem; + } +} + +.page-404-desc { + margin-top: 0; + font-size: var(--fs-md); + text-align: center; +} + +.page-404-link { + color: var(--color-brand-primary); +} + +.page-404-link:hover, +.page-404-link:focus { + color: var(--color-brand-primary-dark); +} \ No newline at end of file diff --git a/src/common/404/PageNotFound.jsx b/src/common/404/PageNotFound.jsx index 0ec201423..4a81da504 100644 --- a/src/common/404/PageNotFound.jsx +++ b/src/common/404/PageNotFound.jsx @@ -1,12 +1,15 @@ import { Link } from 'react-router-dom'; +import { ReactComponent as Image404 } from "images/img-404.svg"; +import "./404.css"; const PageNotFound = () => { return( -
    -

    OOPs!!! Look like you are lost.

    -

    - Why don't you go back to home? +

    + +

    Look like you are lost

    +

    + Why don't you go back to home?

    ); diff --git a/src/images/img-404.svg b/src/images/img-404.svg new file mode 100644 index 000000000..a6b4f5ff6 --- /dev/null +++ b/src/images/img-404.svg @@ -0,0 +1 @@ +44OOPS! \ No newline at end of file From 001824eb1cd92dd19da0d3db73a87d5799a7a3c0 Mon Sep 17 00:00:00 2001 From: Tapas Adhikary Date: Sun, 17 Apr 2022 21:39:42 +0530 Subject: [PATCH 003/101] =?UTF-8?q?=E2=9C=A8=20Basic=20form=20structure=20?= =?UTF-8?q?of=20the=20social=20card?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/meta/play-meta.js | 13 +++ src/plays/index.js | 1 + src/plays/social-card/CardDetails.jsx | 23 +++++ src/plays/social-card/CardForm.jsx | 138 ++++++++++++++++++++++++++ src/plays/social-card/SocialCard.jsx | 38 +++++++ src/plays/social-card/social-card.css | 0 6 files changed, 213 insertions(+) create mode 100644 src/plays/social-card/CardDetails.jsx create mode 100644 src/plays/social-card/CardForm.jsx create mode 100644 src/plays/social-card/SocialCard.jsx create mode 100644 src/plays/social-card/social-card.css diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js index 7b203caf3..70b5500cf 100644 --- a/src/meta/play-meta.js +++ b/src/meta/play-meta.js @@ -5,6 +5,7 @@ import { MovieContainer, WhyReact, CounterApp, +SocialCard, //import play here } from "plays"; @@ -75,6 +76,18 @@ export const plays = [ tags: 'JSX, State, Props', github: 'murtuzaalisurti', featured: true + }, { + id: 'pl-social-card', + name: 'Social Card', + description: 'The Social Card helps you telling who you are using photo, name, and other social footprints.', + component: () => {return }, + path: '/plays/social-card', + level: 'Intermediate', + tags: 'Form,Events,ComplexState', + github: 'atapas', + cover: '', + blog: '', + video: '' }, //replace new play item here ]; diff --git a/src/plays/index.js b/src/plays/index.js index 58f8326fd..03dc2a369 100644 --- a/src/plays/index.js +++ b/src/plays/index.js @@ -6,4 +6,5 @@ export { default as BasicTree } from 'plays/org-tree/BasicTree'; export { default as MovieContainer } from 'plays/movies/MovieContainer'; export { default as WhyReact } from 'plays/why-react/WhyReact'; export { default as CounterApp } from 'plays/counter/CounterApp'; +export { default as SocialCard } from 'plays/social-card/SocialCard'; //add export here diff --git a/src/plays/social-card/CardDetails.jsx b/src/plays/social-card/CardDetails.jsx new file mode 100644 index 000000000..8fa2c68a0 --- /dev/null +++ b/src/plays/social-card/CardDetails.jsx @@ -0,0 +1,23 @@ + +const CardDetails = () => { + + return ( +
    +
    +

    Card Details

    +
    +
    +
    +
    + +
    +
    + Social +
    +
    +
    +
    + ); +}; + +export default CardDetails; \ No newline at end of file diff --git a/src/plays/social-card/CardForm.jsx b/src/plays/social-card/CardForm.jsx new file mode 100644 index 000000000..e282c7f66 --- /dev/null +++ b/src/plays/social-card/CardForm.jsx @@ -0,0 +1,138 @@ + +import { useState } from 'react'; + +const CardForm = () => { + const [state, setState] = useState({ + name: "", + email: "", + photo: "", + bio: "", + website: "", + twitter: "", + linkedIn: "", + showwcase: "", + github: "" + }); + + + const handleChange = evt => { + const name = evt.target.name; + const value = + evt.target.type === "checkbox" ? evt.target.checked : evt.target.value; + setState({ + ...state, + [name]: value + }); + } + + const handleSubmit = evt => { + evt.preventDefault(); + console.log(state); + } + + return ( +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + +