IssueSlice.ts

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const fetchIssues = createAsyncThunk<string[], void, { rejectValue: string }>(
  "githubIssue/fetchIssues",
  async (_, thunkAPI) => {
    try {
      const response = await fetch("https://api.github.com/repos/github/hub/issues");
      const data = await response.json();
      const issues = data.map((issue: { title: string }) => issue.title);
      return issues;
    } catch (error) {
      return thunkAPI.rejectWithValue("Failed to fetch issues.");
    }
  }
);

export const createIssue = createAsyncThunk<string, { title: string }, { rejectValue: string }>(
  "githubIssue/createIssue",
  async ({ title }, thunkAPI) => {
    try {
      // Make API call to create the issue using the provided title
      const response = await fetch("https://api.github.com/repos/github/hub/issues", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ title }),
      });

      // Check the response status and handle accordingly
      if (response.status === 201) {
        return "Issue created successfully";
      } else {
        return thunkAPI.rejectWithValue("Failed to create issue.");
      }
    } catch (error) {
      return thunkAPI.rejectWithValue("Failed to create issue.");
    }
  }
);

interface IssuesState {
  issues: string[];
  loading: boolean;
  error: string | null;
}

const initialState: IssuesState = {
  issues: [],
  loading: false,
  error: null,
};

export const issuesSliceGithub = createSlice({
  name: 'github_issues',
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchIssues.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchIssues.fulfilled, (state, action) => {
        state.loading = false;
        state.issues = action.payload;
      })
      .addCase(fetchIssues.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message || 'Something went wrong';
      })

      .addCase(createIssue.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(createIssue.fulfilled, (state, action) => {
        state.loading = false;
        state.error = null;
        // Refresh the issues list after creating a new issue
        state.issues = []; // Clear the existing issues list

        // Dispatch the fetchIssues action to fetch the updated list
        // TODO Recall issue list to update
      })
      .addCase(createIssue.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message || 'Failed to create issue.';
      });
  },
});

export default issuesSliceGithub.reducer;