Merge pull request #105 from GauravWalia19/searchSection

Completed the basic Search section for mobile

Author: GauravWalia19

package.json

@@ -16,11 +16,11 @@
     "devDependencies": {
         "@types/react": "^18.2.15",
         "@types/react-dom": "^18.2.7",
-        "@vitejs/plugin-react-swc": "^3.3.2",
+        "@vitejs/plugin-react-swc": "^3.7.1",
         "eslint": "^8.45.0",
         "eslint-plugin-react": "^7.32.2",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.3",
-        "vite": "^4.4.5"
+        "vite": "^5.4.8"
     }
 }

src/components/App/App.jsx

@@ -4,6 +4,7 @@ import './App.css';
 import RatingPopupHandler from '../RatingPopup';
 import ToastMessagesContainer from '../ToastMessages';
 import { useAppReducer } from '../hooks/useAppReducer.js';
+import SearchSectionContainer from '../SearchSection';
 
 function App() {
     const [state, appDispatch] = useAppReducer();
@@ -20,6 +21,7 @@ function App() {
                 toastMessages={state.toastMessages}
                 appDispatch={appDispatch}
             />
+            <SearchSectionContainer accessToken={state.accessToken} />
         </>
     );
 }

src/components/RatingPopup/RatingPopupContainer.jsx

@@ -11,25 +11,41 @@ import {
     SET_ACCESS_TOKEN,
 } from '../hooks/useAppReducer.js';
 import { useRatingPopupReducer } from '../hooks/useRatingPopupReducer.js';
+import {
+    SET_RANDOM_CODES,
+    STOP_IS_LOADING_FOR_RANDOM_CODES,
+} from '../hooks/useRatingPopupReducer.js';
 
 const RatingPopupContainer = ({ appDispatch }) => {
     const [state, ratingPopupDispatch] = useRatingPopupReducer();
     useWindowWidth(state.innerWidth, ratingPopupDispatch);
-    const { callRandomCodesAPI } = useRandomCodesAPI(ratingPopupDispatch);
+    const { callRandomCodesAPI } = useRandomCodesAPI();
 
     console.log('ratingpopup container rendered');
 
     useEffect(() => {
-        const response = callRandomCodesAPI();
-        if (response && response.status == 200) {
-            appDispatch({
-                type: SET_ACCESS_TOKEN,
+        const callRandomCodesAPIAndDispatchActions = async () => {
+            const response = await callRandomCodesAPI();
+            if (response && response.status == 200) {
+                appDispatch({
+                    type: SET_ACCESS_TOKEN,
+                    payload: {
+                        accessToken: response['accessToken'],
+                    },
+                });
+            }
+            ratingPopupDispatch({
+                type: SET_RANDOM_CODES,
                 payload: {
-                    accessToken: response['accessToken'],
+                    randomCodesResponse: response,
                 },
             });
-        }
-    }, [appDispatch, callRandomCodesAPI]);
+            ratingPopupDispatch({
+                type: STOP_IS_LOADING_FOR_RANDOM_CODES,
+            });
+        };
+        callRandomCodesAPIAndDispatchActions();
+    }, [appDispatch, callRandomCodesAPI, ratingPopupDispatch]);
 
     const callRateCodeAPI = useCallback(async (payload) => {
         try {

src/components/SearchSection/ContributionGuidelines/ContributionGuidelines.jsx

@@ -0,0 +1,21 @@
+import styles from './ContributionGuidelines.module.css';
+
+const ContributionGuidelines = () => {
+    return (
+        <div>
+            <a
+                href="https://github.com/TECHOUS/codemash/blob/master/.github/CONTRIBUTING.md"
+                target="_blank"
+                rel="noreferrer"
+                className={styles.link}
+            >
+                <i
+                    className={`fa-solid fa-up-right-from-square ${styles.icon}`}
+                ></i>{' '}
+                Contribution Guidelines
+            </a>
+        </div>
+    );
+};
+
+export default ContributionGuidelines;

src/components/SearchSection/ContributionGuidelines/ContributionGuidelines.module.css

@@ -0,0 +1,10 @@
+.link,
+.link:visited,
+.link:active {
+    text-decoration: none;
+    color: var(--void);
+}
+
+.icon {
+    color: var(--psybeam) !important;
+}

src/components/SearchSection/ContributionGuidelines/ContributionGuidelinesContainer.jsx

@@ -0,0 +1,13 @@
+import ContributionGuidelines from './ContributionGuidelines.jsx';
+import styles from './ContributionGuidelinesContainer.module.css';
+
+const ContributionGuidelinesContainer = () => {
+    return (
+        <div className={styles.contributionGuidelinesContainer}>
+            All the Contributions are welcome, you can check our{' '}
+            <ContributionGuidelines />
+        </div>
+    );
+};
+
+export default ContributionGuidelinesContainer;

src/components/SearchSection/ContributionGuidelines/ContributionGuidelinesContainer.module.css

@@ -0,0 +1,5 @@
+.contributionGuidelinesContainer {
+    font-size: 18px;
+    text-align: center;
+    padding: 60px 0px 10px 0px;
+}

src/components/SearchSection/ContributionGuidelines/index.js

@@ -0,0 +1 @@
+export { default } from './ContributionGuidelinesContainer.jsx';

src/components/SearchSection/ResponseCards/ResponseCard/CardContent/CardContent.jsx

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+import styles from './CardContent.module.css';
+
+const CardContent = ({ codeRating, codeName }) => {
+    return (
+        <div className={styles.cardContent}>
+            <h2 className={styles.codeRating}>{codeRating}</h2>
+            <h3 className={styles.codeName}>{codeName}</h3>
+        </div>
+    );
+};
+
+CardContent.propTypes = {
+    codeRating: PropTypes.number,
+    codeName: PropTypes.string,
+};
+
+export default CardContent;

src/components/SearchSection/ResponseCards/ResponseCard/CardContent/CardContent.module.css

@@ -0,0 +1,15 @@
+.cardContent {
+    flex: 1;
+    overflow: hidden;
+}
+
+.codeRating {
+    font-weight: 500;
+    padding: 16px 0px 0px 0px;
+}
+
+.codeName {
+    font-weight: 500;
+    padding: 5px 0px 16px 0px;
+    word-wrap: break-word;
+}

src/components/SearchSection/ResponseCards/ResponseCard/CardContent/index.js

@@ -0,0 +1 @@
+export { default } from './CardContent.jsx';

src/components/SearchSection/ResponseCards/ResponseCard/ResponseCard.jsx

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import ScoreImoji from '../../ScoreImoji';
+import CardContent from './CardContent';
+import styles from './ResponseCard.module.css';
+
+const ResponseCard = ({ userCodeBaseFile, searchSectionDispatch }) => {
+    return (
+        <div className={styles.responseCard}>
+            <ScoreImoji
+                codeRating={userCodeBaseFile.codeRating}
+                searchSectionDispatch={searchSectionDispatch}
+                size="fa-3x"
+            />
+            <CardContent
+                codeRating={userCodeBaseFile.codeRating}
+                codeName={userCodeBaseFile.codeName}
+            />
+        </div>
+    );
+};
+
+ResponseCard.propTypes = {
+    userCodeBaseFile: PropTypes.object,
+    searchSectionDispatch: PropTypes.func,
+};
+
+export default ResponseCard;

src/components/SearchSection/ResponseCards/ResponseCard/ResponseCard.module.css

@@ -0,0 +1,7 @@
+.responseCard {
+    background-color: var(--giga);
+    margin: 10px auto;
+    border-radius: 10px;
+    display: flex;
+    width: 95%;
+}

src/components/SearchSection/ResponseCards/ResponseCards.jsx

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import ResponseCard from './ResponseCard/ResponseCard.jsx';
+
+const ResponseCards = ({ userCodeBaseFiles, searchSectionDispatch }) => {
+    return userCodeBaseFiles.map((userCodeBaseFile) => (
+        <ResponseCard
+            key={userCodeBaseFile.codeId}
+            userCodeBaseFile={userCodeBaseFile}
+            searchSectionDispatch={searchSectionDispatch}
+        />
+    ));
+};
+
+ResponseCards.propTypes = {
+    userCodeBaseFiles: PropTypes.array,
+    searchSectionDispatch: PropTypes.func,
+};
+
+export default ResponseCards;

src/components/SearchSection/ResponseCards/ResponseCardsContainer.jsx

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import ResponseCards from './ResponseCards.jsx';
+
+const ResponseCardsContainer = ({
+    userCodeBaseFiles,
+    searchSectionDispatch,
+}) => {
+    return (
+        <div>
+            <ResponseCards
+                userCodeBaseFiles={userCodeBaseFiles}
+                searchSectionDispatch={searchSectionDispatch}
+            />
+        </div>
+    );
+};
+
+ResponseCardsContainer.propTypes = {
+    userCodeBaseFiles: PropTypes.array,
+    searchSectionDispatch: PropTypes.func,
+};
+
+export default ResponseCardsContainer;

src/components/SearchSection/ResponseCards/index.js

@@ -0,0 +1 @@
+export { default } from './ResponseCardsContainer.jsx';

src/components/SearchSection/ResponseHandler/ResponseHandler.jsx

@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import DotSpinner from '../../DotSpinner';
+import ErrorMessage from '../../ErrorMessage';
+import ResponseCards from '../ResponseCards';
+import styles from './ResponseHandler.module.css';
+
+const ResponseHandler = ({ state, searchSectionDispatch }) => {
+    if (state.isSearchResponseLoading) {
+        return <DotSpinner dotCount={5} />;
+    } else if (state.searchUserResponse.status === 401) {
+        return (
+            <div className={styles.errorMessageContainer}>
+                <ErrorMessage
+                    errorMessage="Please rate the code again in above section"
+                    iconClasses="fa-solid fa-triangle-exclamation fa-2x"
+                />
+            </div>
+        );
+    } else if (
+        state.searchUserResponse.status === 200 &&
+        state.searchUserResponse.userCodeBaseFiles.length > 0
+    ) {
+        return (
+            <ResponseCards
+                userCodeBaseFiles={state.searchUserResponse.userCodeBaseFiles}
+                searchSectionDispatch={searchSectionDispatch}
+            />
+        );
+    } else {
+        return (
+            <div className={styles.errorMessageContainer}>
+                <ErrorMessage
+                    errorMessage="No results Found !!"
+                    iconClasses="fa-solid fa-poo fa-2x"
+                />
+            </div>
+        );
+    }
+};
+
+ResponseHandler.propTypes = {
+    state: PropTypes.object,
+    searchSectionDispatch: PropTypes.func,
+};
+
+export default ResponseHandler;

src/components/SearchSection/ResponseHandler/ResponseHandler.module.css

@@ -0,0 +1,3 @@
+.errorMessageContainer {
+    padding: 60px 0px 60px 0px;
+}

src/components/SearchSection/ScoreImoji/ScoreImoji.jsx

@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types';
+import { useMemo } from 'react';
+import styles from './ScoreImoji.module.css';
+
+const ScoreImoji = ({ codeRating, size }) => {
+    const computeClassName = useMemo(() => {
+        let faceClassName = '';
+        if (codeRating <= -8000) {
+            faceClassName = 'fa-face-angry';
+        } else if (codeRating > -8000 && codeRating <= -7000) {
+            faceClassName = 'fa-face-tired';
+        } else if (codeRating > -7000 && codeRating <= -6000) {
+            faceClassName = 'fa-face-dizzy';
+        } else if (codeRating > -6000 && codeRating <= -5000) {
+            faceClassName = 'fa-face-grimace';
+        } else if (codeRating > -5000 && codeRating <= -4000) {
+            faceClassName = 'fa-face-flushed';
+        } else if (codeRating > -4000 && codeRating <= -3000) {
+            faceClassName = 'fa-face-frown-open';
+        } else if (codeRating > -3000 && codeRating <= -2000) {
+            faceClassName = 'fa-face-frown';
+        } else if (codeRating > -2000 && codeRating <= -1000) {
+            faceClassName = 'fa-face-sad-tear';
+        } else if (codeRating > -1000 && codeRating <= 0) {
+            faceClassName = 'fa-face-meh';
+        } else if (codeRating > 0 && codeRating <= 1000) {
+            faceClassName = 'fa-face-smile';
+        } else if (codeRating > 1000 && codeRating <= 2000) {
+            faceClassName = 'fa-face-smile-beam';
+        } else if (codeRating > 2000 && codeRating <= 3000) {
+            faceClassName = 'fa-face-grin';
+        } else if (codeRating > 3000 && codeRating <= 4000) {
+            faceClassName = 'fa-face-grin-wide';
+        } else if (codeRating > 4000 && codeRating <= 5000) {
+            faceClassName = 'fa-face-grin-beam';
+        } else if (codeRating > 5000 && codeRating <= 6000) {
+            faceClassName = 'fa-face-grin-squint';
+        } else if (codeRating > 6000 && codeRating <= 7000) {
+            faceClassName = 'fa-face-laugh';
+        } else if (codeRating > 7000 && codeRating <= 8000) {
+            faceClassName = 'fa-face-laugh-beam';
+        } else if (codeRating > 8000 && codeRating <= 9000) {
+            faceClassName = 'fa-face-laugh-squint';
+        } else if (codeRating > 9000 && codeRating <= 10000) {
+            faceClassName = 'fa-face-grin-stars';
+        } else if (codeRating > 10000) {
+            faceClassName = 'fa-face-grin-hearts';
+        }
+        return `fa-solid ${size} ${faceClassName} ${styles.scoreImojiIcon}`;
+    }, [codeRating, size]);
+
+    return <i className={computeClassName}></i>;
+};
+
+ScoreImoji.propTypes = {
+    codeRating: PropTypes.number,
+    size: PropTypes.string,
+};
+
+export default ScoreImoji;

src/components/SearchSection/ScoreImoji/ScoreImoji.module.css

@@ -0,0 +1,3 @@
+.scoreImojiIcon {
+    color: var(--psybeam);
+}

src/components/SearchSection/ScoreImoji/ScoreImojiContainer.jsx

@@ -0,0 +1,26 @@
+import ScoreImoji from './ScoreImoji.jsx';
+import PropTypes from 'prop-types';
+import { OPEN_SCORE_REACTION_BOARD } from '../../hooks/useSearchSectionReducer.js';
+import styles from './ScoreImojiContainer.module.css';
+
+const ScoreImojiContainer = ({ codeRating, searchSectionDispatch, size }) => {
+    function handleClick() {
+        searchSectionDispatch({
+            type: OPEN_SCORE_REACTION_BOARD,
+        });
+    }
+
+    return (
+        <div onClick={handleClick} className={styles.scoreImojiContainer}>
+            <ScoreImoji codeRating={codeRating} size={size} />
+        </div>
+    );
+};
+
+ScoreImojiContainer.propTypes = {
+    codeRating: PropTypes.number,
+    searchSectionDispatch: PropTypes.func,
+    size: PropTypes.string,
+};
+
+export default ScoreImojiContainer;