Added Author selection option to the frontend for improved quote personalization. (#131)

Author: marceloams

frontend/src/components/Pages/Home/index.js

@@ -5,6 +5,8 @@ import { themes, animations, layouts, fonts, colorValues, quoteTypes } from '../
 import TextField from '@material-ui/core/TextField';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import ContributorsCard from '../../ContributorsCard/ContributorCard'
+import useQuoteAuthors from '../../../util/authors';
+
 const Home = () => {
 
     const [theme, setTheme] = useState(themes[0]);
@@ -14,6 +16,9 @@ const Home = () => {
     const [fontColor, setFontColor] = useState(null);
     const [bgColor, setBgColor] = useState(null);
     const [quoteType, setQuoteType] = useState("random");
+    const [quoteAuthor, setQuoteAuthor] = useState(null);
+
+    const { quoteAuthors } = useQuoteAuthors();
 
     return (
         <React.Fragment>
@@ -126,11 +131,24 @@ const Home = () => {
                     />
                 </Grid>
 
+                <Grid item xs={12} sm={6} lg={3}>
+                    <Autocomplete
+                        id="author"
+                        options={quoteAuthors}
+                        value={quoteAuthor}
+                        style={{ width: 300 }}
+                        onChange={(_event, newValue) => {
+                            setQuoteAuthor(newValue)
+                        }}
+                        renderInput={(params) => <TextField {...params} label="Author" placeholder="Select an author" variant="outlined" />}
+                    />
+                </Grid>
+
             </Grid>
 
             <Grid container spacing={4}>
                 <Grid item xs={12} style={{ margin: '20px' }}>
-                    <TemplateCard theme={theme} animation={animation} layout={layout} font={font} fontColor={fontColor} bgColor={bgColor} quoteType={quoteType} />
+                    <TemplateCard theme={theme} animation={animation} layout={layout} font={font} fontColor={fontColor} bgColor={bgColor} quoteType={quoteType} quoteAuthor={quoteAuthor}/>
                 </Grid>
                 <Grid item xs={12}>
                     <Typography align="center">Other layouts</Typography>
@@ -139,7 +157,7 @@ const Home = () => {
                     layouts.filter((item) => item !== layout).map((restLayout) => {
                         return (
                             <Grid key={restLayout} item xs={12} sm={12} md={6}>
-                                <TemplateCard theme={theme} animation={animation} layout={restLayout} font={font} fontColor={fontColor} bgColor={bgColor} quoteType={quoteType} />
+                                <TemplateCard theme={theme} animation={animation} layout={restLayout} font={font} fontColor={fontColor} bgColor={bgColor} quoteType={quoteType} quoteAuthor={quoteAuthor}/>
                             </Grid>
                         )
                     })

frontend/src/components/organisms/TemplateCard/index.js

@@ -21,11 +21,12 @@ const TemplateCard = (props) => {
   const [snackbarMessage, setSnackbarMessage] = useState("");
   const [isImageLoaded, setImageLoaded] = useState(false);
   const originUrl = serverUrl; // Note: PORT 3004 since in server is served via that port. Frontend independently served on port 3000
+  const author = "Open Source";
 
   const template = new Template();
   const data = {
     quote: "This is going to be the Github quote for your README",
-    author: "Open Source",
+    author: props.quoteAuthor ?? author,
   };
 
   const theme = { ...mainThemes[props.theme] };
@@ -72,7 +73,8 @@ const TemplateCard = (props) => {
     font: props.font,
     quoteType: props.quoteType,
     ...(props.bgColor && { bgColor: props.bgColor }),
-    ...(props.fontColor && { fontColor: props.fontColor })
+    ...(props.fontColor && { fontColor: props.fontColor }),
+    ...(props.quoteAuthor && { author: props.quoteAuthor })
   });
   const quoteUrl = `${originUrl}/quote?${params.toString()}`;
 

frontend/src/util/authors/index.js

@@ -0,0 +1,30 @@
+import { useState, useLayoutEffect, useCallback } from "react";
+
+import { serverUrl } from "../../components/Constants/urlConfig";
+
+const useQuoteAuthors = () => { 
+    const originUrl = serverUrl;
+    const [quoteAuthors, setQuoteAuthors] = useState([]);
+  
+    const fetchQuoteAuthors = useCallback(async () => {
+        try {
+            const response = await fetch(`${originUrl}/authors`);
+            const data = await response.json();
+            if (data) {
+                setQuoteAuthors(data);
+            }
+        } catch (error) {
+            console.error("Failed to fetch quote authors:", error);
+        }
+    }, [originUrl]);
+    
+    useLayoutEffect(() => {
+        fetchQuoteAuthors();
+    }, [fetchQuoteAuthors]);
+  
+    return {
+      quoteAuthors,
+    };
+}
+
+export default useQuoteAuthors;