fix: threads api not working

src/Threads/Themes/theme/NumberDesign.tsx

@@ -1,21 +1,19 @@
-import { useRef } from 'react';
-import Image from 'next/image';
-
-import ContentEditable from 'react-contenteditable';
-import { Icon } from '@iconify/react';
-
-import { calculateFontSize } from '../../../utils/helper';
 import {
   backgroundColor,
+  deleteContent,
   handleContentChange,
-  pasteAsPlainText,
   handleKeyDown,
-  deleteContent,
+  pasteAsPlainText,
 } from '../helper';
+import { useEffect, useRef } from 'react';
 
-import { useUser } from '../../context/UserContext';
-import { useOptions } from '../../context/OptionsContext';
+import ContentEditable from 'react-contenteditable';
+import { Icon } from '@iconify/react';
+import Image from 'next/image';
+import { calculateFontSize } from '../../../utils/helper';
 import { useContent } from '../../context/ContentContext';
+import { useOptions } from '../../context/OptionsContext';
+import { useUser } from '../../context/UserContext';
 
 type NumberProps = {
   index: number;
@@ -45,7 +43,7 @@ export function DefaultNumber({ index }: NumberProps) {
           <div className='flex gap-1 items-center relative'>
             <div className='max-h-10 max-w-10 h-10 w-10 rounded-full relative overflow-hidden border-2 border-secondary border-spacing-6 z-10'>
               <Image
-                src={userState.avatar}
+                src={userState.profilePictureUrl}
                 alt={userState.username}
                 quality={100}
                 fill
@@ -175,7 +173,7 @@ export function NumberOne({ index }: NumberProps) {
           <span className='h-full flex items-center'>
             <div className='h-7 w-7 rounded-full relative overflow-hidden border-2 border-secondary  border-spacing-6'>
               <Image
-                src={userState.avatar}
+                src={userState.profilePictureUrl}
                 alt={userState.username}
                 quality={100}
                 fill

src/Threads/component/AllPosts.tsx

@@ -0,0 +1,46 @@
+import { Dispatch, SetStateAction, useEffect, useState } from 'react'
+
+import { Post } from '../../types';
+import SubmitButton from './../../components/Button/SubmitButton';
+import { getAccessToken } from '../../utils/helper';
+import { getPostsOfTheLast7Days } from '../../utils/api';
+import { useUser } from '../context/UserContext';
+
+interface AllPostsProps {
+  setId: Dispatch<SetStateAction<string>>;
+}
+
+const AllPosts = ({ setId }: AllPostsProps) => {
+  const { userState } = useUser();
+  const [posts, setPosts] = useState<Post[]>([]);
+
+  useEffect(() => {
+    const fetchPosts = async () => {
+      const res = await getPostsOfTheLast7Days(getAccessToken(), userState.userId);
+
+      if (res && res.data) {
+        setPosts(res.data.filter((post: Post) => !post.is_quote_post).slice(0, 9));
+      }
+    };
+    fetchPosts();
+  }, [userState.userId]);
+
+  const handleClick = (id: string) => {
+    setId(id);
+  }
+  return (
+    <section className='flex flex-col mt-4 max-h-[500px] w-4/5  justify-center items-center gap-4 h-auto max-w-[850px]'>
+      <p>Select a post👇🏾</p>
+      <div className='flex-col flex gap-2 w-full'>
+        {posts.map((post) => (
+          <div key={post.id} className='border border-brand bg-black/65 rounded-md w-full flex justify-between'>
+            <p className='py-3 px-2'>{post.text.split(' ').slice(0, 8).join(' ')}...</p>
+            <SubmitButton handleOnClick={() => handleClick(post.id)} text="Select" />
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export default AllPosts

src/Threads/component/Options.tsx

@@ -1,36 +1,18 @@
-import { useRef, useState, Dispatch, SetStateAction, useEffect } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
-import { Icon } from '@iconify/react';
 import ColorPicker from 'react-pick-color';
-import { PongSpinner } from 'react-spinners-kit';
-
 import FontPicker from './FontPicker';
+import { Icon } from '@iconify/react';
 import Themes from '../Themes';
-
-import { extractUserName } from '../../utils/helper';
-import { getUserProfile } from '../../utils/api';
-
 import { useContent } from '../context/ContentContext';
-import { useUser } from '../context/UserContext';
 import { useOptions } from '../context/OptionsContext';
 
-import Input from '../../components/Input';
-import SubmitButton from '../../components/Button/SubmitButton';
+const Options = () => {
 
-type OptionsTypeProps = {
-  setPostURL: Dispatch<SetStateAction<string>>;
-};
-
-const Options = (props: OptionsTypeProps) => {
-  const { setPostURL } = props;
-
-  const { contentState, dispatchContent } = useContent();
+  const { contentState } = useContent();
   const { optionsState, dispatchOptions } = useOptions();
-  const { dispatchUser } = useUser();
 
   const { color, fontColor } = optionsState;
-
-  const [urlLoading, seturlLoading] = useState(false);
   const [isOptionsOpen, setIsOptionsOpen] = useState(false);
   const [isPickerOpen, setIsPickerOpen] = useState({
     color1: false,
@@ -39,7 +21,6 @@ const Options = (props: OptionsTypeProps) => {
   });
   const [addColor, setAddColor] = useState(false);
 
-  const urlRef = useRef<HTMLInputElement>(null);
   const colorPickerRef = useRef<HTMLSpanElement>(null);
 
   useEffect(() => {
@@ -71,27 +52,6 @@ const Options = (props: OptionsTypeProps) => {
     !addColor && dispatchOptions({ type: 'SET_COLOR2', payload: '' });
   }, [addColor]);
 
-  const handleOnClick = async () => {
-    if (urlRef.current === null) return;
-    const url = urlRef.current.value;
-    urlRef.current.value = '';
-
-    if (!(url.includes('threads.net') && url.includes('post'))) {
-      dispatchContent({ type: 'SET_ERROR', payload: 'Invalid Link' });
-      return;
-    }
-    dispatchContent({ type: 'SET_ERROR', payload: '' });
-
-    seturlLoading(true);
-    setPostURL(url);
-
-    const username = extractUserName(url);
-    const avatar = await getUserProfile(username);
-
-    dispatchUser({ type: 'ADD_USERNAME', payload: username });
-    dispatchUser({ type: 'ADD_AVATAR', payload: avatar });
-    seturlLoading(false);
-  };
 
   const handleAddCoor = () => {
     setAddColor(!addColor);
@@ -102,18 +62,8 @@ const Options = (props: OptionsTypeProps) => {
   };
 
   return (
-    <header className='w-full flex items-center justify-center flex-col relative max-h-full'>
+    <section className='w-full flex items-center justify-center flex-col relative max-h-full'>
       <div className='w-4/5 max-w-[750px] min-w-[300px] h-full flex flex-col items-center'>
-        <div className='flex items-center justify-center w-full'>
-          <Input placeholder='Threads Post URL' refValue={urlRef} />
-          {urlLoading ? (
-            <span className='w-[20%] bg-brand flex items-center justify-center h-12 rounded-tr-md'>
-              <PongSpinner size={30} color='#fff' loading={urlLoading} />
-            </span>
-          ) : (
-            <SubmitButton handleOnClick={handleOnClick} text='Submit' />
-          )}
-        </div>
         {contentState.postContent.length !== 0 && (
           <section className='w-full flex gap-4 justify-center relative select-none'>
             <div
@@ -267,9 +217,12 @@ const Options = (props: OptionsTypeProps) => {
             )}
           </section>
         )}
+
+
+
       </div>
-      <p className='text-red-600 text-fsm text-center'>{contentState.error}</p>
-    </header>
+    </section>
+
   );
 };
 

src/Threads/component/Preview.tsx

@@ -1,17 +1,21 @@
-import { useState } from 'react';
+import { Dispatch, SetStateAction, useState } from 'react';
 
+import DisplayTheme from '../Themes/DisplayTheme';
 import { PongSpinner } from 'react-spinners-kit';
-import { jsPDF } from 'jspdf';
-
 import { elementToImage } from '../../utils/helper';
-import DisplayTheme from '../Themes/DisplayTheme';
+import { jsPDF } from 'jspdf';
+import { useContent } from '../context/ContentContext';
 
 // context
-import { useContent } from '../context/ContentContext';
+
 
 const zip = require('jszip')();
 
-const Preview = () => {
+interface PreviewProps {
+  setShowAllPosts: Dispatch<SetStateAction<boolean>>;
+}
+
+const Preview = ({ setShowAllPosts }: PreviewProps) => {
   const { contentState } = useContent();
 
   const [downloadLoading, setDownloadLoading] = useState({
@@ -130,6 +134,7 @@ const Preview = () => {
           )}
         </button>
       </div>
+      <button onClick={() => setShowAllPosts(true)} className='bg-red-400 rounded-md h-16 p-4 font-medium w-[550px] min-w-[270px] flex items-center justify-center'>Change Post</button>
     </span>
   );
 };

src/Threads/context/UserContext.tsx

@@ -1,35 +1,29 @@
-import { ReactNode, createContext, useContext, useReducer } from 'react';
-import { User } from '../../types';
-import { UserReducer, initalUserState } from '../reducer/UserReducer';
+import React, { createContext, useContext, useReducer } from 'react';
+import { UserAction, UserReducer, initialUserState } from '../reducer/UserReducer';
 
-type UserProviderProps = {
-  children: ReactNode;
-};
+import { User } from '../../types';
 
-type UserContextType = {
+interface UserContextType {
   userState: User;
-  dispatchUser: React.Dispatch<any>;
-};
-const UserContext = createContext<UserContextType | null>(null);
+  dispatchUser: React.Dispatch<UserAction>;
+}
 
-export const useUser = () => {
-  const context = useContext(UserContext);
-  if (!context) {
-    throw new Error('useUser must be used within a UserProvider');
-  }
-
-  return context;
-};
+const UserContext = createContext<UserContextType | undefined>(undefined);
 
-export const UserProvider = ({ children }: UserProviderProps) => {
-  const [userState, dispatchUser] = useReducer(UserReducer, initalUserState);
-
-  const contextValue: UserContextType = {
-    userState,
-    dispatchUser,
-  };
+export function UserProvider({ children }: { children: React.ReactNode }) {
+  const [userState, dispatchUser] = useReducer(UserReducer, initialUserState);
 
   return (
-    <UserContext.Provider value={contextValue}>{children}</UserContext.Provider>
+    <UserContext.Provider value={{ userState, dispatchUser }}>
+      {children}
+    </UserContext.Provider>
   );
-};
+}
+
+export function useUser() {
+  const context = useContext(UserContext);
+  if (context === undefined) {
+    throw new Error('useUser must be used within a UserProvider');
+  }
+  return context;
+}