feat: switch to live data (#74)

* adds ~ placeholder

* trying to organize a data base file

* adds jason's updates

* format fix

* remove console debugger

Co-authored-by: Jason Davis <14043845+jasonericdavis@users.noreply.github.com>

src/components/PostGrid.jsx

@@ -1,14 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import HotAvatar from './Avatar.jsx';
-import { fetchVotesByRepo, updateVotesByRepo } from '../lib/database';
+import { updateVotesByRepo } from '../lib/database';
 
 function PostGrid({ data }) {
-  const [votes, updateVotesState] = useState(0);
-
-  useEffect(() => {
-    fetchVotesByRepo(data.repo_name).then((noOfVotes) => updateVotesState(noOfVotes));
-  }, []);
+  const [votes, updateVotesState] = useState(data.votes || 0);
 
   async function handleVoteUpdateByRepo(repoName, noOfVotes) {
     const updatedVotes = await updateVotesByRepo(repoName, noOfVotes);

src/components/PostList.jsx

@@ -1,16 +1,12 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import humanizeNumber from '../lib/humanizeNumber';
 import HotAvatar from './Avatar.jsx';
-import { fetchVotesByRepo, updateVotesByRepo } from '../lib/database';
+import { updateVotesByRepo } from '../lib/database';
 
 function PostList({ data }) {
   const repoLink = `https://github.com/${data.repo_name}`;
-  const [votes, updateVotesState] = useState(0);
-
-  useEffect(() => {
-    fetchVotesByRepo(data.repo_name).then((noOfVotes) => updateVotesState(noOfVotes));
-  }, []);
+  const [votes, updateVotesState] = useState(data.votes || 0);
 
   async function handleVoteUpdateByRepo(repoName, noOfVotes) {
     const updatedVotes = await updateVotesByRepo(repoName, noOfVotes);

src/components/PostsWrap.jsx

@@ -1,16 +1,22 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import LayoutToggle from './LayoutToggle.jsx';
 
-import postData from '../data/hot.json';
 import Modal from './Modal.jsx';
 import SecondaryNav from './SecondaryNav.jsx';
 import GridDisplay from './GridDisplay.jsx';
 import ListDisplay from './ListDisplay.jsx';
+import { fetchRecommendations } from '../lib/database';
 
 const PostsWrap = () => {
   const [isGrid, setIsGrid] = useState(true);
   const [activeLink, setActiveLink] = useState('popular');
-  const fetchedData = [...postData];
+  const [fetchedData, setFetchedData] = useState([]);
+
+  useEffect(() => {
+    fetchRecommendations().then((data) => {
+      setFetchedData(data);
+    });
+  }, []);
 
   return (
     <>

src/lib/database.js

@@ -7,14 +7,25 @@ const supabase = createClient(import.meta.env.PUBLIC_SUPABASE_URL,
 export async function fetchVotesByRepo(repoName) {
   const { data: recommendations, error } = await supabase
     .from('recommendations')
-    .select('votes')
+    .select('votes, issues')
     .eq('repo_name', repoName);
 
   console.error(error);
 
   return recommendations[0].votes ? recommendations[0].votes : 0;
 }
 
+export async function fetchRepoByRepoName(repoName) {
+  const { data: recommendations, error } = await supabase
+    .from('recommendations')
+    .select('votes, avg_recency_score')
+    .eq('repo_name', repoName);
+
+  console.error(error);
+
+  return recommendations[0];
+}
+
 export async function updateVotesByRepo(repoName, votes) {
   const { data: recommendations, error } = await supabase
     .from('recommendations')
@@ -25,3 +36,15 @@ export async function updateVotesByRepo(repoName, votes) {
 
   return recommendations[0].votes;
 }
+
+export async function fetchRecommendations() {
+  const { data: recommendations, error } = await supabase
+    .from('recommendations')
+    .select('repo_name, description,stars,issues, total_stars, avg_recency_score, contributors, votes')
+    .limit(25)
+    .order('total_stars', { ascending: false });
+
+  console.error(error);
+
+  return recommendations;
+}