[#2PlaysAMonth]:Github UserFinder Completed (reactplay#943)

* Fixes-Bug#903: Fixed Server break due to linting issues * [#2PlaysAMonth]:Github UserFinder Completed * [#2PlaysAMonth]:Done with asked changes * Made changes as requested * Made Styles Changes so that it doesn't overlap and override other styles. * Done with requested changes and edited play and uploaded the stackstream video. * Fix:Fixed Linting issues --------- Co-authored-by: Tapas Adhikary <[email protected]> Co-authored-by: Sachin Chaurasiya <[email protected]>
villAsh · Feb 17, 2023 · 8c241ff · 8c241ff
1 parent 135976f
commit 8c241ff
Show file tree

Hide file tree

Showing 21 changed files with 763 additions and 258 deletions.
diff --git a/src/common/badges-dashboard/badge.css b/src/common/badges-dashboard/badge.css
@@ -1,22 +1,22 @@
 .app-header-btn {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  border: solid 1px var(--color-brand-primary);
-  border-radius: 2rem;
-  grid-gap: 0.4rem;
-  padding: 0.4rem 1.2rem;
-  font-size: var(--fs-sm);
-  text-decoration: none;
-  width: unset;
-  height: unset;
-  transition: all 0.12s ease-in-out;
- }
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ border: solid 1px var(--color-brand-primary);
+ border-radius: 2rem;
+ grid-gap: 0.4rem;
+ padding: 0.4rem 1.2rem;
+ font-size: var(--fs-sm);
+ text-decoration: none;
+ width: unset;
+ height: unset;
+ transition: all 0.12s ease-in-out;
+}
 
- .app-header-btn--primary {
-  border: solid 2px var(--color-brand-primary);
-  background-color: var(--color-brand-primary);
-  color: var(--color-neutral-80);
-  grid-gap: 0.3rem;
-  margin-left: 0.4rem;
- }
+.app-header-btn--primary {
+ border: solid 2px var(--color-brand-primary);
+ background-color: var(--color-brand-primary);
+ color: var(--color-neutral-80);
+ grid-gap: 0.3rem;
+ margin-left: 0.4rem;
+}
diff --git a/src/common/playleaderboard/leaderBoard.css b/src/common/playleaderboard/leaderBoard.css
@@ -1,37 +1,39 @@
 .leaderboard-container {
- border: 0 solid black;
- border-radius: 5px;
- background-color: white;
- margin-top: 10px;
- margin-bottom: 20px;
- padding: 5px 2rem 1rem 2rem;
- --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
- --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+ border: 0 solid black;
+ border-radius: 5px;
+ background-color: white;
+ margin-top: 10px;
+ margin-bottom: 20px;
+ padding: 5px 2rem 1rem 2rem;
+ --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+ --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
+ 0 8px 10px -6px var(--tw-shadow-color);
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+ var(--tw-shadow);
 }
 
 .leaderboard-table-cell {
-  padding: 6px !important;
+ padding: 6px !important;
 }
 
 .leaderboard-table-header {
-  font-weight: 700 !important;
-  font-family: var(--ff-accent) !important;
+ font-weight: 700 !important;
+ font-family: var(--ff-accent) !important;
 }
 
 .leaderboard-heading {
-  font-family: var(--ff-accent);
-  font-size: 32px !important;
+ font-family: var(--ff-accent);
+ font-size: 32px !important;
 }
 
 .leaderboard-text {
-  font-family: var(--ff-accent) !important;
-  font-size: var(--fs-md) !important;
+ font-family: var(--ff-accent) !important;
+ font-size: var(--fs-md) !important;
 }
 
 .leaderboard-loader {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-}
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100vh;
+}
diff --git a/src/common/playlists/playlist.css b/src/common/playlists/playlist.css
@@ -778,7 +778,7 @@
  max-width: 600px;
 }
 
-.banner-button{
+.banner-button {
  margin-right: 10px;
  background-color: rgba(255, 255, 255, 0.947);
  border: none;
@@ -793,12 +793,10 @@
  align-items: center;
  gap: 4px;
 }
-.banner-button:hover{
+.banner-button:hover {
  background-color: #e6e6e6c3;
  color: black;
-
 }
 .right-arrow-icon {
- color: #25A0A7;
+ color: #25a0a7;
 }
-
diff --git a/src/common/utils/commonUtils.js b/src/common/utils/commonUtils.js
@@ -31,3 +31,14 @@ export const getProdUrl = (path) => {
 export default function countByProp(obj, key, value) {
  return obj.reduce((acc, item) => (item?.[key] === value ? ++acc : acc), 0);
 }
+
+export function formatDate(data) {
+ if (data === undefined) return '';
+ const dataarr = data.split('T')[0].split('-');
+ const day = dataarr[2];
+ const month = dataarr[1];
+ const year = dataarr[0];
+ const datemonth = Date(year, month, day).split(' ');
+
+ return `Joined ${day} ${datemonth[1]} ${year}`;
+}
diff --git a/src/plays/dad-jokes/Readme.md b/src/plays/dad-jokes/Readme.md
@@ -13,14 +13,14 @@
 
 ## Play Screenshot
 
-- ### **Light Mode** 
+- ### **Light Mode**
 
 <div align="center">
  <img src="https://i.postimg.cc/0N2n74Bf/light-mode.png" alt="Dad Jokes Screenshot" width="100%" target="_blank" />
  <br>
 </div>
 
-- ### **Dark Mode** 
+- ### **Dark Mode**
 <div align="center">
  <img src="https://i.postimg.cc/3JXFV7M1/dark-mode.png" alt="Dad Jokes Screenshot" width="100%" target="_blank" />
  <br>
@@ -33,7 +33,7 @@
 
 ## Creator Information
 
-- ### **Bobby Sadhwani** - **[Linkedin](https://www.linkedin.com/in/bobby-sadhwani)**, **[Twitter](https://twitter.com/BOBBY__SADHWANI)**, **[Github](https://github.com/Bobby-coder)**, **[Portfolio](https://bobby-sadhwani.netlify.app)** 
+- ### **Bobby Sadhwani** - **[Linkedin](https://www.linkedin.com/in/bobby-sadhwani)**, **[Twitter](https://twitter.com/BOBBY__SADHWANI)**, **[Github](https://github.com/Bobby-coder)**, **[Portfolio](https://bobby-sadhwani.netlify.app)**
 
 ## Video
 
@@ -45,8 +45,3 @@
 - ### **[React Icons](https://react-icons.github.io/react-icons/)**
 
 ### **Happy Coding!** 🤩
-
-
-
-
-
diff --git a/src/plays/dad-jokes/components/jokeList/jokeList.css b/src/plays/dad-jokes/components/jokeList/jokeList.css
@@ -17,7 +17,7 @@
  z-index: 2;
 }
 
-.dad-jokes-play .dark .jokelist-sidebar{
+.dad-jokes-play .dark .jokelist-sidebar {
  background-color: #eee;
 }
 
@@ -35,7 +35,7 @@
  letter-spacing: 0;
 }
 
-.dad-jokes-play .dark .jokelist-sidebar-title h1{
+.dad-jokes-play .dark .jokelist-sidebar-title h1 {
  color: #0d0d0d;
 }
 
@@ -73,7 +73,7 @@
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
 }
 
-.dad-jokes-play .dark .jokelist-sidebar-getmore button{
+.dad-jokes-play .dark .jokelist-sidebar-getmore button {
  color: #eee;
  background-color: #0d0d0d;
 }
@@ -88,7 +88,7 @@
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.1);
 }
 
-.dad-jokes-play .dark .jokelist-jokes{
+.dad-jokes-play .dark .jokelist-jokes {
  background-color: #0d0d0d;
 }
 

diff --git a/src/plays/github-user-finder/GithubUserFinder.js b/src/plays/github-user-finder/GithubUserFinder.js
@@ -0,0 +1,31 @@
+import PlayHeader from 'common/playlists/PlayHeader';
+import InputCard from './components/InputCard';
+import ProfileCard from './components/ProfileCard';
+import { ResultContextProvider } from './context/ResultContext';
+import './styles.css';
+
+// WARNING: Do not change the entry componenet name
+function GithubUserFinder(props) {
+ // Your Code Start below.
+
+ return (
+ <>
+ <div className="play-details">
+ <PlayHeader play={props} />
+ <div className="play-details-body">
+ {/* Your Code Starts Here */}
+ <ResultContextProvider>
+ <div className="flex justify-center flex-col p-8 m-8 App guf">
+ <InputCard />
+ <ProfileCard />
+ </div>
+ </ResultContextProvider>
+
+ {/* Your Code Ends Here */}
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default GithubUserFinder;
diff --git a/src/plays/github-user-finder/Readme.md b/src/plays/github-user-finder/Readme.md
@@ -0,0 +1,31 @@
+# Github User Finder
+
+So user will be asked to input a valid github username and user data will be shown in a card component.
+
+## Play Demographic
+
+- Language: js
+- Level: Intermediate
+
+## Creator Information
+
+- User: ANKIT9761
+- Gihub Link: https://github.com/ANKIT9761
+- Blog:
+- Video:
+
+## Implementation Details
+
+So basically this could be done in normal js much faster i guess due to no major reusable components in this.But for this splitting logic between components and way to communicate and manage state between two childrens is hectic.
+So usecontext api is used for global state management.
+Then an Api client is required to fetch the user data from github api so i have used axios or this.
+Then it is just how you present the data.
+
+## Consideration
+
+Although i wanna do the repo part also one thing i noticed when batching 2 updates on find button as 2 calls are made to change so component rerenders 2 time.
+Maybe we can add another button later saying fetch repos and then it will make a call later.
+
+## Resources
+
+[GitHub Search API](https://docs.github.com/en/rest/search)