[FE] 3주차 중간 PR (Daisy & Goody)

frontend/src/App.jsx

@@ -11,26 +11,27 @@ import Labels from "./components/Labels/Labels";
 import NewIssue from "./components/pages/NewIssuePage";
 import { ThemeProvider } from "styled-components";
 import theme from "styles/theme";
-import store from "./MyRecoil/store";
-
-export const globalStateRoot = createContext();
+// import store from "./MyRecoil";
+// export const globalStateRoot = createContext();
 
 function App() {
- const globalState = useRef(store);
+ // const globalState = useRef(store);
  return (
- <globalStateRoot.Provider value={globalState}>
+ // <globalStateRoot.Provider value={globalState}>
+ <RecoilRoot>
  <ThemeProvider theme={theme}>
  <Switch>
  <Route exact path="/" component={LoginPage} />
  <PrivateRoute path="/main" component={MainPage} />
  <Route path="/login" component={LoginLoadingPage} />
  <Route path="/main/milestones" component={Milestones} />
  <Route path="/main/labels" component={Labels} />
- {/* <Route path="/main/new" component={NewIssue} /> */}
+ <Route path="/main/new" component={NewIssue} />
  <Route path="*" component={NoMatch} />
  </Switch>
  </ThemeProvider>
- </globalStateRoot.Provider>
+ </RecoilRoot>
+ // {/* </globalStateRoot.Provider> */}
  );
 }
 

frontend/src/MyRecoil/atom.js

@@ -1,28 +1,39 @@
-function atom({ key, initialState }) {
- return { key, initialState };
-}
+// // function atom({ key, initialState }) {
+// //  return { key, initialState };
+// // }
 
-export const issueAtomState = atom({
- key: "issueAtomState",
- initialState: true,
-});
+// import { atom } from "./index";
+// export const issueState = atom({
+// key: "issueState",
+// initialState: true,
+// });
 
-export const milestoneAtomState = atom({
- key: "milestoneAtomState",
- initialState: [],
-});
+// export const milestoneState = atom({
+//  key: "milestoneState",
+//  initialState: [],
+// });
 
-export const asigneeAtomState = atom({
- key: "asigneeAtomState",
- initialState: [],
-});
+// export const asigneeState = atom({
+//  key: "asigneeState",
+//  initialState: [],
+// });
 
-export const labelAtomState = atom({
- key: "labelAtomState",
- initialState: [],
-});
+// export const labelState = atom({
+//  key: "labelState",
+//  initialState: [],
+// });
 
-export const authorAtomState = atom({
- key: "authorAtomState",
- initialState: [],
-});
+// export const authorState = atom({
+// key: "authorState",
+// initialState: [],
+// });
+
+// export const selectedIssueCntState = atom({
+// key: "selectedIssueCntState",
+// initialState: 0,
+// });
+
+// export const clickedFilterState = atom({
+// key: "clickedFilterState",
+// initialState: null,
+// });

frontend/src/MyRecoil/index.js

@@ -0,0 +1,86 @@
+// import { useContext, useState, useCallback, useEffect } from "react";
+// import { globalStateRoot } from "App";
+
+// export const atom = ({ key, initialState }) => {
+// return { key, initialState };
+// };
+
+// export const useRecoilState = atom => {
+// const { key } = atom;
+// const store = useContext(globalStateRoot).current;
+// const [, setReRender] = useState({});
+// store.setInitState(atom);
+
+// const forceUpdate = useCallback(() => {
+// console.log("forced Update");
+// setReRender({});
+// }, []);
+
+// useEffect(() => {
+// store.subscribe({ key, fn: forceUpdate });
+// }, []);
+
+// return [store.getState(key), store.setState(key)];
+// };
+// export const useRecoilValue = atom => {
+// const { key } = atom;
+// const store = useContext(globalStateRoot).current;
+// const [, setReRender] = useState({});
+// store.setInitState(atom);
+
+// const forceUpdate = useCallback(() => {
+// console.log("forced Update");
+// setReRender({});
+// }, []);
+
+// useEffect(() => {
+// store.subscribe({ key, fn: forceUpdate });
+// }, []);
+
+// return store.getState(key);
+// };
+
+// export const useSetRecoilState = atom => {
+// const { key } = atom;
+// const store = useContext(globalStateRoot).current;
+// const [, setReRender] = useState({});
+// store.setInitState(atom);
+
+// const forceUpdate = useCallback(() => {
+// console.log("forced Update");
+// setReRender({});
+// }, []);
+
+// useEffect(() => {
+// store.subscribe({ key, fn: forceUpdate });
+// }, []);
+
+// return store.setState(key);
+// };
+
+// export const store = {
+// observers: {},
+// state: {},
+// subscribe({ key, fn }) {
+// this.observers[key] = this.observers[key] || [];
+// this.observers[key].push(fn);
+// },
+
+// setInitState({ key, initialState }) {
+// if (this.state[key]) return;
+// this.state[key] = initialState;
+// },
+
+// getState(key) {
+// return this.state[key];
+// },
+
+// setState(key) {
+// return fn => {
+// this.state[key] = fn(this.state[key]);
+// this.observers[key].forEach(callback => callback());
+// };
+// },
+// };
+
+// export default store;

frontend/src/RecoilStore/Atoms.jsx

@@ -1,26 +1,67 @@
 import { atom } from "recoil";
 
-export const issueAtomState = atom({
- key: "issueFilter",
- default: "열린 이슈",
+export const selectedIssueCntState = atom({
+ key: "selectedIssueCntState",
+ default: 0,
 });
 
-export const assigneeAtomState = atom({
- key: "assigneeFilter",
- default: [],
+export const clickedFilterState = atom({
+ key: "clickedFilterState",
+ default: null,
 });
 
-export const labelAtomState = atom({
- key: "labelFilter",
- default: [],
+export const filterBarInputState = atom({
+ key: "filterBarInputState",
+ default: {
+ placeholder: "is:issue is:open",
+ assignee: null,
+ label: null,
+ milestone: null,
+ author: null,
+ issue: null,
+ },
 });
 
-export const milestoneAtomState = atom({
- key: "milestoneFilter",
- default: [],
+export const labelButtonFlagState = atom({
+ key: "labelButtonFlagState",
+ default: true,
 });
 
-export const authorAtomState = atom({
- key: "authorFilter",
- default: [],
+export const milestoneButtonFlagState = atom({
+ key: "milestoneButtonFlag",
+ default: false,
+});
+
+export const milestoneAddButtonFlagState = atom({
+ key: "milestoneAddButtonFlagState",
+ default: false,
+});
+
+export const milestoneUpdateState = atom({
+ key: "milestoneAddButtonFlagState",
+ default: false,
+});
+
+export const labelInitialData = atom({
+ key: "labelInitialData",
+ default: null,
+});
+export const labelAddButtonFlagState = atom({
+ key: "labelAddButtonFlagState",
+ default: false,
+});
+
+export const labelEditButtonFlagState = atom({
+ key: "labelEditButtonFlagState",
+ default: false,
+});
+
+export const navigatorAddButtonFlagState = atom({
+ key: "navigatorAddButtonFlagState",
+ default: false,
+});
+
+export const milestoneCountState = atom({
+ key: "milestoneCountState",
+ default: 0,
 });