Firebase account migration

src/containers/About/index.js

@@ -12,7 +12,7 @@ const About = () => {
 
   useEffect(() => {
     firestoreDB.collection("about-info").onSnapshot(snapshot => {
-      snapshot.docs.map(doc => setAboutStore(doc.data()));
+      setAboutStore(snapshot.docs.map(doc => doc.data())[0]);
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -35,20 +35,19 @@ const About = () => {
               <CardHeader title="FUTURE GOALS" />
               <Divider />
               <CardContent>
-                {aboutStore.future_goals &&
-                  aboutStore.future_goals.goals_array.map((_goal, index) => {
-                    return (
+                {aboutStore?.future_goals?.length && aboutStore.future_goals.map((_goal, index) => {
+                  return (
                       <React.Fragment key={index}>
                         <Typography variant="subtitle1" paragraph={true}
-                          style={{ fontWeight: "bold" }}>
+                                    style={{ fontWeight: "bold" }}>
                           {_goal.goal_title}
                         </Typography>
                         <Typography variant="subtitle2" component="div" gutterBottom={true}>
                           {_goal.goal_description}
                         </Typography>
                       </React.Fragment>
-                    )
-                  })}
+                  )
+                })}
               </CardContent>
             </Card>
           </Grid>

src/containers/Home/index.js

@@ -37,7 +37,7 @@ const Home = (props) => {
               <CardHeader title={"🕴️ PROFILE"} />
               <Divider />
               <CardContent style={{ textAlign: "justify" }}>
-                <span>{`Hello! I am Narottam and I am a Team Lead working on web applications and web infrastructure. I have been working professionally for ${calcYearsOfExperience(
+                <span>{`Hello! I am Narottam and I am a Tech Lead working on web applications and web infrastructure. I have been working professionally for ${calcYearsOfExperience(
                   workExperience)} years but tinkering since a kid.`}</span>
                 <br />
                 <br />
@@ -62,7 +62,7 @@ const Home = (props) => {
               <Divider />
               <CardContent style={{ textAlign: "justify" }}>
                 {workExperience.length > 0 &&
-                  workExperience.reverse().map((_workExperience, index) => {
+                  workExperience.map((_workExperience, index) => {
                     return (
                       <React.Fragment key={index}>
                         <div>
@@ -113,7 +113,7 @@ const Home = (props) => {
                           {
                             skill.skills_array.map((_skill, index) => {
                               return (
-                                <Chip key={index} color="primary" label={_skill.skill_name} />
+                                  <div className={classes.skillsPill}>{_skill.skill_name}</div>
                               )
                             })
                           }

src/containers/Home/styles.js

@@ -36,6 +36,15 @@ const homeStyles = makeStyles(theme => ({
     },
     marginTop: 15,
     marginBottom: 20
+  },
+  skillsPill: {
+    backgroundColor: 'red',
+    borderRadius: 10,
+    paddingRight: theme.spacing(2),
+    paddingLeft: theme.spacing(2),
+    paddingTop: 2,
+    paddingBottom: 2,
+    textAlign: 'center',
   }
 }));
 

src/context/RootContext.js

@@ -6,10 +6,16 @@ export const RootContextProvider = props => {
   const [rootStore, setRootStore] = useState({ drawerOpen: false, theme: "dark" });
 
   useEffect(() => {
-    async function fetchIpInfo () {
-      const ipInfo = await fetch("https://ipapi.co/json/");
-      let ipInfoResponseJson = await ipInfo.json();
-      setRootStore({ ...rootStore, ipInfo: ipInfoResponseJson });
+    function fetchIpInfo () {
+      fetch("https://ipapi.co/json/").then(response => {
+        if (response.ok) {
+          let ipInfoResponseJson = response.json();
+          setRootStore({ ...rootStore, ipInfo: ipInfoResponseJson });
+        }
+      }).catch(error => {
+        console.log(error);
+        setRootStore({ ...rootStore, ipInfo: {} });
+      })
     }
 
     fetchIpInfo();

src/utils/FirebaseConfig.js

@@ -1,14 +1,14 @@
 import firebase from "firebase";
 
 const firebaseConfig = firebase.initializeApp({
-  apiKey           : "AIzaSyBNW35sc1XW4jz8km47M9R4n9hScEO-kvo",
-  authDomain       : "narottam-portfolio.firebaseapp.com",
-  databaseURL      : "https://narottam-portfolio.firebaseio.com",
-  projectId        : "narottam-portfolio",
-  storageBucket    : "narottam-portfolio.appspot.com",
-  messagingSenderId: "387012073941",
-  appId            : "1:387012073941:web:a125957edf7307c366855c",
-  measurementId    : "G-V3E6ZHHZVF",
+  databaseURL      : "https://portfolio.firebaseio.com",
+  apiKey: "AIzaSyC3T0ZI9CDOi7GSnMW0vXkbwNlHkNFD4pQ",
+  authDomain: "portfolio-d5658.firebaseapp.com",
+  projectId: "portfolio-d5658",
+  storageBucket: "portfolio-d5658.appspot.com",
+  messagingSenderId: "166302306604",
+  appId: "1:166302306604:web:f10ff8ac69ab6c226e1c89",
+  measurementId: "G-HKCF6Q51Q5"
 });
 
 const firestoreDB = firebaseConfig.firestore();