[Add] add codes from each users repos

Author: junnei

src/pages/index.js

@@ -10,16 +10,40 @@ export default function Home() {
     const [codes, setCodes] = useState([]);
     const [names, setNames] = useState([]);
     const [files, setFiles] = useState([]);
+    const [members, setMembers] = useState([]);
 
     const axios = require('axios');
 
     useEffect(() => {
         setCodes(["print(1)", "print(2)", "print(3)", "print(4)"]);
         setNames(["junnei1", "junnei2", "junnei3", "junnei4"]);
         fetchFiles()
+        fetchMembers()
     }, []);
 
+    const fetchMembers = async (org = "Code-Study", token = null) => {
+        try {
+            const options = token
+                ? {
+                    headers: { Authorization: `Bearer ${token}` },
+                    params: { filter: 'all' },
+                    }
+                : {};
+            const response = await axios.get(`https://api.github.com/orgs/${org}/members`, options);
+            //console.log('Organization Members:', response.data);
 
+            const members = response.data.map((member) => ({
+                login: member.login,
+                avatar_url: member.avatar_url,
+                html_url: member.html_url,
+            }));
+            setMembers(members);
+            return members;
+        } catch (error) {
+            console.error('Error fetching organization members:', error);
+        }
+    };
+      
     const fetchTreeSHA = async (owner = "Code-Study", repo = "Code", branch = "main") => {
         try {
           const response = await axios.get(`https://api.github.com/repos/${owner}/${repo}/branches/${branch}`);
@@ -64,12 +88,15 @@ export default function Home() {
                     </div>
 
                     <div>
-                        <h1>Recent Uploads</h1>
-                        <ul>
-                            {files.map((file, index) => (
-                            <li key={index}>{file.path}</li>
+                        <h1>Members</h1>
+                        <div className={styles.memberContainer}>
+                            {members.map((member, index) => (
+                                <a href={member.html_url} key={member.login} target="_blank" rel="noopener noreferrer" className={styles.memberCard}>
+                                    <img src={member.avatar_url} alt={`${member.login}'s avatar`} className={styles.memberAvatar} />
+                                    <p className={styles.memberName}>{member.login}</p>
+                                </a>
                             ))}
-                        </ul>
+                        </div>
                     </div>
                 </div>
             </main>

src/pages/index.module.css

@@ -54,4 +54,44 @@ h1 {
     .tagline {
         font-size: 1em;
     }
-}
+}
+
+.memberContainer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: center;
+    margin-top: 30px;
+}
+
+.memberCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-decoration: none;
+  color: #333;
+  width: 120px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 15px;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.memberCard:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+}
+
+.memberAvatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  margin-bottom: 10px;
+  border: 2px solid #ddd;
+}
+
+.memberName {
+  font-size: 1em;
+  font-weight: bold;
+  color: #333;
+}

src/theme/CodeBlock/index.js

@@ -20,68 +20,103 @@ function maybeStringifyChildren(children) {
 export default function CodeBlock({ children: rawChildren, ...props }) {
   const [codes, setCodes] = useState([]); // 코드를 담을 상태
   const [names, setNames] = useState([]);
+  const [members, setMembers] = useState([]);
 
-  useEffect(() => {
-    const fetchCodes = async () => {
-      try {
-        const axios = require('axios');
+  const axios = require('axios');
 
-        const getRepositoryContents = async (owner, repo, path = '') => {
-          try {
-            const response = await axios.get(`https://api.github.com/repos/${owner}/${repo}/contents/${path}`);
-            return response.data;
-          } catch (error) {
-            console.error('Error fetching repository contents:', error);
-            return [];
-          }
-        };
+  const fetchMembers = async (org = "Code-Study", token = null) => {
+    try {
+        const options = token
+            ? {
+                headers: { Authorization: `Bearer ${token}` },
+                params: { filter: 'all' },
+                }
+            : {};
+        const response = await axios.get(`https://api.github.com/orgs/${org}/members`, options);
 
-        const getFilesRecursively = async (owner, repo, path = '') => {
-            let files = [];
-            const contents = await getRepositoryContents(owner, repo, path);
-            
-            for (const content of contents) {
-              if (content.type === 'file') {
-                // 파일인 경우 목록에 추가
-                files.push(content.path);
-              } else if (content.type === 'dir') {
-                // 폴더인 경우 재귀적으로 해당 폴더의 파일을 가져옴
-                const subFiles = await getFilesRecursively(owner, repo, content.path);
-                files = files.concat(subFiles);
-              }
-            }
-            return files;
-        };
-  
-        const getRepositoryFileContent = async (owner, repo, path) => {
-          try {
-            const response = await axios.get(`https://api.github.com/repos/${owner}/${repo}/contents/${path}`);
-            const content = decodeURIComponent(escape(window.atob(response.data.content))); // 디코딩
-            return content;
-          } catch (error) {
-            console.error('Error fetching file content:', error);
-            return null;
-          }
-        };
+        const members = response.data.map((member) => (
+            member.login
+        ));
+        setMembers(members)
+        return members;
+    } catch (error) {
+        console.error('Error fetching organization members:', error);
+    }
+  };
+
+  const getRepositoryContents = async (owner, repo, path = '') => {
+    try {
+      const response = await axios.get(`https://api.github.com/repos/${owner}/${repo}/contents/${path}`);
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching repository contents:', error);
+      return [];
+    }
+  };
+
+  const getFilesRecursively = async (owner, repo, path = '') => {
+      let files = [];
+      const contents = await getRepositoryContents(owner, repo, path);
+      
+      for (const content of contents) {
+        if (content.type === 'file') {
+          // 파일인 경우 목록에 추가
+          files.push(content.path);
+        } else if (content.type === 'dir') {
+          // 폴더인 경우 재귀적으로 해당 폴더의 파일을 가져옴
+          const subFiles = await getFilesRecursively(owner, repo, content.path);
+          files = files.concat(subFiles);
+        }
+      }
+      return files;
+  };
 
-        // const pattern = /^[a-zA-Z]+-[a-zA-Z]+\/\d+\/\d+\/\d+$/;
-        // const pattern = /^[a-zA-Z]+-[a-zA-Z]+\/[a-zA-Z]+-\d+\/\d+-[a-zA-Z]+-[a-zA-Z]+\/\d+$/;
-        const pattern = /^(leet-code|novice-high)\/.+\/.+\/.+$/;
-        if ((pattern.test(props.metastring) === true) && (props.className === "language-python")) {
-          const contents = await getFilesRecursively('Code-Study', 'Code', props.metastring);
-          const codePromises = contents.map(element =>
-            getRepositoryFileContent('Code-Study', 'Code', element)
+  const getRepositoryFileContent = async (owner, repo, path) => {
+    try {
+      const response = await axios.get(`https://api.github.com/repos/${owner}/${repo}/contents/${path}`);
+      const content = decodeURIComponent(escape(window.atob(response.data.content))); // 디코딩
+      return content;
+    } catch (error) {
+      console.error('Error fetching file content:', error);
+      return null;
+    }
+  };
+  
+  const fetchCodes = async () => {
+    try {
+      // const pattern = /^[a-zA-Z]+-[a-zA-Z]+\/\d+\/\d+\/\d+$/;
+      // const pattern = /^[a-zA-Z]+-[a-zA-Z]+\/[a-zA-Z]+-\d+\/\d+-[a-zA-Z]+-[a-zA-Z]+\/\d+$/;
+      const pattern = /^(leet-code|novice-high)\/.+\/.+\/.+$/;
+      if ((pattern.test(props.metastring) === true) && (props.className === "language-python")) {
+        const contents = await getFilesRecursively('Code-Study', 'Code', props.metastring);
+        const codePromises = contents.map(element =>
+          getRepositoryFileContent('Code-Study', 'Code', element)
+        );
+        const codeContents = await Promise.all(codePromises);
+        setCodes(codeContents);
+        //console.log(contents.map(elem => elem.split('/').pop().split('.')[0]));
+        setNames(contents.map(elem => elem.split('/').pop().split('.')[0]));
+      } else {
+        const memberContents = await fetchMembers('Code-Study');
+      
+        setNames(memberContents);
+        const contents = memberContents.map(async member =>  {
+          const contents = await getFilesRecursively(member, 'LeetCode', props.metastring);
+          const codePromises = contents
+          .filter(element => element.endsWith('.py'))
+          .map(element =>
+            getRepositoryFileContent(member, 'LeetCode', element)
           );
           const codeContents = await Promise.all(codePromises);
-          setCodes(codeContents);
-          //console.log(contents.map(elem => elem.split('/').pop().split('.')[0]));
-          setNames(contents.map(elem => elem.split('/').pop().split('.')[0]));
-        }
-      } catch (error) {
-        console.error('Error fetching codes:', error);
+          setCodes((prevCodes) => [...prevCodes, ...codeContents]);
+        });
       }
-    };
-        
+    } catch (error) {
+      console.error('Error fetching codes:', error);
+    }
+  };
+
+  useEffect(() => {
     fetchCodes();
   }, [props.metastring]);