add repoConfig; add doubleClickToEdit to config

Author: lihebi

cpkernel/src/resolver_local.js

@@ -146,6 +146,18 @@ export function getResolvers(appDir) {
       activeSessions: async (_, __, { userId }) => {
         return [];
       },
+      repoConfig: async (_, { name }) => {
+        if (!fs.existsSync(path.join(appDir, name))) {
+          return false;
+        }
+        // codepod config
+        let config_file = path.join(appDir, name, "codepod.json");
+        let config = "{}";
+        if (fs.existsSync(config_file)) {
+          config = await fs.promises.readFile(config_file);
+        }
+        return config.toString();
+      },
       repo: async (_, { name, username }) => {
         if (!fs.existsSync(path.join(appDir, name))) {
           return false;
@@ -197,6 +209,21 @@ export function getResolvers(appDir) {
       },
     },
     Mutation: {
+      updateRepoConfig: async (_, { name, config }) => {
+        if (!fs.existsSync(path.join(appDir, name))) {
+          return false;
+        }
+        let config_file = path.join(appDir, name, "codepod.json");
+        let newconfig = JSON.parse(config);
+
+        let obj = {};
+        if (fs.existsSync(config_file)) {
+          obj = JSON.parse(await fs.promises.readFile(config_file));
+        }
+        Object.assign(obj, newconfig);
+        await fs.promises.writeFile(config_file, JSON.stringify(obj, null, 2));
+        return true;
+      },
       signup: async (_, { username, email, password, invitation }) => {
         return false;
       },

cpkernel/src/typedefs.js

@@ -66,6 +66,7 @@ export const typeDefs = gql`
     me: User
     repos: [Repo]
     repo(name: String!, username: String!): Repo
+    repoConfig(name: String!): String
     pods(username: String, reponame: String): [Pod]
     pod(id: ID!): Pod
     myRepos: [Repo]
@@ -86,6 +87,7 @@ export const typeDefs = gql`
     updateUser(username: String, email: String, name: String): Boolean
     createRepo(name: String): Boolean
     deleteRepo(name: String): Boolean
+    updateRepoConfig(name: String, config: String): Boolean
     addPod(
       reponame: String
       username: String

ui/src/components/repo/pod.js

@@ -942,6 +942,9 @@ function ThePod({ id }) {
   // console.log("rendinering thepod", id);
   const pod = useSelector((state) => state.repo.pods[id]);
   const dispatch = useDispatch();
+  const doubleClickToEdit = useSelector(
+    (state) => state.repo.repoConfig?.doubleClickToEdit
+  );
   if (pod.type === "WYSIWYG") {
     return <WysiwygPod pod={pod} />;
   } else if (pod.type === "MD") {
@@ -959,7 +962,7 @@ function ThePod({ id }) {
     );
   } else if (pod.type === "CODE") {
     // return <Text>CODE</Text>;
-    if (pod.render) {
+    if (!doubleClickToEdit || pod.render) {
       return <CodePod id={id} />;
     } else {
       return (

ui/src/components/repo/sidebar.js

@@ -872,6 +872,89 @@ function SidebarTest() {
   );
 }
 
+function ConfigButton() {
+  let reponame = useSelector((state) => state.repo.reponame);
+  const dispatch = useDispatch();
+  // let username = useSelector((state) => state.repo.username);
+  const { data, loading, error } = useQuery(gql`
+    query RepoConfig {
+      repoConfig(name: "${reponame}")
+    }
+  `);
+  const [updateRepoConfig, {}] = useMutation(
+    gql`
+      mutation UpdateRepoConfig($reponame: String, $config: String) {
+        updateRepoConfig(name: $reponame, config: $config)
+      }
+    `,
+    { refetchQueries: ["RepoConfig"] }
+  );
+  useEffect(() => {
+    console.log(data);
+    if (data) {
+      dispatch(repoSlice.actions.setRepoConfig(JSON.parse(data.repoConfig)));
+    }
+  }, [data]);
+  const repoConfig = useSelector((state) => state.repo.repoConfig);
+  // console.log("repoConfig", repoConfig);
+  // console.log("ConfigButton", data);
+  // const [open, setOpen] = React.useState(false);
+  // const handleOpen = () => setOpen(true);
+  // const handleClose = () => setOpen(false);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  return (
+    <Box>
+      <Button
+        onClick={() => {
+          // 1. show a new interface
+          // setOpen(true);
+          onOpen();
+          // 2. do the config
+          // 3. update the config
+        }}
+      >
+        Config
+      </Button>
+      <Modal isOpen={isOpen} onClose={onClose} size="6xl">
+        <ModalOverlay />
+
+        <ModalContent>
+          <ModalHeader>Config</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody h={50} overflow="scroll">
+            <Box>
+              <Text>Double Click to Edit</Text>
+              <Switch
+                defaultChecked={repoConfig && repoConfig.doubleClickToEdit}
+                onChange={(e) => {
+                  // dispatch(repoSlice.actions.setDevMode(e.target.checked));
+                  updateRepoConfig({
+                    variables: {
+                      reponame,
+                      config: JSON.stringify({
+                        doubleClickToEdit: e.target.checked,
+                      }),
+                    },
+                  });
+                }}
+              ></Switch>
+            </Box>
+          </ModalBody>
+
+          <ModalFooter>
+            {/* <Button colorScheme="blue" mr={3} onClick={onClose}>
+              Save
+            </Button> */}
+            <Button colorScheme="blue" mr={3} onClick={onClose}>
+              Close
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </Box>
+  );
+}
+
 export function Sidebar() {
   return (
     <Box mx={2} px="1rem" boxShadow="xl" rounded="md" bg="gray.200">
@@ -898,6 +981,7 @@ export function Sidebar() {
         <ApplyAll />
       </Box>
       <Divider my={2} />
+      <ConfigButton />
     </Box>
   );
 }

ui/src/lib/store.js

@@ -181,6 +181,9 @@ export const repoSlice = createSlice({
       state.reponame = reponame;
       state.username = username;
     },
+    setRepoConfig: (state, action) => {
+      state.repoConfig = action.payload;
+    },
     markClip: (state, action) => {
       let { id } = action.payload;
       let pod = state.pods[id];