migrate my-questions, my-answers to MST store

Maqsim · Maqsim · commit 189466379d3a · 2022-05-11T03:24:20.000+03:00
diff --git a/public/index.html b/public/index.html
@@ -5,7 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval' https://jmblog.github.io/ https://cdn.jsdelivr.net/ https://api.stackexchange.com/; img-src *">
+  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval' https://jmblog.github.io/ https://cdn.jsdelivr.net/ https://api.stackexchange.com/ wss://qa.sockets.stackexchange.com/; img-src *">
 
   <title>StackOverflow</title>
 
diff --git a/src/models/question-store/question-store.ts b/src/models/question-store/question-store.ts
@@ -4,21 +4,42 @@ import stackoverflow from '../../uitls/stackexchange-api';
 import { PaginationController } from '../../hooks/use-pagination';
 import { promiser } from '../../uitls/promiser';
 import { ResponseType } from '../../interfaces/Response';
+import { AnswerType } from '../../interfaces/AnswerType';
 
-export const AllQuestionsFilter =
+export const ALL_QUESTIONS_FILTER =
   '!HzgO6Jg6sME4H_1lyzjHHRxMDyjoWkuK(8Xe125IMyd4rNGmzV(xVm79voQW*H7_CY)rZkEokE8LKn2_KZ4TJ5F0.2rZ1';
 
+async function getMyAnswersQuestionIds(page: number, perPage: number) {
+  const [response, error] = await promiser<ResponseType<AnswerType>>(
+    stackoverflow.get('me/answers', {
+      order: 'desc',
+      sort: 'creation',
+      page,
+      pagesize: perPage,
+      filter: '!AH)b5JZk)e5p'
+    })
+  );
+
+  const ids = response.items.map((answer: AnswerType) => answer.question_id);
+
+  return [ids, response.total];
+}
+
 export const QuestionStoreModel = types
   .model('QuestionStore')
   .props({
     isQuestionsFetching: false,
-    isBookmarksFetching: false,
+    isMyBookmarksFetching: false,
+    isMyQuestionsFetching: false,
+    isMyAnswersFetching: false,
     questionsFilter: types.optional(
       types.enumeration('QuestionsFilter', ['interesting', 'bountied', 'hot']),
       'interesting'
     ),
     questions: types.optional(types.array(QuestionModel), []),
-    myBookmarks: types.optional(types.array(QuestionModel), [])
+    myBookmarks: types.optional(types.array(QuestionModel), []),
+    myQuestions: types.optional(types.array(QuestionModel), []),
+    myAnswers: types.optional(types.array(QuestionModel), [])
   })
   .actions((self) => ({
     setQuestions(questions: QuestionType[]) {
@@ -27,11 +48,23 @@ export const QuestionStoreModel = types
     setMyBookmarks(questions: QuestionType[]) {
       self.myBookmarks.replace(questions);
     },
+    setMyQuestions(questions: QuestionType[]) {
+      self.myQuestions.replace(questions);
+    },
+    setMyAnswers(questions: QuestionType[]) {
+      self.myAnswers.replace(questions);
+    },
     setIsQuestionsFetching(state: boolean) {
       self.isQuestionsFetching = state;
     },
-    setIsBookmarksFetching(state: boolean) {
-      self.isBookmarksFetching = state;
+    setIsMyBookmarksFetching(state: boolean) {
+      self.isMyBookmarksFetching = state;
+    },
+    setIsMyQuestionsFetching(state: boolean) {
+      self.isMyQuestionsFetching = state;
+    },
+    setIsMyAnswersFetching(state: boolean) {
+      self.isMyAnswersFetching = state;
     },
     setQuestionsFilter(filter: 'interesting' | 'bountied' | 'hot') {
       self.questionsFilter = filter;
@@ -48,7 +81,7 @@ export const QuestionStoreModel = types
         sort: 'creation',
         page: pagination.page,
         pagesize: pagination.perPage,
-        filter: AllQuestionsFilter
+        filter: ALL_QUESTIONS_FILTER
       };
 
       if (filter === 'bountied') {
@@ -65,22 +98,62 @@ export const QuestionStoreModel = types
       pagination.setTotal(response.total);
       self.setIsQuestionsFetching(false);
     },
-    async getBookmarks(pagination: PaginationController) {
-      self.setIsBookmarksFetching(true);
+    async getMyBookmarks(pagination: PaginationController) {
+      self.setIsMyBookmarksFetching(true);
 
       const [response, error] = await promiser<ResponseType<QuestionType>>(
         stackoverflow.get('me/favorites', {
           order: 'desc',
           sort: 'added',
           page: pagination.page,
           pagesize: pagination.perPage,
-          filter: '!HzgO6Jg6sME4H_1lyzjHHRxMDyjoWkuK(8Xe125IMyd4rNGmzV(xVm79voQW*H7_CY)rZkEokE8LKn2_KZ4TJ5F0.2rZ1'
+          filter: ALL_QUESTIONS_FILTER
         })
       );
 
       self.setMyBookmarks(response.items);
       pagination.setTotal(response.total);
-      self.setIsBookmarksFetching(false);
+      self.setIsMyBookmarksFetching(false);
+    },
+    async getMyQuestions(pagination: PaginationController) {
+      self.setIsMyQuestionsFetching(true);
+
+      const [response, error] = await promiser<ResponseType<QuestionType>>(
+        stackoverflow.get('me/questions', {
+          order: 'desc',
+          sort: 'creation',
+          page: pagination.page,
+          pagesize: pagination.perPage,
+          filter: ALL_QUESTIONS_FILTER
+        })
+      );
+
+      self.setMyQuestions(response.items);
+      pagination.setTotal(response.total);
+      self.setIsMyQuestionsFetching(false);
+    },
+    async getMyAnswers(pagination: PaginationController) {
+      self.setIsMyAnswersFetching(true);
+
+      const [questionIds, answerTotal] = await getMyAnswersQuestionIds(pagination.page, pagination.perPage);
+
+      if (questionIds.length === 0) {
+        self.setIsMyAnswersFetching(false);
+        return;
+      }
+
+      const [response, error] = await promiser<ResponseType<QuestionType>>(
+        stackoverflow.get(`questions/${questionIds.join(';')}`, {
+          order: 'desc',
+          sort: 'creation',
+          filter: ALL_QUESTIONS_FILTER
+        })
+      );
+
+      self.setMyAnswers(response.items);
+      pagination.setTotal(answerTotal);
+      console.log('toggle flag');
+      self.setIsMyAnswersFetching(false);
     }
   }));
 
diff --git a/src/models/user-store/user.ts b/src/models/user-store/user.ts
@@ -1,6 +1,7 @@
 import { Instance, types } from 'mobx-state-tree';
 
 export const UserModel = types.model({
+  user_type: types.enumeration('UserType', ['registered', 'unregistered', 'does_not_exist']),
   about_me: types.maybe(types.string),
   account_id: types.maybe(types.number),
   answer_count: types.maybe(types.number),
@@ -10,7 +11,7 @@ export const UserModel = types.model({
   location: types.maybe(types.string),
   profile_image: types.maybe(types.string),
   question_count: types.maybe(types.number),
-  reputation: types.number,
+  reputation: types.maybe(types.number),
   user_id: types.maybe(types.number),
   view_count: types.maybe(types.number),
   website_url: types.maybe(types.string)
diff --git a/src/pages/MyAnswersPage.tsx b/src/pages/MyAnswersPage.tsx
@@ -1,58 +1,21 @@
-import { useEffect, useState } from 'react';
-import { QuestionType } from '../interfaces/QuestionType';
+import { useEffect } from 'react';
 import { QuestionListItem } from '../components/posts/QuestionListItem';
-import stackoverflow from '../uitls/stackexchange-api';
-import { Box, Center, Stack, Text } from "@chakra-ui/react";
+import { Box, Center, Stack, Text } from '@chakra-ui/react';
 import { QuestionListItemSkeleton } from '../components/posts/QuestionListItem.skeleton';
-import { AnswerType } from '../interfaces/AnswerType';
 import { Pagination } from '../components/ui/Pagination';
 import { usePagination } from '../hooks/use-pagination';
-import { GoTriangleUp } from "react-icons/go";
+import { useStores } from '../models';
+import { observer } from 'mobx-react-lite';
 
-export function MyAnswersPage() {
+export const MyAnswersPage = observer(() => {
+  const { questionStore } = useStores();
   const pagination = usePagination();
-  const [isLoaded, setIsLoaded] = useState(false);
-  const [questions, setQuestions] = useState<QuestionType[]>([]);
 
   useEffect(() => {
-    (async () => {
-      setIsLoaded(false);
-
-      const questionIds = await getAnswersQuestionIds(pagination.page, pagination.perPage);
-
-      if (questionIds.length === 0) {
-        setIsLoaded(true);
-        return;
-      }
-
-      const response: any = await stackoverflow.get(`questions/${questionIds.join(';')}`, {
-        order: 'desc',
-        sort: 'creation',
-        filter: '!HzgO6Jg6sME4H_1lyzjHHRxMDyjoWkuK(8Xe125IMyd4rNGmzV(xVm79voQW*H7_CY)rZkEokE8LKn2_KZ4TJ5F0.2rZ1'
-      });
-
-      setQuestions(response.items);
-      setIsLoaded(true);
-    })();
+    questionStore.getMyAnswers(pagination);
   }, [pagination.page, pagination.perPage]);
 
-  function getAnswersQuestionIds(page: number, perPage: number) {
-    return stackoverflow
-      .get('me/answers', {
-        order: 'desc',
-        sort: 'creation',
-        page,
-        pagesize: perPage,
-        filter: '!AH)b5JZk)e5p'
-      })
-      .then((response: any) => {
-        pagination.setTotal(response.total);
-
-        return response.items.map((answer: AnswerType) => answer.question_id);
-      });
-  }
-
-  if (isLoaded && !questions.length) {
+  if (!questionStore.isMyAnswersFetching && !questionStore.myAnswers.length) {
     return (
       <Center color="gray.500" height="200px">
         You have no any answers yet.
@@ -64,9 +27,11 @@ export function MyAnswersPage() {
     <>
       <Stack spacing="8px">
         {/* Skeletons */}
-        {!isLoaded && [...Array(pagination.perPage)].map((_, index) => <QuestionListItemSkeleton key={index} />)}
+        {questionStore.isMyAnswersFetching &&
+          [...Array(pagination.perPage)].map((_, index) => <QuestionListItemSkeleton key={index} />)}
 
-        {isLoaded && questions.map((question) => <QuestionListItem item={question} key={question.question_id} />)}
+        {!questionStore.isMyAnswersFetching &&
+          questionStore.myAnswers.map((question) => <QuestionListItem item={question} key={question.question_id} />)}
       </Stack>
 
       {pagination.totalPages > 0 && (
@@ -76,4 +41,4 @@ export function MyAnswersPage() {
       )}
     </>
   );
-}
+});
diff --git a/src/pages/MyBookmarksPage.tsx b/src/pages/MyBookmarksPage.tsx
@@ -11,10 +11,10 @@ export function MyBookmarksPage() {
   const pagination = usePagination();
 
   useEffect(() => {
-    questionStore.getBookmarks(pagination);
+    questionStore.getMyBookmarks(pagination);
   }, [pagination.page, pagination.perPage]);
 
-  if (!questionStore.isBookmarksFetching && !questionStore.myBookmarks.length) {
+  if (!questionStore.isMyBookmarksFetching && !questionStore.myBookmarks.length) {
     return (
       <Center color="gray.500" height="200px">
         You have no any bookmarks yet.
@@ -26,10 +26,10 @@ export function MyBookmarksPage() {
     <>
       <Stack spacing="8px">
         {/* Skeletons */}
-        {questionStore.isBookmarksFetching &&
+        {questionStore.isMyBookmarksFetching &&
           [...Array(pagination.perPage)].map((_, index) => <QuestionListItemSkeleton key={index} />)}
 
-        {!questionStore.isBookmarksFetching &&
+        {!questionStore.isMyBookmarksFetching &&
           questionStore.myBookmarks.map((question) => <QuestionListItem item={question} key={question.question_id} />)}
       </Stack>
 
diff --git a/src/pages/MyQuestionsPage.tsx b/src/pages/MyQuestionsPage.tsx
@@ -1,34 +1,21 @@
-import { useEffect, useState } from 'react';
-import { QuestionType } from '../interfaces/QuestionType';
+import { useEffect } from 'react';
 import { QuestionListItem } from '../components/posts/QuestionListItem';
-import stackoverflow from '../uitls/stackexchange-api';
-import { Box, Center, Stack } from "@chakra-ui/react";
+import { Box, Center, Stack } from '@chakra-ui/react';
 import { QuestionListItemSkeleton } from '../components/posts/QuestionListItem.skeleton';
 import { Pagination } from '../components/ui/Pagination';
 import { usePagination } from '../hooks/use-pagination';
+import { observer } from 'mobx-react-lite';
+import { useStores } from '../models';
 
-export function MyQuestionsPage() {
+export const MyQuestionsPage = observer(() => {
+  const { questionStore } = useStores();
   const pagination = usePagination();
-  const [isLoaded, setIsLoaded] = useState(false);
-  const [questions, setQuestions] = useState<QuestionType[]>([]);
 
   useEffect(() => {
-    stackoverflow
-      .get('me/questions', {
-        order: 'desc',
-        sort: 'creation',
-        page: pagination.page,
-        pagesize: pagination.perPage,
-        filter: '!HzgO6Jg6sME4H_1lyzjHHRxMDyjoWkuK(8Xe125IMyd4rNGmzV(xVm79voQW*H7_CY)rZkEokE8LKn2_KZ4TJ5F0.2rZ1'
-      })
-      .then((response) => {
-        pagination.setTotal((response as any).total);
-        setQuestions((response as any).items);
-        setIsLoaded(true);
-      });
+    questionStore.getMyQuestions(pagination);
   }, [pagination.page, pagination.perPage]);
 
-  if (isLoaded && !questions.length) {
+  if (!questionStore.isMyQuestionsFetching && !questionStore.myQuestions.length) {
     return (
       <Center color="gray.500" height="200px">
         You have no any questions yet.
@@ -40,9 +27,11 @@ export function MyQuestionsPage() {
     <>
       <Stack spacing="8px">
         {/* Skeletons */}
-        {!isLoaded && [...Array(10)].map((_, index) => <QuestionListItemSkeleton key={index} />)}
+        {questionStore.isMyQuestionsFetching &&
+          [...Array(10)].map((_, index) => <QuestionListItemSkeleton key={index} />)}
 
-        {isLoaded && questions.map((question) => <QuestionListItem item={question} key={question.question_id} />)}
+        {!questionStore.isMyQuestionsFetching &&
+          questionStore.myQuestions.map((question) => <QuestionListItem item={question} key={question.question_id} />)}
       </Stack>
 
       {pagination.totalPages > 0 && (
@@ -52,4 +41,4 @@ export function MyQuestionsPage() {
       )}
     </>
   );
-}
+});
diff --git a/yarn.lock b/yarn.lock
