Merge branch 'master' into feature/update-styles

.github/issue_template.md

@@ -0,0 +1,18 @@
+
+## Issue Description
+[Provide a brief description of the issue]
+
+## Steps to Reproduce
+[Outline the steps required to reproduce the issue]
+
+## Expected Behavior
+[Describe what you expected to happen]
+
+## Actual Behavior
+[Describe what actually happened]
+
+## Screenshots
+[Include any relevant screenshots]
+
+
+

.github/pull_request_template.md

@@ -0,0 +1,30 @@
+# Fixes Issue🛠️
+
+<!-- Example: Closes #31 -->
+
+Closes #
+
+# Description👨‍💻
+
+<!--Please include a summary of the change and which issue is fixed.List any dependencies that are required for this change.-->
+
+# Type of change📄
+
+<!--Please delete options that are not relevant.-->
+
+- [] Bug fix (non-breaking change which fixes an issue)
+- [] New feature (non-breaking change which adds functionality)
+
+# How this has been tested✅
+
+<!--Please describe the tests that you ran to verify your changes.-->
+
+# Checklist✅
+
+- [] My code follows the style guidelines of this project
+- [] I have performed a self-review of my own code
+- [] I have commented my code, particularly in hard-to-understand areas
+- [] I have added demonstration in the form of GIF/video file
+- [] I am an Open Source Contributor
+
+# Screenshots/GIF📷

.github/workflows/greetings.yml

@@ -0,0 +1,16 @@
+name: Greetings
+
+on: [pull_request_target, issues]
+
+jobs:
+  greeting:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    steps:
+    - uses: actions/first-interaction@v1
+      with:
+        repo-token: ${{ secrets.GITHUB_TOKEN }}
+        issue-message: "Welcome to Capabilix repository.🎊 Thank you so much for taking the time to point this out."
+        pr-message: "Welcome to Capabilix repository.🎊 Thank you so much for taking the time to point this out."

package.json

@@ -12,6 +12,7 @@
     "react-router-dom": "^6.20.0",
     "react-scripts": "5.0.1",
     "react-twitter-embed": "^4.0.4",
+    "react-web-share": "^2.0.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/Dashboard.js

@@ -1,17 +1,19 @@
-import React from 'react'
-import Sidebar from './Sidebar';
-import Feed from './Feed';
-import Widgets from './Widgets';
-import './Dashboard.css';
+import React, { useState } from "react";
+import Sidebar from "./Sidebar";
+import Feed from "./Feed";
+import Widgets from "./Widgets";
+import "./Dashboard.css";
 // import './App.css';
 
-
 const Home = () => {
+  const [searchQuery, setSearchQuery] = useState("");
   return (
     <div className="app">
-      <Sidebar /> <Feed /> <Widgets />
+      <Sidebar /> 
+      <Feed searchQuery={searchQuery} />
+      <Widgets searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;

src/Feed.js

@@ -4,14 +4,15 @@ import TweetBox from './TweetBox';
 import Post from './Post';
 import { db } from './firebase';
 
-const Feed = () => {
+const Feed = ({ searchQuery }) => {
   const [posts, setPosts] = useState([]);
+  const [allPosts, setAllPosts] = useState([]);
   const [showGoToTop, setShowGoToTop] = useState(false);
   const feedRef = useRef(null);
 
   useEffect(() => {
     db.collection('posts').onSnapshot(snapshot => (
-      setPosts(snapshot.docs.map(doc => doc.data()))
+      setAllPosts(snapshot.docs.map(doc => doc.data()))
     ));
 
     const handleScroll = () => {
@@ -29,6 +30,15 @@ const Feed = () => {
     };
   }, []);
 
+  useEffect(() => {
+    if (searchQuery !== null) {
+      const filteredPosts = allPosts.filter(post =>
+        post.text.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+      setPosts(filteredPosts);
+    }
+  }, [searchQuery, allPosts]);
+
   const handleScrollToTop = () => {
     feedRef.current.scrollTo({ top: 0, behavior: 'smooth' });
   };
@@ -37,11 +47,14 @@ const Feed = () => {
     <div className='feed' ref={feedRef}>
       {/* Header */}
       <div className="feed_header">
-        <h2 className='dec-h' style={{ marginLeft: "70px" }}>Embrace your strength, defy the odds!!. You're unstoppable</h2>
+        <h2 className='dec-h' style={{ marginLeft: "70px" }}>
+          Embrace your strength, defy the odds!!. You're unstoppable
+        </h2>
       </div>
       {/* Tweet Box */}
       <TweetBox />
 
+      {/* Posts */}
       {posts.map(post => (
         <Post
           displayName={post.displayName}
@@ -55,11 +68,9 @@ const Feed = () => {
 
       {/* Go to Top Button */}
       {showGoToTop && <button className="go-to-top" onClick={handleScrollToTop}>&#8593;</button>}
-
-      {/* Posts */}
-      {/* <Post displayName="Sonny Sangha" username="ssssangha" verified={true} text="Yes it's working" avatar="https://static.vecteezy.com/system/resources/previews/002/002/257/non_2x/beautiful-woman-avatar-character-icon-free-vector.jpg" image="https://arts.giphy.com/wp-content/uploads/2017/11/giphy-14.gif"/> */}
     </div>
   );
-}
+};
 
 export default Feed;
+

src/Post.js

@@ -1,6 +1,7 @@
-import React from 'react'
-import './Post.css'
-import GoToTopButton from './GoToTopButton'; 
+import React from 'react';
+import './Post.css';
+import { RWebShare } from "react-web-share";
+import GoToTopButton from './GoToTopButton';
 const Post = ({displayName, userName, verified, text, image, avatar,location}) => {
     return (
         <div className='post'>
@@ -23,7 +24,18 @@ const Post = ({displayName, userName, verified, text, image, avatar,location}) =
                 <div className="post_footer">
                     <img width={'30px'} src="data:image/png;base64,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" alt="" />
                     <img width={'30px'} src="https://static.vecteezy.com/system/resources/thumbnails/000/284/988/small/a19.jpg" alt="" />
+                    <RWebShare
+                    data={{
+                        text: "Share Post",
+                        url: "https://mytwit.vercel.app/",
+                        title: "Capabilix",
+                    }}
+                    onClick={() =>
+                        console.log("shared successfully!")
+                    }
+                >
                     <img width={'30px'} src="https://static.vecteezy.com/system/resources/previews/014/455/886/original/share-icon-on-transparent-background-free-png.png" alt="" />
+                </RWebShare>
                     <img width={'30px'} src="https://cdn-icons-png.flaticon.com/512/786/786352.png" alt="" />
 
                 </div>

src/Widgets.css

@@ -6,19 +6,39 @@
 
 .widgets__input {
   display: flex;
+  width: 350px;
   align-items: center;
   background-color: var(--twit-background);
-  padding: 10px;
+  height: 40px;
   border-radius: 20px;
   margin-top: 10px;
   margin-left: 20px;
 }
 
+.widgets_search_icon {
+  position: absolute; margin-left: 10px;
+}
+
+.widgets_search_icon:hover {
+  cursor: pointer;
+}
+
 .widgets__input>input {
-  border: none;
+  border: none; 
+  padding: 10px 45px; 
+  font-size: 1em;
+  width: 100%;
+  height: 100%;
+  border-radius: 20px;
   background-color: var(--twit-background);
 }
 
+.widgets__input>input:focus-within{
+  outline: 1px solid rgba(0, 0, 0, 0.1);
+  /* outline: none; */
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
+}
+
 /*   
   .widgets_search_icon {
     color: gray;

src/Widgets.js

@@ -1,13 +1,18 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import './Widgets.css'
 import { TwitterTimelineEmbed, TwitterShareButton,TwitterTweetEmbed } from 'react-twitter-embed'
-const Widgets = () => {
+const Widgets = ({searchQuery, setSearchQuery}) => {
+  const inputRef = useRef(null);
+
+  const handleSearchQueryChange = (e) => {
+    setSearchQuery(e.target.value);
+  }
+
   return (
     <div className="widgets">
     <div className="widgets__input">
-      {/* <SearchIcon className="widgets__searchIcon" /> */}
-      <img className='widgets_search_icon' width={'25px'} src={'https://cdn3.iconfinder.com/data/icons/feather-5/24/search-512.png'} alt="" />
-      <input placeholder="Search" type="text" />
+      <img className='widgets_search_icon' width={'25px'} src={'https://cdn3.iconfinder.com/data/icons/feather-5/24/search-512.png'} alt="" onClick={() => inputRef.current.focus()} />
+      <input placeholder="Search" type="text" value={searchQuery} onChange={handleSearchQueryChange} ref={inputRef} />
     </div>
 
     <div className="widgets__widgetContainer">