Merge branch 'Issue-369-Create-play-workflow' of github.com:reactplay…

…/react-play into Issue-369-Create-play-workflow

package.json

@@ -13,9 +13,11 @@
  "@types/react-dom": "^18.0.2",
  "axios": "^0.27.2",
  "date-fns": "^2.28.0",
+ "downloadjs": "^1.4.7",
  "firebase": "^9.8.2",
  "git-repo-api": "^0.0.17",
  "graphql": "^16.5.0",
+ "html-to-image": "^1.9.0",
  "json-graphql-parser": "^0.0.16",
  "lodash": "^4.17.21",
  "node-sass": "^7.0.1",
@@ -25,6 +27,7 @@
  "react-icons": "^4.3.1",
  "react-loader-spinner": "^5.1.5",
  "react-organizational-chart": "^2.1.1",
+ "react-qr-code": "^2.0.7",
  "react-redux": "^8.0.1",
  "react-router-dom": "^6.3.0",
  "react-scripts": "5.0.0",

src/common/hooks/useGetPlays.js

@@ -5,7 +5,7 @@ import { FetchPlaysFilter } from "common/services/request/query/fetch-plays-filt
 import { FetchPlaysSimple } from "common/services/request/query/fetch-plays";
 
 import { submit } from "common/services/request";
-import { toKebabCase } from "common/services/string";
+import { toTitleCaseTrimmed } from "common/services/string";
 
 /**
  * Run graphql query to filter plays
@@ -56,6 +56,9 @@ function useGetPlays() {
  } else {
  res = await submit(FetchPlaysSimple());
  }
+ res.forEach(element => {
+ element.title_name = toTitleCaseTrimmed(element.name)
+ });
  setPlays(res);
  } catch (error) {
  setError(error);

src/common/playlists/PlayList.jsx

@@ -36,9 +36,10 @@ const PlayList = () => {
  <Fragment>
  <ol className='list-plays'>
  {plays?.map((play, index) => (
+
  <React.Fragment key={index}>
  {
- all_plays[play.component] && <PlayThumbnail key={play.id} play={play}/>
+ all_plays[play.component ? play.component : play.title_name] && <PlayThumbnail key={play.id} play={play}/>
  }
  </React.Fragment>
 

src/common/services/string.js

@@ -30,3 +30,8 @@ export const replaceAll = (str, replaceWhat, replaceTo) => {
  var re = new RegExp(replaceWhat, "g");
  return str.replace(re, replaceTo);
 };
+
+export const toTitleCaseTrimmed = (str) => {
+ const titleCse = toTitleCase(str);
+ return titleCse.replace(/\s/g, "");
+};

src/plays/qr-code-generator/QrCodeGenerator.js

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import PlayHeader from 'common/playlists/PlayHeader';
+import './styles.css';
+import QRCode from "react-qr-code";
+import * as htmlToImage from 'html-to-image';
+import download from "downloadjs";
+import { MdDonutLarge } from 'react-icons/md'
+
+function QrCodeGenerator(props) {
+
+ // Your Code Start below.
+ const [qrCodeValue, setQrCodeValue] = useState('https://reactplay.io')
+ const [loading, setLoading] = useState(false)
+
+ function handleChange(e) {
+ setQrCodeValue(e.target.value)
+ }
+
+ function handleDownload() {
+ setLoading(true)
+ htmlToImage.toJpeg(document.querySelector("#qrContain"), {
+ quality: 1
+ }).then((dataUrl) => {
+ download(dataUrl, 'qrcode.jpeg')
+ setLoading(false)
+ }).catch((err) => {
+ console.log(err)
+ setLoading(false)
+ })
+ }
+
+ return (
+ <>
+ <div className="play-details">
+ <PlayHeader play={props} />
+ <div className="play-details-body">
+ {/* Your Code Starts Here */}
+ <div className="App">
+ <div id="qrContain" style={{ backgroundColor: 'white', width: 'fit-content' }}>
+ <QRCode size={256} value={(qrCodeValue === undefined || qrCodeValue === "") ? 'https://reactplay.io' : qrCodeValue} />
+ </div>
+ <input id="qrValue" type={'text'} placeholder='Type something..' onChange={(e) => handleChange(e)} />
+ <button id="download-btn" onClick={handleDownload}>
+ Download
+ {loading ? <MdDonutLarge /> : ''}
+ </button>
+ </div>
+ {/* Your Code Ends Here */}
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default QrCodeGenerator;

src/plays/qr-code-generator/readme.md

@@ -0,0 +1,23 @@
+# QR Code Generator
+
+Generate as well as download QR codes on the go!
+
+## Play Demographic
+
+- Language: js
+- Level: Beginner
+
+## Creator Information
+
+- User: murtuzaalisurti
+- Gihub Link: [https://github.com/murtuzaalisurti](https://github.com/murtuzaalisurti)
+- Blog: null
+- Video: null
+
+## Implementation Details
+
+This QR code generator is implemented using `react-qr-code` library and the download functionality is also present!
+
+## Resources
+
+> Learn more about [react-qr-code](https://github.com/rosskhanas/react-qr-code) library on their [official documentation](https://github.com/rosskhanas/react-qr-code#readme)!

src/plays/qr-code-generator/styles.css

@@ -0,0 +1,44 @@
+/* enter stlyes here */
+.App {
+ --react-play-theme: #00f2fe;
+ --react-play-bg: #ffffffs;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+ margin-top: 5rem;
+}
+
+#qrValue,
+#download-btn {
+ border: 0.15rem solid var(--react-play-theme);
+ padding: 0.5rem 1rem;
+ background-color: var(--react-play-bg);
+ outline: none;
+ border-radius: 0.5rem;
+}
+
+#download-btn {
+ border-color: #0103262c;
+ background-color: var(--react-play-theme);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ gap: 0.7rem;
+ font-size: 1rem;
+}
+
+#download-btn svg {
+ transform: rotate(0);
+ animation: load 1s linear infinite;
+}
+
+@keyframes load {
+ 0% {
+ transform: rotate(0);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}